diff --git a/src/lib/components/organisms/navmenu/NavMenu.tsx b/src/lib/components/organisms/navmenu/NavMenu.tsx
index f624f78..7b0a2eb 100644
--- a/src/lib/components/organisms/navmenu/NavMenu.tsx
+++ b/src/lib/components/organisms/navmenu/NavMenu.tsx
@@ -1,6 +1,6 @@
import { FC, ReactNode } from 'react'
-import styles from './navmenu.module.scss'
import responsive from '../../../styles/responsive.module.scss'
+import styles from './navmenu.module.scss'
export interface MenuItem {
link: ReactNode
}
@@ -9,7 +9,12 @@ export interface CategoryDelimiter {
category: string
}
-export type NavMenuEntry = MenuItem | CategoryDelimiter
+export interface CollapsibleCategory {
+ title: ReactNode
+ elements: MenuItem[]
+}
+
+export type NavMenuEntry = MenuItem | CategoryDelimiter | CollapsibleCategory
export interface NavMenuProps {
links: NavMenuEntry[]
@@ -18,6 +23,23 @@ export interface NavMenuProps {
fillScreen?: 'always' | 'mobile' | 'never'
}
+const DropDownCollapsibleCategory = ({ cat }: { cat: CollapsibleCategory }) => {
+ return (
+
+ {cat.title}
+
+
+ {cat.elements.map((item, index) => (
+ -
+ {item.link}
+
+ ))}
+
+
+
+ )
+}
+
const Gap: FC<{ type: 'always' | 'mobile' | 'never' }> = ({ type }) => {
if (type === 'always') {
return
@@ -50,6 +72,20 @@ export const NavMenu: FC = ({ links, headerLeft, headerRight, fill
)
}
+ if ('elements' in link) {
+ return (
+ <>
+
+ {link.title}
+
+ {link.elements.map((innerLink) => (
+
+ {innerLink.link}
+
+ ))}
+ >
+ )
+ }
return (
{link.link}
@@ -111,6 +147,20 @@ export const ToggleNavMenu: FC = ({
)
}
+ if ('elements' in link) {
+ return (
+ <>
+
+ {link.title}
+
+ {link.elements.map((innerLink) => (
+
+ {innerLink.link}
+
+ ))}
+ >
+ )
+ }
return (
{link.link}
@@ -161,12 +211,16 @@ export const ResponsiveNavMenu: FC = ({
{links.map((link, index) => {
- if (!('category' in link))
+ if (!('category' in link) && !('elements' in link)) {
return (
- {link.link}
+ {(link as MenuItem).link}
)
+ }
+ if ('elements' in link) {
+ return
+ }
})}
@@ -180,6 +234,20 @@ export const ResponsiveNavMenu: FC = ({
)
}
+ if ('elements' in link) {
+ return (
+ <>
+
+ {link.title}
+
+ {link.elements.map((innerLink) => (
+
+ {innerLink.link}
+
+ ))}
+ >
+ )
+ }
return (
{link.link}
diff --git a/src/lib/components/organisms/navmenu/navmenu.module.scss b/src/lib/components/organisms/navmenu/navmenu.module.scss
index 2c0f4cd..fb02b09 100644
--- a/src/lib/components/organisms/navmenu/navmenu.module.scss
+++ b/src/lib/components/organisms/navmenu/navmenu.module.scss
@@ -49,6 +49,9 @@
overflow: hidden;
margin: 0;
padding: var(--padding);
+ @media screen and (min-width: 768px) {
+ overflow: visible;
+ }
}
.nav_menu_toggleable {
@@ -212,6 +215,17 @@
border-bottom: 1px solid var(--gray-200);
}
+.category_nested {
+ @extend .category;
+ margin-left: var(--navmenu-nestsize);
+}
+
+.link_nested {
+ @extend .link;
+ margin-left: var(--navmenu-nestsize);
+}
+
+
.nav_menu_list {
display: flex;
flex-direction: column;
@@ -329,3 +343,41 @@
.gap {
height: 100vh;
}
+
+.dropdown_cat{
+ @extend .link;
+ position: relative;
+ & > .dropdown {
+ display: none;
+ }
+ &:hover {
+ cursor: pointer;
+ & > .dropdown {
+ display: block;
+ }
+ }
+ &:active {
+ & > .dropdown {
+ display: block;
+ }
+ }
+}
+
+.dropdown {
+ position: absolute !important;
+ top: 0;
+ right: 0;
+ display: block;
+}
+
+.dropdown_cat_list{
+ background-color: var(--navmenu-background-color);
+ backdrop-filter: var(--background-blur);
+ animation: navmenu_transition_slidedown 0.3s ease-out;
+ animation-fill-mode: forwards;
+ padding: var(--padding);
+ border-radius: var(--border-radius);
+ width: max-content;
+ overflow: hidden;
+ margin-top: var(--space-10);
+}
diff --git a/src/lib/components/organisms/navmenu/navmenu.stories.tsx b/src/lib/components/organisms/navmenu/navmenu.stories.tsx
index 87ff6b6..8f59d6b 100644
--- a/src/lib/components/organisms/navmenu/navmenu.stories.tsx
+++ b/src/lib/components/organisms/navmenu/navmenu.stories.tsx
@@ -41,3 +41,16 @@ NoCategories.args = {
{ link: Link 6 },
],
}
+
+export const CollapsibleCategories = Template.bind({})
+CollapsibleCategories.args = {
+ links: [
+ { link: Link 1 },
+ { link: Link 2 },
+ { link: Link 3 },
+ {
+ title: CCat 1,
+ elements: [{ link: Link 4 }, { link: Link 5 }, { link: Link 6 }],
+ },
+ ],
+}
diff --git a/src/lib/components/organisms/navmenu/responsivenavmenu.stories.tsx b/src/lib/components/organisms/navmenu/responsivenavmenu.stories.tsx
index 98d1bc3..651b100 100644
--- a/src/lib/components/organisms/navmenu/responsivenavmenu.stories.tsx
+++ b/src/lib/components/organisms/navmenu/responsivenavmenu.stories.tsx
@@ -57,3 +57,16 @@ NoCategories.args = {
),
headerItemPosition: 'left',
}
+
+export const CollapsibleCategories = Template.bind({})
+CollapsibleCategories.args = {
+ links: [
+ { link: Link 1 },
+ { link: Link 2 },
+ { link: Link 3 },
+ {
+ title: CCat 1,
+ elements: [{ link: Link 4 }, { link: Link 5 }, { link: Link 6 }],
+ },
+ ],
+}
diff --git a/src/lib/components/organisms/navmenu/togglenavmenu.stories.tsx b/src/lib/components/organisms/navmenu/togglenavmenu.stories.tsx
index c482336..e4a46a8 100644
--- a/src/lib/components/organisms/navmenu/togglenavmenu.stories.tsx
+++ b/src/lib/components/organisms/navmenu/togglenavmenu.stories.tsx
@@ -49,3 +49,16 @@ NoCategories.args = {
{ link: Link 6 },
],
}
+
+export const CollapsibleCategories = Template.bind({})
+CollapsibleCategories.args = {
+ links: [
+ { link: Link 1 },
+ { link: Link 2 },
+ { link: Link 3 },
+ {
+ title: CCat 1,
+ elements: [{ link: Link 4 }, { link: Link 5 }, { link: Link 6 }],
+ },
+ ],
+}
diff --git a/src/lib/styles/variables/default-variables.scss b/src/lib/styles/variables/default-variables.scss
index ed1165c..e4a0047 100644
--- a/src/lib/styles/variables/default-variables.scss
+++ b/src/lib/styles/variables/default-variables.scss
@@ -16,6 +16,7 @@
--error-color: #ff0000;
--hover-color-navmenu: #0099ff29;
--navmenu-background-color-collapsed: rgba(130, 130, 130, 0.2);
+ --navmenu-nestsize: var(--space-md);
--background-blur: blur(10px);