fix(SW-184): using more variables and removed variants from navigation menu after PR

components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx

@@ -6,16 +6,14 @@ import { ChevronDownIcon, ChevronRightIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 
 import MainMenuButton from "../../MainMenuButton"
-import { navigationMenuItemVariants } from "./variants"
 
 import styles from "./navigationMenuItem.module.css"
 
 import type { NavigationMenuItemProps } from "@/types/components/header/navigationMenuItem"
 
-export default function MenuItem({ item, variant }: NavigationMenuItemProps) {
+export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
   const { children, title, href, seeAllLinkText, infoCard } = item
   const [isExpanded, setIsExpanded] = useState(false)
-  const isMobile = variant === "mobile"
 
   function handleButtonClick() {
     setIsExpanded((prev) => !prev)
@@ -24,7 +22,7 @@ export default function MenuItem({ item, variant }: NavigationMenuItemProps) {
   return children?.length ? (
     <MainMenuButton
       onClick={handleButtonClick}
-      className={navigationMenuItemVariants({ variant })}
+      className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : styles.desktop}`}
     >
       {title}
       {isMobile ? (
@@ -40,7 +38,7 @@ export default function MenuItem({ item, variant }: NavigationMenuItemProps) {
     <Link
       href={href}
       color="burgundy"
-      className={navigationMenuItemVariants({ variant })}
+      className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : styles.desktop}`}
     >
       {title}
     </Link>

components/Header/MainMenu/NavigationMenu/NavigationMenuItem/variants.ts

@@ -1,15 +0,0 @@
-import { cva } from "class-variance-authority"
-
-import styles from "./navigationMenuItem.module.css"
-
-export const navigationMenuItemVariants = cva(styles.navigationMenuItem, {
-  variants: {
-    variant: {
-      default: styles.default,
-      mobile: styles.mobile,
-    },
-  },
-  defaultVariants: {
-    variant: "default",
-  },
-})

components/Header/MainMenu/NavigationMenu/index.tsx

@@ -1,5 +1,4 @@
 import NavigationMenuItem from "./NavigationMenuItem"
-import { navigationMenuVariants } from "./variants"
 
 import styles from "./navigationMenu.module.css"
 
@@ -7,13 +6,15 @@ import type { NavigationMenuProps } from "@/types/components/header/navigationMe
 
 export default function NavigationMenu({
   items,
-  variant,
+  isMobile,
 }: NavigationMenuProps) {
   return (
-    <ul className={navigationMenuVariants({ variant })}>
+    <ul
+      className={`${styles.navigationMenu} ${isMobile ? styles.mobile : styles.desktop}`}
+    >
       {items.map((item) => (
         <li key={item.id} className={styles.item}>
-          <NavigationMenuItem variant={variant} item={item} />
+          <NavigationMenuItem isMobile={isMobile} item={item} />
         </li>
       ))}
     </ul>

components/Header/MainMenu/NavigationMenu/navigationMenu.module.css

@@ -20,7 +20,7 @@
 }
 
 @media screen and (min-width: 768px) {
-  .navigationMenu.default {
+  .navigationMenu.desktop {
     display: flex;
   }
 }

components/Header/MainMenu/NavigationMenu/variants.ts

@@ -1,15 +0,0 @@
-import { cva } from "class-variance-authority"
-
-import styles from "./navigationMenu.module.css"
-
-export const navigationMenuVariants = cva(styles.navigationMenu, {
-  variants: {
-    variant: {
-      default: styles.default,
-      mobile: styles.mobile,
-    },
-  },
-  defaultVariants: {
-    variant: "default",
-  },
-})