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",
+  },
+})

components/Header/MainMenu/NavigationMenu/index.tsx

@@ -1,15 +1,19 @@
 import NavigationMenuItem from "./NavigationMenuItem"
+import { navigationMenuVariants } from "./variants"
 
 import styles from "./navigationMenu.module.css"
 
 import { NavigationMenuProps } from "@/types/components/header/navigationMenu"
 
-export default function NavigationMenu({ items }: NavigationMenuProps) {
+export default function NavigationMenu({
+  items,
+  variant,
+}: NavigationMenuProps) {
   return (
-    <ul className={styles.navigationMenu}>
+    <ul className={navigationMenuVariants({ variant })}>
       {items.map((item) => (
-        <li key={item.id}>
-          <NavigationMenuItem item={item} />
+        <li key={item.id} className={styles.item}>
+          <NavigationMenuItem variant={variant} item={item} />
         </li>
       ))}
     </ul>

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

@@ -1,8 +1,26 @@
 .navigationMenu {
   list-style: none;
   margin: 0;
-  display: flex;
   justify-content: space-between;
   align-items: center;
   gap: var(--Spacing-x4);
+  display: none;
+}
+
+.navigationMenu.mobile {
+  display: grid;
+  width: 100%;
+  gap: 0;
+  justify-content: stretch;
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2) var(--Spacing-x2);
+}
+
+.navigationMenu.mobile .item {
+  border-bottom: 1px solid var(--Base-Border-Subtle);
+}
+
+@media screen and (min-width: 768px) {
+  .navigationMenu.default {
+    display: flex;
+  }
 }

components/Header/MainMenu/NavigationMenu/variants.ts

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