feat(WEB-93): add Header to CMS and render it in Next

components/Current/Header/MainMenu/index.tsx

@@ -0,0 +1,102 @@
+"use client"
+import { useState } from "react"
+
+import Image from "@/components/Image"
+import Link from "next/link"
+// import Mobile from "../LanguageSwitcher/Mobile"
+
+import styles from "./mainMenu.module.css"
+
+import type { MainMenuProps } from "@/types/components/current/header/mainMenu"
+
+/**
+ * Mobile is commented out as it relates to
+ * LanguageSwitcher and will be handled in another task
+ */
+export default function MainMenu({ frontpageLinkText, homeHref, links, logo, topMenuMobileLinks }: MainMenuProps) {
+  const [isOpen, setIsOpen] = useState(false)
+
+  function toogleIsOpen() {
+    setIsOpen(prevIsOpen => !prevIsOpen)
+  }
+
+  return (
+    <div className={styles.mainMenu}>
+      <div
+        className={styles.container}
+        itemScope
+        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>
+
+        <Link
+          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}
+          />
+        </Link>
+
+        <nav>
+          <ul
+            className={`${styles.list} ${isOpen ? styles.isOpen : ""}`}
+            data-collapsable="main-menu"
+            id="main-menu"
+          >
+            {links.map(({ link }) => (
+              <li
+                className={styles.li}
+                key={link.href}
+              >
+                <Link
+                  className={styles.link}
+                  href={link.href}
+                >
+                  {link.title}
+                </Link>
+              </li>
+            ))}
+
+            <ul className={styles.mobileList}>
+              {topMenuMobileLinks.map(({ link }) => (
+                <li className={styles.mobileLi} key={link.href}>
+                  <Link className={styles.mobileLink} href={link.href}>
+                    {link.title}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+
+            {/* <li className="nav-primary__item hidden-medium hidden-large">
+            {links ? <Mobile currentLanguage={currentLanguage} links={links} /> : null}
+          </li> */}
+          </ul>
+        </nav>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,219 @@
+.mainMenu {
+  background-color: #fff;
+  background-image: none;
+  position: fixed;
+  top: 0;
+  max-height: 100%;
+  width: 100%;
+  z-index: 99999;
+  overflow: visible;
+}
+
+.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;
+}
+
+.expanderBtn {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  justify-self: flex-start;
+  left: 0;
+  padding: 0.75rem 0.5rem 1rem;
+  transition: .3s;
+  user-select: none;
+}
+
+.iconBars,
+.iconBars::after,
+.iconBars::before {
+  background: #757575;
+  border-radius: 0.1428571429rem;
+  display: inline-block;
+  height: 0.2857142857rem;
+  position: relative;
+  transition: .3s;
+  width: 2rem;
+}
+
+.iconBars::after,
+.iconBars::before {
+  content: "";
+  left: 0;
+  position: absolute;
+  transform-origin: 0.1428571429rem center;
+}
+
+.iconBars::after {
+  top: -0.5rem;
+}
+
+.iconBars::before {
+  top: 0.5rem;
+}
+
+.expanded .iconBars {
+  background: transparent;
+}
+
+.expanded .iconBars::after,
+.expanded .iconBars::before {
+  top: 0;
+  transform-origin: 50% 50%;
+  width: 2rem;
+}
+
+.expanded .iconBars::after {
+  transform: rotate(-45deg);
+}
+
+.expanded .iconBars::before {
+  transform: rotate(45deg);
+}
+
+.hiddenAccessible {
+  display: block;
+  height: 1px;
+  left: -100000em;
+  overflow: hidden;
+  position: absolute;
+  top: auto;
+  width: 1px;
+}
+
+.logoLink {
+  align-items: center;
+  display: flex;
+  justify-self: center;
+}
+
+.list {
+  background-color: #fff;
+  border-top: 1px solid #e3e0db;
+  display: none;
+  list-style: none;
+  overflow-y: visible;
+  padding-bottom: 20px;
+}
+
+.list.isOpen {
+  display: block;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 100%;
+}
+
+.li {
+  border-bottom: none;
+  display: block;
+  line-height: 17px;
+  position: relative;
+  text-align: center;
+}
+
+.link {
+  color: #000;
+  display: block;
+  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: .875rem;
+  font-weight: 700;
+  padding-bottom: 20px;
+  padding-top: 20px;
+  text-transform: uppercase;
+}
+
+.link:hover {
+  color: #7f7369;
+  text-decoration: none;
+}
+
+.mobileList {
+  padding-top: 6px;
+}
+
+.mobileLi {
+  display: block;
+  position: relative;
+  text-align: center;
+}
+
+.mobileLink {
+  color: #000;
+  display: block;
+  font-family: Helvetica;
+  font-size: .875rem;
+  padding: 5px 0;
+}
+
+@media screen and (max-width: 950px) {
+  .logoLink {
+    width: 5rem;
+  }
+
+  .li {
+    background-color: #f3f2f1;
+  }
+}
+
+@media screen and (min-width: 950px) {
+  .mainMenu {
+    background-color: hsla(0, 0%, 100%, .95);
+    position: relative;
+  }
+
+  .container {
+    gap: 30px;
+    grid-template-columns: minmax(100px, auto) 1fr;
+    padding: 0px 30px;
+  }
+
+  .expanderBtn {
+    display: none;
+  }
+
+  .logo {
+    max-width: none;
+    min-width: 98px;
+    width: auto;
+  }
+
+  .list {
+    border-top: none;
+    display: block;
+    padding-bottom: 0;
+    padding-top: 0;
+    position: static;
+    width: 100%;
+  }
+
+  .list.isOpen {
+    position: static;
+  }
+
+  .li {
+    display: table-cell;
+    float: none;
+    vertical-align: middle;
+  }
+
+  .link {
+    background-image: none;
+    font-family: Helvetica, Arial, sans-serif;
+    font-weight: 700;
+    line-height: 1.15;
+    padding: 30px 15px;
+  }
+
+  .mobileList {
+    display: none;
+    padding-top: 0px;
+  }
+}

components/Current/Header/OfflineBanner/banner.module.css

@@ -0,0 +1,23 @@
+.banner {
+  align-items: center;
+  background: #606060;
+  color: #fff;
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
+  position: relative;
+  z-index: 10;
+}
+
+.hidden {
+  display: none;
+}
+
+.reloadBtn {
+  color: #fff;
+  background-color: #00838e;
+  border: 0;
+  border-radius: 18px;
+  outline: 0 none;
+  padding: 5px 15px;
+}

components/Current/Header/OfflineBanner/index.tsx

@@ -0,0 +1,10 @@
+import styles from "./banner.module.css"
+
+export default function OfflineBanner() {
+  return (
+    <div className={`${styles.banner} ${styles.hidden}`}>
+      You are offline, some content may be out of date.
+      <button className={styles.reloadBtn} type="button">Reload</button>
+    </div>
+  )
+}

components/Current/Header/TopMenu/index.tsx

@@ -0,0 +1,41 @@
+// import Desktop from "../LanguageSwitcher/Desktop"
+import Link from "next/link"
+
+import styles from "./topMenu.module.css"
+
+import type { TopMenuProps } from "@/types/components/current/header/topMenu"
+
+/**
+ * Desktop is commented out as it relates to
+ * LanguageSwitcher and will be handled in another task
+ */
+export default function TopMenu({ frontpageLinkText, homeHref, links }: TopMenuProps) {
+  return (
+    <div className={styles.topMenu}>
+      <div className={styles.container}>
+        <Link
+          className={styles.homeLink}
+          href={homeHref}
+        >
+          {frontpageLinkText}
+        </Link>
+
+        <ul className={styles.list}>
+          {/* <li className="nav-secondary__item hidden-xxsmall hidden-xsmall hidden-small">
+          {links ? <Desktop currentLanguage={currentLanguage} links={links} /> : null}
+        </li> */}
+          {links.map(({ link }) => (
+            <li key={link.href}>
+              <Link
+                className={styles.link}
+                href={link.href}
+              >
+                {link.title}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,51 @@
+.topMenu {
+  background-color: #8d3a7c;
+  color: #fff;
+  display: none;
+  font-size: .8125rem;
+  position: relative;
+  z-index: 1;
+}
+
+.container {
+  box-sizing: content-box;
+  display: flex;
+  justify-content: flex-end;
+  margin: 0 auto;
+  max-width: 1200px;
+  padding: 0 10px;
+}
+
+.homeLink {
+  display: none;
+}
+
+.list {
+  display: flex;
+  list-style: none;
+}
+
+.link {
+  color: #fff;
+  display: inline-block;
+  padding: 3px 10px;
+  text-decoration: none;
+}
+
+@media screen and (min-width: 740px) {
+  .container {
+    padding: 0 30px;
+  }
+}
+
+@media screen and (min-width: 950px) {
+  .topMenu {
+    background-color: #3d3835;
+    display: block;
+  }
+
+  .link {
+    padding-top: 4px;
+    padding-bottom: 4px;
+  }
+}

components/Current/Header/header.module.css

@@ -0,0 +1,3 @@
+.header {
+  display: grid;
+}

components/Current/Header/index.tsx

@@ -1,30 +1,47 @@
-import { langEnum } from "@/types/lang"
+import { request } from "@/lib/request"
+import { GetHeader } from "@/lib/graphql/Query/Header.graphql"
 
-import Da from "./Da"
-import De from "./De"
-import En from "./En"
-import Fi from "./Fi"
-import No from "./No"
-import Sv from "./Sv"
+import MainMenu from "./MainMenu"
+import OfflineBanner from "./OfflineBanner"
+import TopMenu from "./TopMenu"
+
+import styles from "./header.module.css"
 
-import type { HeaderProps } from "@/types/components/current/header"
 import { LangParams } from "@/types/params"
+import type { HeaderQueryData } from "@/types/requests/header"
 
-export default function Header({ lang, pathname }: LangParams & HeaderProps) {
-  switch (lang) {
-    case langEnum.sv:
-      return <Sv pathname={pathname} />
-    case langEnum.fi:
-      return <Fi pathname={pathname} />
-    case langEnum.en:
-      return <En pathname={pathname} />
-    case langEnum.da:
-      return <Da pathname={pathname} />
-    case langEnum.de:
-      return <De pathname={pathname} />
-    case langEnum.no:
-      return <No pathname={pathname} />
-    default:
+export default async function Header({ lang }: LangParams) {
+  try {
+    const { data } = await request<HeaderQueryData>(GetHeader, { locale: lang })
+    if (!data.all_header.items.length) {
       return null
+    }
+
+    const homeHref = `https://www.scandichotels.com/${lang}`
+    const { frontpage_link_text, logoConnection, menu, top_menu } = data.all_header.items[0]
+    const logo = logoConnection.edges?.[0]?.node
+    const topMenuMobileLinks = top_menu.links.filter(link => link.show_on_mobile)
+      .sort((a, b) => a.sort_order_mobile < b.sort_order_mobile ? 1 : -1)
+
+    return (
+      <header className={styles.header} role="banner">
+        <OfflineBanner />
+        <TopMenu
+          frontpageLinkText={frontpage_link_text}
+          homeHref={homeHref}
+          links={top_menu.links}
+        />
+        <MainMenu
+          frontpageLinkText={frontpage_link_text}
+          homeHref={homeHref}
+          links={menu.links}
+          logo={logo}
+          topMenuMobileLinks={topMenuMobileLinks}
+        />
+      </header>
+    )
+  } catch (error) {
+    console.error(error)
+    return null
   }
 }