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

2024-02-20 09:07:17 +01:00
parent 58b82cc8b7
commit cbb53df67c
30 changed files with 612 additions and 53 deletions
@@ -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>
+  )
+}