feat(SW-272) implemented mobile design

components/Header/MainMenu/MobileMenu/index.tsx

@@ -24,7 +24,6 @@ export default function MobileMenu({
 }: React.PropsWithChildren<MobileMenuProps>) {
   const intl = useIntl()
   const {
-    handleHamburgerClick,
     toggleDropdown,
     isHamburgerMenuOpen,
     isMyPagesMobileMenuOpen,
@@ -32,6 +31,12 @@ export default function MobileMenu({
     isFooterLanguageSwitcherOpen,
   } = useDropdownStore()
 
+  const isHamburgerExtended =
+    isHamburgerMenuOpen ||
+    isMyPagesMobileMenuOpen ||
+    isHeaderLanguageSwitcherMobileOpen ||
+    isFooterLanguageSwitcherOpen
+
   useHandleKeyUp((event: KeyboardEvent) => {
     if (event.key === "Escape" && isHamburgerMenuOpen) {
       toggleDropdown(DropdownTypeEnum.HamburgerMenu)
@@ -49,18 +54,15 @@ export default function MobileMenu({
     <>
       <button
         type="button"
-        className={`${styles.hamburger} ${isHamburgerMenuOpen || isMyPagesMobileMenuOpen || isFooterLanguageSwitcherOpen || isHeaderLanguageSwitcherMobileOpen ? styles.isExpanded : ""}`}
+        className={`${styles.hamburger} ${isHamburgerExtended ? styles.isExpanded : ""}`}
         aria-label={intl.formatMessage({
-          id: isHamburgerMenuOpen ? "Close menu" : "Open menu",
+          id: isHamburgerExtended ? "Close menu" : "Open menu",
         })}
-        onClick={handleHamburgerClick}
+        onClick={() => toggleDropdown(DropdownTypeEnum.HamburgerMenu)}
       >
         <span className={styles.bar}></span>
       </button>
-      <Modal
-        className={styles.modal}
-        isOpen={isHamburgerMenuOpen || isHeaderLanguageSwitcherMobileOpen}
-      >
+      <Modal className={styles.modal} isOpen={isHamburgerMenuOpen}>
         <Dialog
           className={styles.dialog}
           aria-label={intl.formatMessage({ id: "Menu" })}