chore: cleanup

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

@@ -0,0 +1,35 @@
+"use client"
+
+import { useState } from "react"
+
+import { ChevronDownIcon } from "@/components/Icons"
+import Link from "@/components/TempDesignSystem/Link"
+
+import MainMenuButton from "../../MainMenuButton"
+
+import styles from "./navigationMenuItem.module.css"
+
+import { NavigationMenuItemProps } from "@/types/components/header/navigationMenuItem"
+
+export default function MenuItem({ item }: NavigationMenuItemProps) {
+  const { children, title, href, seeAllLinkText, infoCard } = item
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  function handleButtonClick() {
+    setIsExpanded((prev) => !prev)
+  }
+
+  return children?.length ? (
+    <MainMenuButton onClick={handleButtonClick}>
+      {title}
+      <ChevronDownIcon
+        className={`${styles.chevron} ${isExpanded ? styles.isExpanded : ""}`}
+        color="red"
+      />
+    </MainMenuButton>
+  ) : (
+    <Link href={href} color="burgundy">
+      {title}
+    </Link>
+  )
+}

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

@@ -0,0 +1,7 @@
+.chevron {
+  transition: transform 0.2s;
+}
+
+.chevron.isExpanded {
+  transform: rotate(180deg);
+}

components/Header/MainMenu/NavigationMenu/index.tsx

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

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

@@ -0,0 +1,8 @@
+.navigationMenu {
+  list-style: none;
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--Spacing-x4);
+}