fix: update design of header

2024-05-27 16:43:56 +02:00
parent a83bdb21fe
commit da70b29359
11 changed files with 301 additions and 199 deletions
--- a/app/globals.css
+++ b/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;
+}
--- a/components/Current/ContentPage/contentPage.module.css
+++ b/components/Current/ContentPage/contentPage.module.css
@@ -4,5 +4,4 @@
  display: block;
  padding-bottom: 50px;
  width: 100%;
-  z-index: 10;
 }
--- a/components/Current/Header/LanguageSwitcher/Desktop/desktop.module.css
+++ b/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;
-  background-color: #fff;
-  border: 1px solid rgba(0, 0, 0, .15);
-  border-radius: 4px;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 100;
  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%;
-  z-index: 11;
+  background-color: #fff;
+  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,9 +92,9 @@
  text-decoration: none;
 }

-.active>.link {
+.active > .link {
  background-color: #00838e;
  color: #fff;
  outline: 0;
  text-decoration: none;
-}
+}
--- a/components/Current/Header/LanguageSwitcher/Desktop/index.tsx
+++ b/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"
-        data-js="dropdown-toggler"
+        className={styles.toggle}
        onClick={toggleOpen}
      >
-        <svg
-          focusable="false"
-          className="icon icon--xs icon--white"
-          viewBox="0 0 32 32"
-        >
+        <svg focusable="false" className={styles.icon} viewBox="0 0 32 32">
          <use xlinkHref="/_static/img/icons/sprites.svg#icon-globe"></use>
        </svg>
-        {currentLanguage}
-        <span className="hidden--accessible">Choose language</span>
-        <span className="caret"></span>
+        {languages[currentLanguage]}
+        <span className={styles.hiddenAccessible}>Choose language</span>
+        <span className={styles.caret}></span>
      </button>
      <ul className={`${styles.dropdown} ${isOpen ? styles.isOpen : ""}`}>
-        <li
-          className={
-            currentLanguage === languages.en ? styles.active : undefined
+        {Object.keys(urls).map((key) => {
+          const url = urls[key as Lang]?.url
+          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>
  )
--- a/components/Current/Header/LanguageSwitcher/Mobile/index.tsx
+++ b/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 "
-        data-js="collapsible-toggler"
-        data-target="language-menu"
+        className={styles.toggle}
        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">
-        <li className={`navbar-language-selector__item ${currentLanguage === languages.en ? "is-active" : ""}`}>
-          <a href={urls.en?.url}>{languages.en}</a>
-        </li>
-        <li className={`navbar-language-selector__item ${currentLanguage === languages.sv ? "is-active" : ""}`}>
-          <a href={urls.sv?.url}>{languages.sv}</a>
-        </li>
-        <li className={`navbar-language-selector__item ${currentLanguage === languages.no ? "is-active" : ""}`}>
-          <a 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={`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 className={`${styles.dropdown} ${isOpen ? styles.isOpen : ""}`}>
+        {Object.keys(urls).map((key) => {
+          const url = urls[key as Lang]?.url
+          if (url) {
+            return (
+              <li key={key} className={styles.li}>
+                <a href={url} className={styles.link}>
+                  {languages[key as Lang]}
+                </a>
+              </li>
+            )
+          }
+        })}
      </ul>
    </div>
  )
--- a/components/Current/Header/LanguageSwitcher/Mobile/mobile.module.css
+++ b/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;
 }
--- a/components/Current/Header/MainMenu/index.tsx
+++ b/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>
--- a/components/Current/Header/MainMenu/mainMenu.module.css
+++ b/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: flex;
-  justify-self: center;
+  display: inline;
+  height: 100%;
+  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;
-  padding: 5px 0;
+  font-size: 14px;
+  text-decoration: none;
 }

-@media screen and (max-width: 1366px) {
-  .logoLink {
-    width: 5rem;
-  }
-
-  .li {
-    background-color: #f3f2f1;
-  }
+.buttonContainer {
+  display: flex;
+  justify-content: flex-end;
 }

@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 {
-    max-width: none;
-    min-width: 98px;
+  .logoLink {
+    display: flex;
+    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;
+  }
+}
--- a/components/Current/Header/TopMenu/index.tsx
+++ b/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="nav-secondary__item hidden-xxsmall hidden-xsmall hidden-small">
-              {languageSwitcher}
-            </li>
-          ) : null} */}
+          <li className={styles.langSwitcher}>{languageSwitcher}</li>

          {links.map(({ link }, i) => (
            <li key={link.href + i}>
--- a/components/Current/Header/TopMenu/topMenu.module.css
+++ b/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;
  }
 }
--- a/components/Current/Header/index.tsx
+++ b/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>
  )