fix: update design of header

app/globals.css

@@ -88,3 +88,9 @@ body {
   overflow-x: hidden;
   padding: 0;
 }
+
+ul {
+  padding-inline-start: 0;
+  margin-block-start: 0;
+  margin-block-end: 0;
+}

components/Current/ContentPage/contentPage.module.css

@@ -4,5 +4,4 @@
   display: block;
   padding-bottom: 50px;
   width: 100%;
-  z-index: 10;
 }

components/Current/Header/LanguageSwitcher/Desktop/desktop.module.css

@@ -1,21 +1,76 @@
+.container {
+  position: relative;
+  font-family:
+    Helvetica Neue,
+    Helvetica,
+    Arial,
+    sans-serif;
+}
+
+.toggle {
+  display: flex;
+  color: #fff;
+  padding: 3px 15px;
+  font-size: 14px;
+  border: none;
+  background-color: transparent;
+  margin: 0 auto;
+  cursor: pointer;
+  gap: 4px;
+  align-items: center;
+}
+
+.hiddenAccessible {
+  display: block;
+  position: absolute;
+  left: -100000em;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+.caret {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-left: 2px;
+  vertical-align: middle;
+  border-top: 5px dashed;
+  border-right: 5px solid transparent;
+  border-left: 5px solid transparent;
+}
+
+.icon {
+  width: 18px;
+  height: 18px;
+  vertical-align: -4px;
+  margin-right: 3px;
+  fill: #fff;
+}
+
 .dropdown {
-  background-clip: padding-box;
+  position: absolute;
-  background-color: #fff;
+  top: 100%;
-  border: 1px solid rgba(0, 0, 0, .15);
+  left: 0;
-  border-radius: 4px;
+  z-index: 100;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
   display: none;
   float: left;
-  font-size: 1rem;
-  left: 0;
-  list-style: none;
-  margin: 2px 0 0;
   min-width: 160px;
   padding: 5px 0;
-  position: absolute;
+  margin: 2px 0 0;
+  list-style: none;
+  font-size: 16px;
   text-align: left;
-  top: 100%;
+  background-color: #fff;
-  z-index: 11;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  background-clip: padding-box;
+}
+
+.li {
+  cursor: pointer;
 }
 
 .dropdown.isOpen {
@@ -37,7 +92,7 @@
   text-decoration: none;
 }
 
-.active>.link {
+.active > .link {
   background-color: #00838e;
   color: #fff;
   outline: 0;

components/Current/Header/LanguageSwitcher/Desktop/index.tsx

@@ -1,7 +1,7 @@
 "use client"
 import { useCallback, useEffect, useRef, useState } from "react"
 
-import { languages } from "@/constants/languages"
+import { Lang, languages } from "@/constants/languages"
 
 import styles from "./desktop.module.css"
 
@@ -39,80 +39,35 @@ export default function Desktop({
   }, [close])
 
   return (
-    <div className="dropdown-container navbar-language-selector " ref={divRef}>
+    <div className={styles.container} ref={divRef}>
       <button
         aria-pressed="false"
-        className="navbar-language-selector__toggler"
+        className={styles.toggle}
-        data-js="dropdown-toggler"
         onClick={toggleOpen}
       >
-        <svg
+        <svg focusable="false" className={styles.icon} viewBox="0 0 32 32">
-          focusable="false"
-          className="icon icon--xs icon--white"
-          viewBox="0 0 32 32"
-        >
           <use xlinkHref="/_static/img/icons/sprites.svg#icon-globe"></use>
         </svg>
-        {currentLanguage}
+        {languages[currentLanguage]}
-        <span className="hidden--accessible">Choose language</span>
+        <span className={styles.hiddenAccessible}>Choose language</span>
-        <span className="caret"></span>
+        <span className={styles.caret}></span>
       </button>
       <ul className={`${styles.dropdown} ${isOpen ? styles.isOpen : ""}`}>
-        <li
+        {Object.keys(urls).map((key) => {
-          className={
+          const url = urls[key as Lang]?.url
-            currentLanguage === languages.en ? styles.active : undefined
+          if (url) {
+            return (
+              <li
+                key={key}
+                className={`${styles.li} ${currentLanguage === key ? styles.active : ""}`}
+              >
+                <a className={styles.link} href={url}>
+                  {languages[key as Lang]}
+                </a>
+              </li>
+            )
           }
-        >
+        })}
-          <a className={styles.link} href={urls.en?.url}>
-            {languages.en}
-          </a>
-        </li>
-        <li
-          className={
-            currentLanguage === languages.sv ? styles.active : undefined
-          }
-        >
-          <a className={styles.link} href={urls.sv?.url}>
-            {languages.sv}
-          </a>
-        </li>
-        <li
-          className={
-            currentLanguage === languages.no ? styles.active : undefined
-          }
-        >
-          <a className={styles.link} href={urls.no?.url}>
-            {languages.no}
-          </a>
-        </li>
-        {/* When we have 6 languages in Contenstack, danish url should come from urls.da?.url */}
-        <li
-          className={
-            currentLanguage === languages.da ? styles.active : undefined
-          }
-        >
-          <a className={styles.link} href="https://www.scandichotels.dk/">
-            {languages.da}
-          </a>
-        </li>
-        <li
-          className={
-            currentLanguage === languages.fi ? styles.active : undefined
-          }
-        >
-          <a className={styles.link} href={urls.fi?.url}>
-            {languages.fi}
-          </a>
-        </li>
-        <li
-          className={
-            currentLanguage === languages.de ? styles.active : undefined
-          }
-        >
-          <a className={styles.link} href={urls.de?.url}>
-            {languages.de}
-          </a>
-        </li>
       </ul>
     </div>
   )

components/Current/Header/LanguageSwitcher/Mobile/index.tsx

@@ -1,7 +1,7 @@
 "use client"
 import { useState } from "react"
 
-import { languages } from "@/constants/languages"
+import { Lang, languages } from "@/constants/languages"
 
 import styles from "./mobile.module.css"
 
@@ -14,42 +14,33 @@ export default function Mobile({
   const [isOpen, setIsOpen] = useState(false)
 
   function toggleOpen() {
-    setIsOpen(prevIsOpen => !prevIsOpen)
+    setIsOpen((prevIsOpen) => !prevIsOpen)
   }
 
   return (
-    <div className="navbar-language-selector">
+    <div>
       <button
         aria-pressed="false"
-        className="navbar-language-selector__toggler "
+        className={styles.toggle}
-        data-js="collapsible-toggler"
-        data-target="language-menu"
         onClick={toggleOpen}
       >
-        {currentLanguage}{" "}
+        {languages[currentLanguage]}{" "}
         <span className={`${styles.arrow} ${isOpen ? styles.open : ""}`}></span>
-        <span className="hidden--accessible">Choose language</span>
+        <span className={styles.hiddenAccessible}>Choose language</span>
       </button>
-      <ul className={`${styles.dropdown} ${isOpen ? styles.isOpen : ""}`} data-collapsable="language-menu">
+      <ul className={`${styles.dropdown} ${isOpen ? styles.isOpen : ""}`}>
-        <li className={`navbar-language-selector__item ${currentLanguage === languages.en ? "is-active" : ""}`}>
+        {Object.keys(urls).map((key) => {
-          <a href={urls.en?.url}>{languages.en}</a>
+          const url = urls[key as Lang]?.url
-        </li>
+          if (url) {
-        <li className={`navbar-language-selector__item ${currentLanguage === languages.sv ? "is-active" : ""}`}>
+            return (
-          <a href={urls.sv?.url}>{languages.sv}</a>
+              <li key={key} className={styles.li}>
-        </li>
+                <a href={url} className={styles.link}>
-        <li className={`navbar-language-selector__item ${currentLanguage === languages.no ? "is-active" : ""}`}>
+                  {languages[key as Lang]}
-          <a href={urls.no?.url}>{languages.no}</a>
+                </a>
-        </li>
+              </li>
-        {/* When we have 6 languages in Contenstack, danish url should come from urls.da?.url */}
+            )
-        <li className={`navbar-language-selector__item ${currentLanguage === languages.da ? "is-active" : ""}`}>
+          }
-          <a href="https://www.scandichotels.dk/">{languages.da}</a>
+        })}
-        </li>
-        <li className={`navbar-language-selector__item ${currentLanguage === languages.fi ? "is-active" : ""}`}>
-          <a href={urls.fi?.url}>{languages.fi}</a>
-        </li>
-        <li className={`navbar-language-selector__item ${currentLanguage === languages.de ? "is-active" : ""}`}>
-          <a href={urls.de?.url}>{languages.de}</a>
-        </li>
       </ul>
     </div>
   )

components/Current/Header/LanguageSwitcher/Mobile/mobile.module.css

@@ -1,3 +1,35 @@
+.toggle {
+  font-size: 14px;
+  padding: 5px 0;
+  display: block;
+  border: none;
+  background-color: transparent;
+  margin: 0 auto;
+  color: #333;
+}
+
+.hiddenAccessible {
+  display: block;
+  position: absolute;
+  left: -100000em;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.li {
+  list-style: none;
+  font-size: 14px;
+  font-family: Helvetica, Arial, sans-serif;
+}
+
+.link {
+  color: #333;
+  text-decoration: none;
+  line-height: 22.4px;
+}
+
 .dropdown {
   display: none;
 }

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
+        <nav className={styles.navBar}>
-          aria-pressed="false"
+          <button
-          className={`${styles.expanderBtn} ${isOpen ? styles.expanded : ""}`}
+            aria-pressed="false"
-          data-js="main-nav-toggler"
+            className={`${styles.expanderBtn} ${isOpen ? styles.expanded : ""}`}
-          data-target="#main-menu"
+            onClick={toogleIsOpen}
-          onClick={toogleIsOpen}
+            type="button"
-          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"
           >
-            {links.map((link, i) => (
+            <span className={styles.iconBars}></span>
-              <li className={styles.li} key={link.href + i}>
+            <span className={styles.hiddenAccessible}>Menu</span>
-                <a className={styles.link} href={link.href}>
+          </button>
-                  {link.title}
+
-                </a>
+          <a className={styles.logoLink} href={homeHref}>
-              </li>
+            <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>

components/Current/Header/MainMenu/mainMenu.module.css

@@ -12,22 +12,29 @@
 
 .container {
   box-sizing: content-box;
-  display: grid;
-  /** Third column is Book button */
-  grid-template-columns: repeat(3, 1fr);
   height: 100%;
   margin: 0 auto;
   max-width: 1200px;
   padding: 0;
 }
 
+.mainLinks {
+  background-color: #f3f2f1;
+}
+
+.navBar {
+  display: grid;
+  grid-template-columns: 1fr 80px 1fr;
+  padding-bottom: 1.5px;
+}
+
 .expanderBtn {
   background-color: transparent;
   border: none;
   cursor: pointer;
   justify-self: flex-start;
   left: 0;
-  padding: 0.75rem 0.5rem 1rem;
+  padding: 12px 8px 16px;
   transition: 0.3s;
   user-select: none;
 }
@@ -36,12 +43,12 @@
 .iconBars::after,
 .iconBars::before {
   background: #757575;
-  border-radius: 0.1428571429rem;
+  border-radius: 2.3px;
   display: inline-block;
-  height: 0.2857142857rem;
+  height: 4.6px;
   position: relative;
   transition: 0.3s;
-  width: 2rem;
+  width: 32px;
 }
 
 .iconBars::after,
@@ -49,15 +56,15 @@
   content: "";
   left: 0;
   position: absolute;
-  transform-origin: 0.1428571429rem center;
+  transform-origin: 2.286px center;
 }
 
 .iconBars::after {
-  top: -0.5rem;
+  top: -8px;
 }
 
 .iconBars::before {
-  top: 0.5rem;
+  top: 8px;
 }
 
 .expanded .iconBars {
@@ -68,7 +75,7 @@
 .expanded .iconBars::before {
   top: 0;
   transform-origin: 50% 50%;
-  width: 2rem;
+  width: 32px;
 }
 
 .expanded .iconBars::after {
@@ -90,21 +97,28 @@
 }
 
 .logoLink {
-  align-items: center;
+  display: inline;
-  display: flex;
+  height: 100%;
-  justify-self: center;
+  width: 80px;
+  padding: 16px 0 8px;
 }
 
-.list {
+.logo {
+  width: 80px;
+  object-fit: fill;
+}
+.listWrapper {
   background-color: #fff;
   border-top: 1px solid #e3e0db;
   display: none;
   list-style: none;
   overflow-y: visible;
   padding-bottom: 20px;
+  margin: 0;
+  padding-inline-start: 0;
 }
 
-.list.isOpen {
+.listWrapper.isOpen {
   display: block;
   left: 0;
   position: absolute;
@@ -122,13 +136,14 @@
 
 .link {
   color: #000;
+  text-decoration: none;
   display: block;
   font-family:
     Helvetica Neue,
     Helvetica,
     Arial,
     sans-serif;
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 700;
   padding-bottom: 20px;
   padding-top: 20px;
@@ -148,59 +163,73 @@
   display: block;
   position: relative;
   text-align: center;
+  line-height: 22.4px;
+  padding: 5px 0;
 }
 
 .mobileLink {
   color: #000;
   display: block;
   font-family: Helvetica;
-  font-size: 0.875rem;
+  font-size: 14px;
-  padding: 5px 0;
+  text-decoration: none;
 }
 
-@media screen and (max-width: 1366px) {
+.buttonContainer {
-  .logoLink {
+  display: flex;
-    width: 5rem;
+  justify-content: flex-end;
-  }
-
-  .li {
-    background-color: #f3f2f1;
-  }
 }
 
 @media screen and (min-width: 1367px) {
   .mainMenu {
+    box-shadow: none;
     background-color: hsla(0, 0%, 100%, 0.95);
     position: relative;
     z-index: unset;
   }
 
   .container {
-    gap: 30px;
-    grid-template-columns: minmax(100px, auto) 1fr;
     padding: 0px 30px;
   }
 
+  .mainLinks {
+    padding-top: 2.5px;
+    background-color: transparent;
+  }
+
+  .navBar {
+    grid-template-columns: 132.18px 1fr auto;
+    align-content: center;
+  }
+
   .expanderBtn {
     display: none;
   }
 
-  .logo {
+  .logoLink {
-    max-width: none;
+    display: flex;
-    min-width: 98px;
+    height: 100%;
+    padding: 30px 10px 30px 15px;
     width: auto;
+    align-items: center;
   }
 
-  .list {
+  .logo {
+    width: 102.18px;
+    object-fit: cover;
+    height: auto;
+  }
+
+  .listWrapper {
     border-top: none;
-    display: block;
+    display: flex;
+    align-items: center;
     padding-bottom: 0;
-    padding-top: 0;
     position: static;
     width: 100%;
   }
 
-  .list.isOpen {
+  .listWrapper.isOpen {
     position: static;
   }
 
@@ -208,6 +237,7 @@
     display: table-cell;
     float: none;
     vertical-align: middle;
+    line-height: 1.15;
   }
 
   .link {
@@ -227,3 +257,20 @@
     display: none;
   }
 }
+
+@media (min-width: 1200px) {
+  .navBar {
+    grid-template-columns: 140px auto 1fr;
+  }
+
+  .logoLink {
+    display: inline-block;
+    width: 100%;
+    padding: 27px 30px 26px 0;
+    text-align: center;
+  }
+
+  .listWrapper {
+    padding-top: 0;
+  }
+}

components/Current/Header/TopMenu/index.tsx

@@ -6,6 +6,7 @@ export default function TopMenu({
   frontpageLinkText,
   homeHref,
   links,
+  languageSwitcher,
 }: TopMenuProps) {
   return (
     <div className={styles.topMenu}>
@@ -15,11 +16,7 @@ export default function TopMenu({
         </a>
 
         <ul className={styles.list}>
-          {/* {languageSwitcher ? (
+          <li className={styles.langSwitcher}>{languageSwitcher}</li>
-            <li className="nav-secondary__item hidden-xxsmall hidden-xsmall hidden-small">
-              {languageSwitcher}
-            </li>
-          ) : null} */}
 
           {links.map(({ link }, i) => (
             <li key={link.href + i}>

components/Current/Header/TopMenu/topMenu.module.css

@@ -2,7 +2,8 @@
   background-color: #8d3a7c;
   color: #fff;
   display: none;
-  font-size: 0.8125rem;
+  font-size: 14px;
+  padding: 0;
   position: relative;
   z-index: 1;
 }
@@ -30,6 +31,18 @@
   display: inline-block;
   padding: 3px 10px;
   text-decoration: none;
+  font-family:
+    Helvetica Neue,
+    Helvetica,
+    Arial,
+    sans-serif;
+  font-size: 13px;
+}
+.langSwitcher {
+  text-align: center;
+  position: relative;
+  display: block;
+  padding: 3px 15px;
 }
 
 @media screen and (min-width: 768px) {
@@ -43,9 +56,13 @@
     background-color: #3d3835;
     display: block;
   }
+  .list {
+    align-items: center;
+  }
 
   .link {
     padding-top: 4px;
     padding-bottom: 4px;
+    font-weight: 300;
   }
 }

components/Current/Header/index.tsx

@@ -2,7 +2,7 @@ import { homeHrefs } from "@/constants/homeHrefs"
 import { env } from "@/env/server"
 import { serverClient } from "@/lib/trpc/server"
 
-import MainMenu from "./MainMenu"
+import { MainMenu } from "./MainMenu"
 import OfflineBanner from "./OfflineBanner"
 import TopMenu from "./TopMenu"
 
@@ -10,7 +10,10 @@ import styles from "./header.module.css"
 
 import { LangParams } from "@/types/params"
 
-export default async function Header({ lang }: LangParams) {
+export default async function Header({
+  lang,
+  languageSwitcher,
+}: LangParams & { languageSwitcher: React.ReactNode }) {
   const data = await serverClient().contentstack.config.header()
 
   const homeHref = homeHrefs[env.NODE_ENV][lang]
@@ -27,6 +30,7 @@ export default async function Header({ lang }: LangParams) {
         frontpageLinkText={frontpage_link_text}
         homeHref={homeHref}
         links={top_menu.links}
+        languageSwitcher={languageSwitcher}
       />
       <MainMenu
         frontpageLinkText={frontpage_link_text}
@@ -34,6 +38,7 @@ export default async function Header({ lang }: LangParams) {
         links={menu.links}
         logo={logo}
         topMenuMobileLinks={topMenuMobileLinks}
+        languageSwitcher={languageSwitcher}
       />
     </header>
   )