feat(SW-184): added menu buttons and my pages menu

components/Header/MainMenu/MenuItem/index.tsx

@@ -5,6 +5,7 @@ import { useState } from "react"
 import { ChevronDownIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 
+import MenuButton from "../MenuButton"
 import { MenuItemProps } from "./menuItem"
 
 import styles from "./menuItem.module.css"
@@ -18,17 +19,13 @@ export default function MenuItem({ item }: MenuItemProps) {
   }
 
   return children?.length ? (
-    <button
-      type="button"
-      className={styles.navigationButton}
-      onClick={handleButtonClick}
-    >
+    <MenuButton onClick={handleButtonClick}>
       {title}
       <ChevronDownIcon
         className={`${styles.chevron} ${isExpanded ? styles.isExpanded : ""}`}
         color="red"
       />
-    </button>
+    </MenuButton>
   ) : (
     <Link href={href} color="burgundy">
       {title}

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

@@ -1,17 +1,3 @@
-.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;
 }