[WIP] Nav menu redesign

src/@chakra-ui/semanticTokens.ts

@@ -96,6 +96,36 @@ const semanticTokens = {
       _light: "rgba(255, 255, 255, 0.80)",
       _dark: "rgba(34, 34, 34, 0.80)",
     },
+
+    // Menu
+    menu: {
+      stroke: { _light: "gray.200", _dark: "gray.600" },
+      highlight: "primary.base",
+      lvl1: {
+        main: "body.base",
+        subtext: { _light: "gray.400", _dark: "gray.400" },
+        background: { _light: "white", _dark: "black" },
+        activeBackground: { _light: "gray.150", _dark: "gray.700" },
+      },
+      lvl2: {
+        main: "body.base",
+        subtext: { _light: "gray.400", _dark: "gray.300" },
+        background: { _light: "gray.150", _dark: "gray.700" },
+        activeBackground: { _light: "gray.200", _dark: "gray.600" },
+      },
+      lvl3: {
+        main: "body.base",
+        subtext: { _light: "gray.500", _dark: "gray.300" },
+        background: { _light: "gray.200", _dark: "gray.600" },
+        activeBackground: { _light: "gray.100", _dark: "gray.700" },
+      },
+      lvl4: {
+        main: "body.base",
+        subtext: { _light: "gray.700", _dark: "gray.300" },
+        background: { _light: "gray.300", _dark: "gray.700" },
+        activeBackground: { _light: "gray.200", _dark: "gray.800" },
+      },
+    }
   },
   gradients: {
     bgMainGradient: {
@@ -105,6 +135,11 @@ const semanticTokens = {
         "linear-gradient(102.7deg, rgba(185, 185, 241, 0.2) 0%, rgba(84, 132, 234, 0.2) 51.56%, rgba(58, 142, 137, 0.2) 100%)",
     },
   },
+  shadows: {
+    menu: {
+      accordion: "0px 2px 2px 0px rgba(0, 0, 0, 0.12) inset, 0px -3px 2px 0px rgba(0, 0, 0, 0.14) inset"
+    }
+  }
 }
 
 export default semanticTokens

src/components/Nav/Dropdown.tsx

@@ -4,7 +4,7 @@ import { Box, Fade, Flex, Icon, ListItem } from "@chakra-ui/react"
 
 import { BaseLink, type LinkProps } from "../Link"
 
-import { ISection } from "./types"
+import { NavSectionDetail } from "./types"
 
 import { useOnClickOutside } from "@/hooks/useOnClickOutside"
 
@@ -41,7 +41,7 @@ const DropdownContext = React.createContext<IDropdownContext | null>(null)
 
 export interface IProps {
   children?: React.ReactNode
-  section: ISection
+  section: NavSectionDetail
 }
 
 const NavDropdown: React.FC<IProps> & {
@@ -76,7 +76,7 @@ const NavDropdown: React.FC<IProps> & {
     }
   }
 
-  const ariaLabel = section.ariaLabel || section.text
+  const ariaLabel = section.ariaLabel || section.label
 
   return (
     <DropdownContext.Provider
@@ -106,7 +106,7 @@ const NavDropdown: React.FC<IProps> & {
             },
           }}
         >
-          {section.text}
+          {section.label}
           <Icon
             as={MdExpandMore}
             color="text200"