feat(SW-184): implementing mobile design

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

@@ -2,33 +2,46 @@
 
 import { useState } from "react"
 
-import { ChevronDownIcon } from "@/components/Icons"
+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 { NavigationMenuItemProps } from "@/types/components/header/navigationMenuItem"
 
-export default function MenuItem({ item }: NavigationMenuItemProps) {
+export default function MenuItem({ item, variant }: NavigationMenuItemProps) {
   const { children, title, href, seeAllLinkText, infoCard } = item
   const [isExpanded, setIsExpanded] = useState(false)
+  const isMobile = variant === "mobile"
 
   function handleButtonClick() {
     setIsExpanded((prev) => !prev)
   }
 
   return children?.length ? (
-    <MainMenuButton onClick={handleButtonClick}>
+    <MainMenuButton
+      onClick={handleButtonClick}
+      className={navigationMenuItemVariants({ variant })}
+    >
       {title}
-      <ChevronDownIcon
-        className={`${styles.chevron} ${isExpanded ? styles.isExpanded : ""}`}
-        color="red"
-      />
+      {isMobile ? (
+        <ChevronRightIcon className={`${styles.chevron}`} color="red" />
+      ) : (
+        <ChevronDownIcon
+          className={`${styles.chevron} ${isExpanded ? styles.isExpanded : ""}`}
+          color="red"
+        />
+      )}
     </MainMenuButton>
   ) : (
-    <Link href={href} color="burgundy">
+    <Link
+      href={href}
+      color="burgundy"
+      className={navigationMenuItemVariants({ variant })}
+    >
       {title}
     </Link>
   )

components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css

@@ -1,3 +1,10 @@
+.navigationMenuItem.mobile {
+  display: flex;
+  justify-content: space-between;
+  padding: var(--Spacing-x2) 0;
+  font-size: var(--typography-Subtitle-1-Mobile-fontSize);
+}
+
 .chevron {
   transition: transform 0.2s;
 }

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

@@ -0,0 +1,15 @@
+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",
+  },
+})