replace custom hook to set tw classes with nav variants

Author: pettinarip

src/components/Nav/Menu/ItemContent.tsx

@@ -1,36 +1,20 @@
-import { useRouter } from "next/router"
-
-import { cn } from "@/lib/utils/cn"
-import { cleanPath } from "@/lib/utils/url"
-
 import type { Level, NavItem } from "../types"
 
-import { useNavMenuColorsTw } from "@/hooks/useNavMenuColorsTw"
+import { navMenuVariants } from "./MenuContent"
 
 type ItemProps = {
   item: NavItem
   lvl: Level
 }
 
 const ItemContent = ({ item, lvl }: ItemProps) => {
-  const { label, description, ...action } = item
-  const { asPath } = useRouter()
-  const menuColors = useNavMenuColorsTw()
-
-  const isLink = "href" in action
-  const isActivePage = isLink && cleanPath(asPath) === action.href
+  const { label, description } = item
+  const { linkSubtext } = navMenuVariants({ level: lvl })
 
   return (
     <div className="relative me-auto text-start">
-      <p className={cn("font-bold text-body", menuColors.body)}>{label}</p>
-      <p
-        className={cn(
-          "text-sm",
-          isActivePage ? menuColors.body : menuColors.lvl[lvl].subtext
-        )}
-      >
-        {description}
-      </p>
+      <p className="font-bold">{label}</p>
+      <p className={linkSubtext()}>{description}</p>
     </div>
   )
 }

src/components/Nav/Menu/MenuContent.tsx

