style desktop nav menu using tailwind classes

Author: pettinarip

package.json

@@ -83,6 +83,7 @@
     "reading-time": "^1.5.0",
     "remark-gfm": "^3.0.1",
     "tailwind-merge": "^2.3.0",
+    "tailwind-variants": "^0.2.1",
     "tailwindcss-animate": "^1.0.7",
     "usehooks-ts": "^3.1.0",
     "yaml-loader": "^0.8.0"

src/components/Nav/Menu/MenuContent.tsx

@@ -1,12 +1,42 @@
 import { motion } from "framer-motion"
-import { Box } from "@chakra-ui/react"
+import { tv } from "tailwind-variants"
 import { Content } from "@radix-ui/react-navigation-menu"
 
+import { cn } from "@/lib/utils/cn"
+
 import { NavItem, NavSections } from "../types"
 
 import SubMenu from "./SubMenu"
 import { useNavMenu } from "./useNavMenu"
 
+export const navMenu = tv({
+  slots: {
+    base: "text-body",
+    item: "w-full relative -me-4 py-4 hover:text-menu-active [&:hover_p]:text-menu-active focus-visible:text-menu-active [&:focus-visible_p]:text-menu-active hover:outline-0 hover:rounded-md hover:shadow-none focus-visible:outline-0 focus-visible:rounded-md focus-visible:shadow-none",
+    submenu: "grid h-full w-full grid-cols-1",
+  },
+  variants: {
+    level: {
+      1: {
+        submenu: "grid-cols-3 bg-menu-1-background",
+        item: "data-[active=true]:bg-menu-1-active-background hover:bg-menu-1-active-background focus-visible:bg-menu-1-active-background",
+      },
+      2: {
+        submenu: "grid-cols-2 bg-menu-2-background",
+        item: "hover:bg-menu-2-active-background focus-visible:bg-menu-2-active-background data-[active=true]:bg-menu-2-active-background",
+      },
+      3: {
+        submenu: "grid-cols-1 bg-menu-3-background",
+        item: "data-[active=true]:bg-menu-3-active-background hover:bg-menu-3-active-background",
+      },
+      4: {
+        submenu: "grid-cols-1 bg-menu-4-background",
+        item: "data-[active=true]:bg-menu-4-active-background hover:bg-menu-4-active-background",
+      },
+    },
+  },
+})
+
 type MenuContentProps = {
   items: NavItem[]
   isOpen: boolean
@@ -15,31 +45,27 @@ type MenuContentProps = {
 
 // Desktop Menu content
 const MenuContent = ({ items, isOpen, sections }: MenuContentProps) => {
-  const { activeSection, containerVariants, menuColors, onClose } =
-    useNavMenu(sections)
+  const { activeSection, containerVariants, onClose } = useNavMenu(sections)
+  const { base } = navMenu()
 
   return (
     <Content asChild>
-      <Box
-        as={motion.div}
+      <motion.div
+        className={cn(
+          "absolute inset-x-0 top-19 border border-body-light shadow-md",
+          base()
+        )}
         variants={containerVariants}
         initial={false}
         animate={isOpen ? "open" : "closed"}
-        position="absolute"
-        top="19"
-        insetInline="0"
-        shadow="md"
-        border="1px"
-        borderColor={menuColors.stroke}
-        bg={menuColors.lvl[1].background}
       >
         <SubMenu
           lvl={1}
           items={items}
           activeSection={activeSection}
           onClose={onClose}
         />
-      </Box>
+      </motion.div>
     </Content>
   )
 }

src/components/Nav/Menu/SubMenu.tsx

@@ -1,13 +1,5 @@
 import { AnimatePresence, motion } from "framer-motion"
 import NextLink from "next/link"
-import {
-  Box,
-  Button,
-  Grid,
-  Icon,
-  ListItem,
-  UnorderedList,
-} from "@chakra-ui/react"
 import {
   Content,
   Item,
@@ -18,15 +10,18 @@ import {
   Viewport,
 } from "@radix-ui/react-navigation-menu"
 
-import { ButtonProps } from "@/components/Buttons"
-import Link from "@/components/Link"
+import { Button } from "@/components/ui/buttons/Button"
+import { BaseLink } from "@/components/ui/Link"
+import { ListItem, UnorderedList } from "@/components/ui/list"
 
+import { cn } from "@/lib/utils/cn"
 import { trackCustomEvent } from "@/lib/utils/matomo"
 import { cleanPath } from "@/lib/utils/url"
 
 import type { Level, NavItem, NavSectionKey } from "../types"
 
 import ItemContent from "./ItemContent"
+import { navMenu } from "./MenuContent"
 import NextChevron from "./NextChevron"
 import { useSubMenu } from "./useSubMenu"
 
@@ -47,77 +42,56 @@ type LvlContentProps = {
  * @returns The JSX element representing the menu content.
  */
 const SubMenu = ({ lvl, items, activeSection, onClose }: LvlContentProps) => {
-  const { asPath, locale, menuColors, menuVariants, PADDING } = useSubMenu()
+  const { asPath, locale, menuVariants } = useSubMenu()
+  const { submenu, item: itemClasses } = navMenu({ level: lvl })
 
   if (lvl > 3) return null
 
-  const templateColumns = `repeat(${4 - lvl}, 1fr)`
-
   return (
     <Sub orientation="vertical" asChild>
       <AnimatePresence>
-        <Grid
-          as={motion.div}
+        <motion.div
+          className={submenu()}
           variants={menuVariants}
           initial="closed"
           animate="open"
           exit="closed"
-          w="full"
-          h="full"
-          gridTemplateColumns={templateColumns}
         >
           <List asChild>
-            <UnorderedList listStyleType="none" p={PADDING / 2} m="0">
+            <UnorderedList className="m-0 list-none p-2">
               {items.map((item) => {
-                const { label, icon, ...action } = item
+                const { label, icon: Icon, ...action } = item
                 const subItems = action.items || []
                 const isLink = "href" in action
                 const isActivePage = isLink && cleanPath(asPath) === action.href
-                const activeStyles = {
-                  outline: "none",
-                  rounded: "md",
-                  "p, svg": { color: menuColors.highlight },
-                  bg: menuColors.lvl[lvl].activeBackground,
-                  boxShadow: "none",
-                }
-                const buttonProps: ButtonProps = {
-                  color: menuColors.body,
-                  leftIcon: lvl === 1 && icon ? <Icon as={icon} /> : undefined,
-                  rightIcon: isLink ? undefined : <NextChevron />,
-                  position: "relative",
-                  w: "full",
-                  me: -PADDING,
-                  sx: {
-                    "span:first-of-type": { m: 0, me: 4 }, // Spacing for icon
-                  },
-                  py: PADDING,
-                  bg: isActivePage
-                    ? menuColors.lvl[lvl].activeBackground
-                    : "none",
-                  _hover: activeStyles,
-                  _focus: activeStyles,
-                  variant: "ghost",
-                }
+
+                const buttonClasses = cn(
+                  "no-underline text-body",
+                  itemClasses()
+                )
+
                 return (
                   <Item key={label} asChild>
                     <ListItem
-                      mb={PADDING / 2}
-                      _last={{ mb: 0 }}
-                      sx={{
-                        '&:has(button[data-state="open"])': {
-                          roundedStart: "md",
-                          roundedEnd: "none",
-                          bg: menuColors.lvl[lvl].activeBackground,
-                          me: -PADDING,
-                          pe: PADDING,
-                        },
-                      }}
+                      className="mb-2 last:mb-0"
+                      // TODO
+                      // sx={{
+                      //   '&:has(button[data-state="open"])': {
+                      //     roundedStart: "md",
+                      //     roundedEnd: "none",
+                      //     bg: menuColors.lvl[lvl].activeBackground,
+                      //     me: -PADDING,
+                      //     pe: PADDING,
+                      //   },
+                      // }}
                     >
                       {isLink ? (
                         <NextLink href={action.href!} passHref legacyBehavior>
                           <NavigationMenuLink asChild>
                             <Button
-                              as={Link}
+                              variant="ghost"
+                              className={buttonClasses}
+                              data-active={isActivePage}
                               onClick={() => {
                                 onClose()
                                 trackCustomEvent({
@@ -126,31 +100,39 @@ const SubMenu = ({ lvl, items, activeSection, onClose }: LvlContentProps) => {
                                   eventName: action.href!,
                                 })
                               }}
-                              {...buttonProps}
+                              asChild
                             >
-                              <ItemContent item={item} lvl={lvl} />
+                              <BaseLink>
+                                {lvl === 1 && Icon ? (
+                                  <Icon className="me-4 h-6 w-6" />
+                                ) : null}
+
+                                <ItemContent item={item} lvl={lvl} />
+                              </BaseLink>
                             </Button>
                           </NavigationMenuLink>
                         </NextLink>
                       ) : (
                         <>
                           <Trigger asChild>
-                            <Button {...buttonProps}>
+                            <Button variant="ghost" className={buttonClasses}>
+                              {lvl === 1 && Icon ? (
+                                <Icon className="me-4 h-6 w-6" />
+                              ) : null}
+
                               <ItemContent item={item} lvl={lvl} />
+                              <NextChevron />
                             </Button>
                           </Trigger>
                           <Content asChild>
-                            <Box
-                              bg={menuColors.lvl[lvl + 1].background}
-                              h="full"
-                            >
+                            <div className="h-full">
                               <SubMenu
                                 lvl={(lvl + 1) as Level}
                                 items={subItems}
                                 activeSection={activeSection}
                                 onClose={onClose}
                               />
-                            </Box>
+                            </div>
                           </Content>
                         </>
                       )}
@@ -161,7 +143,7 @@ const SubMenu = ({ lvl, items, activeSection, onClose }: LvlContentProps) => {
             </UnorderedList>
           </List>
           <Viewport style={{ gridColumn: "2/4" }} />
-        </Grid>
+        </motion.div>
       </AnimatePresence>
     </Sub>
   )

src/components/Nav/Menu/useNavMenu.ts

@@ -1,19 +1,17 @@
 import { useState } from "react"
 import type { MotionProps } from "framer-motion"
-import { useEventListener } from "@chakra-ui/react"
 
 import { isModified } from "@/lib/utils/keyboard"
 
 import { MAIN_NAV_ID, SECTION_LABELS } from "@/lib/constants"
 
 import type { NavSectionKey, NavSections } from "../types"
 
-import { useNavMenuColors } from "@/hooks/useNavMenuColors"
+import { useEventListener } from "@/hooks/useEventListener"
 import { useRtlFlip } from "@/hooks/useRtlFlip"
 
 export const useNavMenu = (sections: NavSections) => {
   const { direction } = useRtlFlip()
-  const menuColors = useNavMenuColors()
   const [activeSection, setActiveSection] = useState<NavSectionKey | null>(null)
 
   // Focus corresponding nav section when number keys pressed
@@ -72,7 +70,6 @@ export const useNavMenu = (sections: NavSections) => {
     direction,
     handleSectionChange,
     isOpen,
-    menuColors,
     onClose,
   }
 }

src/components/Nav/Menu/useSubMenu.ts

@@ -1,14 +1,10 @@
 import type { MotionProps } from "framer-motion"
 import { useRouter } from "next/router"
 
-import { useNavMenuColors } from "@/hooks/useNavMenuColors"
 import { useRtlFlip } from "@/hooks/useRtlFlip"
 
-const PADDING = 4 // Chakra-UI space token
-
 export const useSubMenu = () => {
   const { asPath, locale } = useRouter()
-  const menuColors = useNavMenuColors()
   const { isRtl } = useRtlFlip()
 
   const menuVariants: MotionProps["variants"] = {
@@ -19,8 +15,6 @@ export const useSubMenu = () => {
   return {
     asPath,
     locale,
-    menuColors,
     menuVariants,
-    PADDING,
   }
 }

src/components/Nav/types.ts

@@ -1,4 +1,4 @@
-import type { RefObject } from "react"
+import type { FC, RefObject, SVGProps } from "react"
 import type { IconType } from "react-icons"
 import type { IconProps } from "@chakra-ui/react"
 
@@ -9,7 +9,10 @@ type LinkXorItems = LinkOnly | ItemsOnly
 export type NavItem = {
   label: string
   description: string
-  icon?: IconType | ((props: IconProps) => JSX.Element)
+  icon?:
+    | IconType
+    | FC<SVGProps<SVGElement>>
+    | ((props: IconProps) => JSX.Element)
 } & LinkXorItems
 
 export type NavSectionKey =

src/components/Nav/useNav.ts

@@ -20,7 +20,7 @@ import {
 import { PiFlask, PiUsersFourLight } from "react-icons/pi"
 import { useColorMode } from "@chakra-ui/react"
 
-import { EthereumIcon } from "@/components/icons/EthereumIcon"
+import EthereumIcon from "@/components/icons/ethereum-icon.svg"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 

src/components/icons/EthereumIcon.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import { Center, Flex, Icon, SimpleGrid } from "@chakra-ui/react"
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { EthHomeIcon } from "./EthHomeIcon"
+import EthHomeIcon from "./eth-home-icon.svg"
 import FeedbackThumbsUpIcon from "./feedback-thumbs-up-icon.svg"
 import { HighlightDarkIcon } from "./HighlightDarkIcon"
 import { HighlightIcon } from "./HighlightIcon"