feat: navmenu categories upgrade

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 (
+    <li className={[styles.link, styles.dropdown_cat].join(' ')}>
+      {cat.title}
+      <div className={styles.dropdown}>
+        <ul className={styles.dropdown_cat_list}>
+          {cat.elements.map((item, index) => (
+            <li key={index} className={styles.link}>
+              {item.link}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </li>
+  )
+}
+
 const Gap: FC<{ type: 'always' | 'mobile' | 'never' }> = ({ type }) => {
   if (type === 'always') {
     return <li className={styles.gap} />
@@ -50,6 +72,20 @@ export const NavMenu: FC<NavMenuProps> = ({ links, headerLeft, headerRight, fill
               </li>
             )
           }
+          if ('elements' in link) {
+            return (
+              <>
+                <li key={index} className={styles.category_nested}>
+                  {link.title}
+                </li>
+                {link.elements.map((innerLink) => (
+                  <li key={index} className={styles.link_nested}>
+                    {innerLink.link}
+                  </li>
+                ))}
+              </>
+            )
+          }
           return (
             <li key={index} className={styles.link}>
               {link.link}
@@ -111,6 +147,20 @@ export const ToggleNavMenu: FC<ToggleNavMenuProps> = ({
                 </li>
               )
             }
+            if ('elements' in link) {
+              return (
+                <>
+                  <li key={index} className={styles.category_nested}>
+                    {link.title}
+                  </li>
+                  {link.elements.map((innerLink) => (
+                    <li key={index} className={styles.link_nested}>
+                      {innerLink.link}
+                    </li>
+                  ))}
+                </>
+              )
+            }
             return (
               <li key={index} className={styles.link}>
                 {link.link}
@@ -161,12 +211,16 @@ export const ResponsiveNavMenu: FC<ToggleNavMenuProps> = ({
           <span className={responsive.lg_or_larger}>
             <span className={styles.nav_links_hor}>
               {links.map((link, index) => {
-                if (!('category' in link))
+                if (!('category' in link) && !('elements' in link)) {
                   return (
                     <li key={index} className={styles.link}>
-                      {link.link}
+                      {(link as MenuItem).link}
                     </li>
                   )
+                }
+                if ('elements' in link) {
+                  return <DropDownCollapsibleCategory key={index} cat={link as unknown as CollapsibleCategory} />
+                }
               })}
             </span>
           </span>
@@ -180,6 +234,20 @@ export const ResponsiveNavMenu: FC<ToggleNavMenuProps> = ({
                 </li>
               )
             }
+            if ('elements' in link) {
+              return (
+                <>
+                  <li key={index} className={styles.category_nested}>
+                    {link.title}
+                  </li>
+                  {link.elements.map((innerLink) => (
+                    <li key={index} className={styles.link_nested}>
+                      {innerLink.link}
+                    </li>
+                  ))}
+                </>
+              )
+            }
             return (
               <li key={index} className={styles.link}>
                 {link.link}

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);
+}

src/lib/components/organisms/navmenu/navmenu.stories.tsx

@@ -41,3 +41,16 @@ NoCategories.args = {
     { link: <a href="#">Link 6</a> },
   ],
 }
+
+export const CollapsibleCategories = Template.bind({})
+CollapsibleCategories.args = {
+  links: [
+    { link: <a href="#">Link 1</a> },
+    { link: <a href="#">Link 2</a> },
+    { link: <a href="#">Link 3</a> },
+    {
+      title: <a href="#">CCat 1</a>,
+      elements: [{ link: <a href="#">Link 4</a> }, { link: <a href="#">Link 5</a> }, { link: <a href="#">Link 6</a> }],
+    },
+  ],
+}

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: <a href="#">Link 1</a> },
+    { link: <a href="#">Link 2</a> },
+    { link: <a href="#">Link 3</a> },
+    {
+      title: <a href="#">CCat 1</a>,
+      elements: [{ link: <a href="#">Link 4</a> }, { link: <a href="#">Link 5</a> }, { link: <a href="#">Link 6</a> }],
+    },
+  ],
+}

src/lib/components/organisms/navmenu/togglenavmenu.stories.tsx

@@ -49,3 +49,16 @@ NoCategories.args = {
     { link: <a href="#">Link 6</a> },
   ],
 }
+
+export const CollapsibleCategories = Template.bind({})
+CollapsibleCategories.args = {
+  links: [
+    { link: <a href="#">Link 1</a> },
+    { link: <a href="#">Link 2</a> },
+    { link: <a href="#">Link 3</a> },
+    {
+      title: <a href="#">CCat 1</a>,
+      elements: [{ link: <a href="#">Link 4</a> }, { link: <a href="#">Link 5</a> }, { link: <a href="#">Link 6</a> }],
+    },
+  ],
+}

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);