feat: add my pages mobile dropdown cmoponent, parallel route, and consume + zustand store

components/Current/Header/MainMenu/index.tsx

@@ -4,6 +4,7 @@ import { useIntl } from "react-intl"
 
 import { login } from "@/constants/routes/handleAuth"
 import { myPages } from "@/constants/routes/myPages"
+import useDropdownStore from "@/stores/main-menu"
 
 import Image from "@/components/Image"
 import Link from "@/components/TempDesignSystem/Link"
@@ -21,16 +22,19 @@ export function MainMenu({
   logo,
   topMenuMobileLinks,
   languageSwitcher,
+  myPagesMobileDropdown,
   bookingHref,
   isLoggedIn,
   lang,
 }: MainMenuProps) {
   const intl = useIntl()
-  const [isOpen, setIsOpen] = useState(false)
 
-  function toogleIsOpen() {
-    setIsOpen((prevIsOpen) => !prevIsOpen)
-  }
+  const {
+    isHamburgerMenuOpen,
+    isMyPagesMobileMenuOpen,
+    toggleHamburgerMenu,
+    toggleMyPagesMobileMenu,
+  } = useDropdownStore()
 
   return (
     <div className={styles.mainMenu}>
@@ -43,8 +47,8 @@ export function MainMenu({
         <nav className={styles.navBar}>
           <button
             aria-pressed="false"
-            className={`${styles.expanderBtn} ${isOpen ? styles.expanded : ""}`}
-            onClick={toogleIsOpen}
+            className={`${styles.expanderBtn} ${isHamburgerMenuOpen ? styles.expanded : ""}`}
+            onClick={toggleHamburgerMenu}
             type="button"
           >
             <span className={styles.iconBars}></span>
@@ -66,7 +70,7 @@ export function MainMenu({
           </a>
 
           <ul
-            className={`${styles.listWrapper} ${isOpen ? styles.isOpen : ""}`}
+            className={`${styles.listWrapper} ${isHamburgerMenuOpen ? styles.isOpen : ""}`}
           >
             <ul className={styles.linkRow}>
               {isLoggedIn ? (
@@ -140,7 +144,17 @@ export function MainMenu({
           </ul>
           <div className={styles.buttonContainer}>
             <BookingButton href={bookingHref} />
+            {/* {myPagesMobileDropdown ? ( */}
+            {/*   <div */}
+            {/*     role="button" */}
+            {/*     onClick={() => toggleMyPagesMobileMenu()} */}
+            {/*     className={styles.userAvatar} */}
+            {/*   > */}
+            {/*     <span className={styles.userAvatarInner}>CM</span> */}
+            {/*   </div> */}
+            {/* ) : null} */}
           </div>
+          {/* {isMyPagesMenuOpen ? myPagesMobileDropdown : null} */}
         </nav>
       </div>
     </div>