feat(SW-184): implementing mobile design

components/Header/MainMenu/index.tsx

@@ -6,12 +6,15 @@ import Image from "@/components/Image"
 import { getIntl } from "@/i18n"
 
 import { navigationMenuItems } from "../tempHeaderData"
+import MobileMenu from "./MobileMenu"
 import MyPagesMenu from "./MyPagesMenu"
 import NavigationMenu from "./NavigationMenu"
 
 import styles from "./mainMenu.module.css"
 
-export default async function MainMenu() {
+import { MainMenuProps } from "@/types/components/header/mainMenu"
+
+export default async function MainMenu({ languageUrls }: MainMenuProps) {
   const intl = await getIntl()
   const myPagesNavigation =
     await serverClient().contentstack.myPages.navigation.get()
@@ -28,13 +31,19 @@ export default async function MainMenu() {
             data-js="scandiclogoimg"
             data-nosvgsrc="/_static/img/scandic-logotype.png"
             itemProp="logo"
-            height={24}
+            height={22}
             src="/_static/img/scandic-logotype.svg"
-            width={113}
+            width={103}
           />
         </Link>
-        <NavigationMenu items={navigationMenuItems} />
-        <MyPagesMenu navigation={myPagesNavigation} user={user} />
+        <div className={styles.menus}>
+          <NavigationMenu items={navigationMenuItems} />
+          <MyPagesMenu navigation={myPagesNavigation} user={user} />
+          <MobileMenu
+            languageUrls={languageUrls}
+            mainNavigation={navigationMenuItems}
+          />
+        </div>
       </nav>
     </div>
   )