@@ -13,7 +13,8 @@ export const navMenuVariants = tv({
   slots: {
     base: "text-body",
     item: "has-[button[data-state=open]]:rounded-s-md has-[button[data-state=open]]:rounded-e-none has-[button[data-state=open]]:-me-2 has-[button[data-state=open]]:pe-2",
-    link: "w-full relative 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 rounded-md hover:shadow-none focus-visible:outline-0 focus-visible:rounded-md focus-visible:shadow-none",
+    link: "group w-full relative 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 rounded-md hover:shadow-none focus-visible:outline-0 focus-visible:rounded-md focus-visible:shadow-none",
+    linkSubtext: "text-sm",
     submenu: "grid h-full w-full grid-cols-1",
   },
   variants: {
@@ -22,21 +23,25 @@ export const navMenuVariants = tv({
         submenu: "grid-cols-3 bg-menu-1-background",
         item: "has-[button[data-state=open]]:bg-menu-1-active-background",
         link: "data-[active=true]:bg-menu-1-active-background hover:bg-menu-1-active-background focus-visible:bg-menu-1-active-background",
+        linkSubtext: "group-[data-active=true]:text-menu-1-subtext",
       },
       2: {
         submenu: "grid-cols-2 bg-menu-2-background",
         item: "has-[button[data-state=open]]:bg-menu-2-active-background",
         link: "hover:bg-menu-2-active-background focus-visible:bg-menu-2-active-background data-[active=true]:bg-menu-2-active-background",
+        linkSubtext: "group-[data-active=true]:text-menu-2-subtext",
       },
       3: {
         submenu: "grid-cols-1 bg-menu-3-background",
         item: "has-[button[data-state=open]]:bg-menu-3-active-background",
         link: "data-[active=true]:bg-menu-3-active-background hover:bg-menu-3-active-background",
+        linkSubtext: "group-[data-active=true]:text-menu-3-subtext",
       },
       4: {
         submenu: "grid-cols-1 bg-menu-4-background",
         item: "has-[button[data-state=open]]:bg-menu-4-active-background",
         link: "data-[active=true]:bg-menu-4-active-background hover:bg-menu-4-active-background",
+        linkSubtext: "group-[data-active=true]:text-menu-4-subtext",
       },
     },
   },

src/components/Nav/Mobile/LvlAccordion.tsx

@@ -18,23 +18,34 @@ import {
   AccordionTrigger,
 } from "./MenuAccordion"
 
-import { useNavMenuColorsTw } from "@/hooks/useNavMenuColorsTw"
-
 type LvlAccordionProps = {
   lvl: Level
   items: NavItem[]
   activeSection: NavSectionKey
   onToggle: () => void
 }
 
+const subtextColorPerLevel = {
+  1: "text-menu-1-subtext",
+  2: "text-menu-2-subtext",
+  3: "text-menu-3-subtext",
+  4: "text-menu-4-subtext",
+}
+
+const backgroundColorPerLevel = {
+  1: "bg-menu-1-background",
+  2: "bg-menu-2-background",
+  3: "bg-menu-3-background",
+  4: "bg-menu-4-background",
+}
+
 const LvlAccordion = ({
   lvl,
   items,
   activeSection,
   onToggle,
 }: LvlAccordionProps) => {
   const { asPath, locale } = useRouter()
-  const menuColors = useNavMenuColorsTw()
   const [value, setValue] = useState("")
 
   return (
@@ -84,7 +95,9 @@ const LvlAccordion = ({
                       <p
                         className={cn(
                           "text-md font-bold",
-                          isActivePage ? menuColors.active : menuColors.body
+                          isActivePage
+                            ? "text-primary-low-contrast"
+                            : "text-body"
                         )}
                       >
                         {label}
@@ -93,8 +106,8 @@ const LvlAccordion = ({
                         className={cn(
                           "text-sm font-normal",
                           isActivePage
-                            ? menuColors.active
-                            : menuColors.lvl[lvl].subtext
+                            ? "text-primary-high-contrast"
+                            : subtextColorPerLevel[lvl]
                         )}
                       >
                         {description}
@@ -114,7 +127,7 @@ const LvlAccordion = ({
           >
             <AccordionTrigger
               heading={`h${lvl + 1}` as "h2" | "h3" | "h4" | "h5"}
-              className={cn(menuColors.body, nestedAccordionSpacingMap[lvl])}
+              className={cn("text-body", nestedAccordionSpacingMap[lvl])}
               onClick={() => {
                 trackCustomEvent({
                   eventCategory: "Mobile navigation menu",
@@ -127,18 +140,13 @@ const LvlAccordion = ({
             >
               <ExpandIcon isOpen={isExpanded} />
               <div>
-                <p
-                  className={cn(
-                    "flex-1 text-md font-bold leading-tight",
-                    menuColors.body
-                  )}
-                >
+                <p className="flex-1 text-md font-bold leading-tight text-body">
                   {label}
                 </p>
                 <p
                   className={cn(
                     "text-sm font-normal leading-tight",
-                    menuColors.lvl[lvl].subtext
+                    subtextColorPerLevel[lvl]
                   )}
                 >
                   {description}
@@ -147,7 +155,7 @@ const LvlAccordion = ({
             </AccordionTrigger>
 
             <AccordionContent
-              className={cn("mt-0 p-0", menuColors.lvl[lvl + 1].background)}
+              className={cn("mt-0 p-0", backgroundColorPerLevel[lvl])}
             >
               <LvlAccordion
                 lvl={(lvl + 1) as Level}

src/components/Nav/Mobile/MenuBody.tsx

@@ -17,16 +17,13 @@ import {
   AccordionTrigger,
 } from "./MenuAccordion"
 
-import { useNavMenuColorsTw } from "@/hooks/useNavMenuColorsTw"
-
 type MenuBodyProps = {
   onToggle: () => void
   linkSections: NavSections
 }
 
 const MenuBody = ({ linkSections, onToggle }: MenuBodyProps) => {
   const { locale } = useRouter()
-  const menuColors = useNavMenuColorsTw()
   const [value, setValue] = useState("")
 
   return (
@@ -48,7 +45,7 @@ const MenuBody = ({ linkSections, onToggle }: MenuBodyProps) => {
               className="border-b border-body-light first:border-t"
             >
               <AccordionTrigger
-                className={cn(menuColors.body)}
+                className="text-body"
                 onClick={() => {
                   trackCustomEvent({
                     eventCategory: "Mobile navigation menu",
@@ -67,9 +64,8 @@ const MenuBody = ({ linkSections, onToggle }: MenuBodyProps) => {
 
               <AccordionContent
                 className={cn(
-                  "mt-0 p-0",
-                  isExpanded && "border-t border-disabled",
-                  menuColors.lvl[2].background
+                  "mt-0 bg-menu-2-background p-0",
+                  isExpanded && "border-t border-disabled"
                 )}
               >
                 <LvlAccordion