feat(SW-184): added main components for new header

components/Header/MainMenu/MenuItem/index.tsx

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

components/Header/MainMenu/MenuItem/menuItem.module.css

@@ -0,0 +1,21 @@
+.navigationButton {
+  display: flex;
+  gap: var(--Spacing-x1);
+  align-items: center;
+  background-color: transparent;
+  color: var(--Base-Text-High-contrast);
+  border-width: 0;
+  padding: 0;
+  cursor: pointer;
+  font-family: var(--typography-Body-Bold-fontFamily);
+  font-weight: var(--typography-Body-Bold-fontWeight);
+  font-size: var(--typography-Body-Bold-fontSize);
+}
+
+.chevron {
+  transition: transform 0.2s;
+}
+
+.chevron.isExpanded {
+  transform: rotate(180deg);
+}

components/Header/MainMenu/MenuItem/menuItem.ts

@@ -0,0 +1,5 @@
+import { MenuItem } from ".."
+
+export interface MenuItemProps {
+  item: MenuItem
+}