fix: update design of header

components/Current/Header/MainMenu/index.tsx

@@ -2,17 +2,19 @@
 import { useState } from "react"
 
 import Image from "@/components/Image"
+import Button from "@/components/TempDesignSystem/Button"
 
 import styles from "./mainMenu.module.css"
 
 import type { MainMenuProps } from "@/types/components/current/header/mainMenu"
 
-export default function MainMenu({
+export function MainMenu({
   frontpageLinkText,
   homeHref,
   links,
   logo,
   topMenuMobileLinks,
+  languageSwitcher,
 }: MainMenuProps) {
   const [isOpen, setIsOpen] = useState(false)
 
@@ -28,50 +30,43 @@ export default function MainMenu({
         itemType="http://schema.org/Organization"
       >
         <meta itemProp="name" content="Scandic" />
-        <button
-          aria-pressed="false"
-          className={`${styles.expanderBtn} ${isOpen ? styles.expanded : ""}`}
-          data-js="main-nav-toggler"
-          data-target="#main-menu"
-          onClick={toogleIsOpen}
-          type="button"
-        >
-          <span className={styles.iconBars}></span>
-          <span className={styles.hiddenAccessible}>Menu</span>
-        </button>
-
-        <a
-          className={styles.logoLink}
-          href={homeHref}
-          id="scandic-logo"
-          itemProp="url"
-        >
-          <span className={styles.hiddenAccessible}>{frontpageLinkText}</span>
-          <Image
-            alt="Scandic Hotels logo"
-            className={styles.logo}
-            data-js="scandiclogoimg"
-            data-nosvgsrc="/_static/img/scandic-logotype.png"
-            itemProp="logo"
-            height={22}
-            src={logo.url}
-            width={logo.dimension.width}
-          />
-        </a>
-
-        <nav>
-          <ul
-            className={`${styles.list} ${isOpen ? styles.isOpen : ""}`}
-            data-collapsable="main-menu"
-            id="main-menu"
+        <nav className={styles.navBar}>
+          <button
+            aria-pressed="false"
+            className={`${styles.expanderBtn} ${isOpen ? styles.expanded : ""}`}
+            onClick={toogleIsOpen}
+            type="button"
           >
-            {links.map((link, i) => (
-              <li className={styles.li} key={link.href + i}>
-                <a className={styles.link} href={link.href}>
-                  {link.title}
-                </a>
-              </li>
-            ))}
+            <span className={styles.iconBars}></span>
+            <span className={styles.hiddenAccessible}>Menu</span>
+          </button>
+
+          <a className={styles.logoLink} href={homeHref}>
+            <span className={styles.hiddenAccessible}>{frontpageLinkText}</span>
+            <Image
+              alt="Scandic Hotels logo"
+              className={styles.logo}
+              data-js="scandiclogoimg"
+              data-nosvgsrc="/_static/img/scandic-logotype.png"
+              itemProp="logo"
+              height={22}
+              src={logo.url}
+              width={logo.dimension.width}
+            />
+          </a>
+
+          <ul
+            className={`${styles.listWrapper} ${isOpen ? styles.isOpen : ""}`}
+          >
+            <ul className={styles.mainLinks}>
+              {links.map((link, i) => (
+                <li className={styles.li} key={link.href + i}>
+                  <a className={styles.link} href={link.href}>
+                    {link.title}
+                  </a>
+                </li>
+              ))}
+            </ul>
 
             <ul className={styles.mobileList}>
               {topMenuMobileLinks.map(({ link }, i) => (
@@ -83,10 +78,13 @@ export default function MainMenu({
               ))}
             </ul>
 
-            {/* {languageSwitcher ? (
+            {languageSwitcher ? (
               <li className={styles.mobileLi}>{languageSwitcher}</li>
-            ) : null} */}
+            ) : null}
           </ul>
+          {/* <div className={styles.buttonContainer}>
+            <Button>Book</Button>
+          </div> */}
         </nav>
       </div>
     </div>