Merge pull request #12125 from ethereum/nav-menu-radix-ui

Nav menu - redesign implementation

Author: corwintines

netlify.toml

@@ -22,4 +22,5 @@
     "./src/intl/**/*",
     "!./public/**/*",
     "!./node_modules/@swc/core-linux-x64-musl/**/*",
+    "!./node_modules/@swc/core-linux-x64-gnu/**/*",
   ]

package.json

@@ -25,6 +25,7 @@
     "@docsearch/react": "^3.5.2",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@radix-ui/react-navigation-menu": "^1.1.4",
     "@socialgouv/matomo-next": "^1.8.0",
     "clipboard": "^2.0.11",
     "embla-carousel-react": "^7.0.0",

src/@chakra-ui/foundations/spacing.ts

@@ -1,6 +1,7 @@
 const spacing = {
   7.5: "1.875rem",
   10.5: "2.625rem",
+  19: "4.75rem", // Nav height
 }
 
 export default spacing

src/@chakra-ui/semanticTokens.ts

@@ -105,6 +105,12 @@ 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/LanguagePicker/index.tsx

@@ -71,7 +71,7 @@ const LanguagePicker = ({
         {/* Mobile Close bar */}
         <Flex
           justifyContent="end"
-          hideFrom="lg" // TODO: Confirm breakpoint after nav-menu PR merged
+          hideFrom="md"
           position="sticky"
           zIndex="sticky"
           top="0"
@@ -139,7 +139,7 @@ const LanguagePicker = ({
                 }}
               />
               <InputRightElement
-                hideBelow="lg" // TODO: Confirm breakpoint after nav-menu PR merged
+                hideBelow="md"
                 cursor="text"
               >
                 <Kbd

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<DropdownContext | null>(null)
 
 export type NavDropdownProps = {
   children?: React.ReactNode
-  section: ISection
+  section: NavSectionDetail
 }
 
 const NavDropdown = ({ children, section }: NavDropdownProps) => {
@@ -72,7 +72,7 @@ const NavDropdown = ({ children, section }: NavDropdownProps) => {
     }
   }
 
-  const ariaLabel = section.ariaLabel || section.text
+  const ariaLabel = section.ariaLabel || section.label
 
   return (
     <DropdownContext.Provider
@@ -102,7 +102,7 @@ const NavDropdown = ({ children, section }: NavDropdownProps) => {
             },
           }}
         >
-          {section.text}
+          {section.label}
           <Icon
             as={MdExpandMore}
             color="text200"

src/components/Nav/Menu.tsx

@@ -0,0 +1,38 @@
+import { useRouter } from "next/router"
+import { Box, Text } from "@chakra-ui/react"
+
+import { cleanPath } from "@/lib/utils/url"
+
+import type { Level, NavItem } from "../types"
+
+import { useNavMenuColors } from "@/hooks/useNavMenuColors"
+
+type ItemProps = {
+  item: NavItem
+  lvl: Level
+}
+
+const ItemContent = ({ item, lvl }: ItemProps) => {
+  const { label, description, icon, ...action } = item
+  const { asPath } = useRouter()
+  const menuColors = useNavMenuColors()
+
+  const isLink = "href" in action
+  const isActivePage = isLink && cleanPath(asPath) === action.href
+
+  return (
+    <Box me="auto" textAlign="start" position="relative">
+      <Text fontWeight="bold" color={menuColors.body}>
+        {label}
+      </Text>
+      <Text
+        fontSize="sm"
+        color={isActivePage ? menuColors.body : menuColors.lvl[lvl].subtext}
+      >
+        {description}
+      </Text>
+    </Box>
+  )
+}
+
+export default ItemContent

src/components/Nav/Menu/ItemContent.tsx

@@ -0,0 +1,15 @@
+import { useRouter } from "next/router"
+import { MdChevronLeft, MdChevronRight } from "react-icons/md"
+import { Icon,type IconProps } from "@chakra-ui/react"
+
+import type { Lang } from "@/lib/types"
+
+import { isLangRightToLeft } from "@/lib/utils/translations"
+
+const NextChevron = (props: IconProps) => {
+  const { locale } = useRouter()
+  const isRtl = isLangRightToLeft(locale! as Lang)
+  return <Icon as={isRtl ? MdChevronLeft : MdChevronRight} {...props} />
+}
+
+export default NextChevron