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

app/[lang]/(live)/layout.tsx

@@ -1,8 +1,8 @@
+import AdobeScript from "@/components/Current/AdobeScript"
 import Script from "next/script"
 
 import type { Metadata } from "next"
 import type { LangParams, LayoutArgs } from "@/types/params"
-import AdobeScript from "../AdobeScript"
 
 export const metadata: Metadata = {
   description: "New web",

app/[lang]/(live-current)/current-content-page/page.tsx

@@ -4,7 +4,8 @@ import { request } from "@/lib/request"
 import { GetCurrentBlockPage } from "@/lib/graphql/Query/CurrentBlockPage.graphql"
 
 import ContentPage from "@/components/Current/ContentPage"
-import Tracking from "../../Tracking"
+import Header from "@/components/Current/Header"
+import Tracking from "@/components/Current/Tracking"
 
 import type { PageArgs, LangParams, UriParams } from "@/types/params"
 import type { GetCurrentBlockPageData } from "@/types/requests/currentBlockPage"
@@ -43,11 +44,8 @@ export default async function CurrentContentPage({
 
     return (
       <>
-        <ContentPage
-          data={response.data}
-          uri={searchParams.uri}
-          lang={params.lang}
-        />
+        <Header lang={params.lang} />
+        <ContentPage data={response.data} />
         <Tracking pageData={trackingData} />
       </>
     )

app/[lang]/(preview)/layout.tsx

@@ -1,6 +1,7 @@
+import InitLivePreview from "@/components/Current/LivePreview"
+
 import type { Metadata } from "next"
 import type { LangParams, LayoutArgs } from "@/types/params"
-import InitLivePreview from "@/components/Current/LivePreview"
 
 export const metadata: Metadata = {
   description: "New web",

components/Current/Aside/Puffs/Puff/index.tsx

@@ -1,12 +1,12 @@
 import { renderOptions } from "./renderOptions"
 
+import Image from "@/components/Image"
 import JsonToHtml from "@/components/JsonToHtml"
 import Link from "next/link"
 
 import styles from "./puff.module.css"
 
 import type { PuffProps } from "@/types/components/current/asides/puff"
-import Image from "@/components/Image"
 
 export default function Puff({
   imageConnection,
@@ -22,7 +22,7 @@ export default function Puff({
       return null
     }
     return (
-      <Link className={styles.link} href={page.node.url}>
+      <Link className={styles.link} href={`/${page.node.system.locale}${page.node.url}`}>
         <PuffContent
           imageConnection={imageConnection}
           text={text}

components/Current/ContentPage/index.tsx

@@ -1,6 +1,5 @@
 import Aside from "@/components/Current/Aside"
 import Blocks from "@/components/Current/Blocks"
-import Header from "@/components/Current/Header"
 import Hero from "@/components/Current/Hero"
 import Preamble from "@/components/Current/Preamble"
 import Section from "@/components/Current/Section"
@@ -10,7 +9,7 @@ import styles from "./contentPage.module.css"
 
 import type { ContentPageProps } from "@/types/components/current/contentPage"
 
-export default function ContentPage({ data, lang, uri }: ContentPageProps) {
+export default function ContentPage({ data }: ContentPageProps) {
   const page = data.all_current_blocks_page.items[0]
   const images = page.hero?.imagesConnection
   const breadcrumbs = page.breadcrumbs.parentsConnection
@@ -18,7 +17,6 @@ export default function ContentPage({ data, lang, uri }: ContentPageProps) {
 
   return (
     <>
-      <Header lang={lang} pathname={uri} />
       {images?.totalCount ? <Hero images={images.edges} /> : null}
       <main className={styles.wrapper} id="maincontent" role="main">
         <input

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
   }
 }

components/Current/Preamble/Breadcrumbs/index.tsx

@@ -14,7 +14,7 @@ export default function Breadcrumbs({
       <ul className={styles.list}>
         {parent ? (
           <li className={styles.parent}>
-            <Link href={parent.node.url}>
+            <Link href={`/${parent.node.system.locale}${parent.node.url}`}>
               {parent.node.breadcrumbs?.title ?? parent.node.title}
             </Link>
           </li>
@@ -25,7 +25,7 @@ export default function Breadcrumbs({
             itemProp="breadcrumb"
             key={breadcrumb.node.title}
           >
-            <Link className={styles.link} href={breadcrumb.node.url}>
+            <Link className={styles.link} href={`/${breadcrumb.node.system.locale}${breadcrumb.node.url}`}>
               {breadcrumb.node.breadcrumbs?.title ?? breadcrumb.node.title}
             </Link>
           </li>

components/Current/SubnavMobile.tsx

@@ -13,14 +13,14 @@ export default async function SubnavMobile({
         <ul className="breadcrumb-list hidden-small hidden-medium hidden-large">
           {parent ? (
             <li className="breadcrumb-list__parent hidden-medium hidden-large">
-              <Link href={parent.node.url}>
+              <Link href={`/${parent.node.system.locale}${parent.node.url}`}>
                 {parent.node.breadcrumbs?.title ?? parent.node.title}
               </Link>
             </li>
           ) : null}
           {breadcrumbs.edges.map((breadcrumb) => (
             <li className="breadcrumb-list__body" key={breadcrumb.node.url}>
-              <Link href={breadcrumb.node.url}>
+              <Link href={`/${breadcrumb.node.system.locale}${breadcrumb.node.url}`}>
                 {breadcrumb.node.breadcrumbs?.title ?? breadcrumb.node.title}
               </Link>
             </li>

components/JsonToHtml/renderOptions.tsx

@@ -263,8 +263,9 @@ export const renderOptions: RenderOptions = {
         }
       } else {
         const props = extractPossibleAttributes(node.attrs)
+        const href = node.attrs?.locale ? `/${node.attrs.locale}${node.attrs.href}` : node.attrs.href
         return (
-          <Link {...props} href={node.attrs.href} key={node.uid}>
+          <Link {...props} href={href} key={node.uid}>
             {next(node.children, embeds, fullRenderOptions)}
           </Link>
         )

lib/graphql/Fragments/Breadcrumbs.graphql

@@ -1,3 +1,5 @@
+#import "./PageLinks.graphql"
+
 fragment Breadcrumbs on CurrentBlocksPage {
   breadcrumbs {
     title
@@ -8,8 +10,7 @@ fragment Breadcrumbs on CurrentBlocksPage {
             breadcrumbs {
               title
             }
-            title
-            url
+            ...CurrentBlocksPageLink
           }
         }
       }

lib/graphql/Fragments/Footer/Logo.graphql

@@ -1,9 +1,10 @@
+#import "../Image.graphql"
+
 fragment Logo on Footer {
   logoConnection {
     edges {
       node {
-        title
-        url
+        ...Image
       }
     }
   }

lib/graphql/Fragments/PageLinks.graphql

@@ -1,7 +1,7 @@
 fragment CurrentBlocksPageLink on CurrentBlocksPage {
   system {
-    uid
     locale
+    uid
   }
   title
   url

lib/graphql/Query/Header.graphql

@@ -0,0 +1,32 @@
+#import "../Fragments/Image.graphql"
+
+query GetHeader($locale: String!) {
+  all_header(limit: 1, locale: $locale) {
+    items {
+      frontpage_link_text
+      logoConnection {
+        edges {
+          node {
+            ...Image
+          }
+        }
+      }
+      menu {
+        links {
+          href
+          title
+        }
+      }
+      top_menu {
+        links {
+          link {
+            href
+            title
+          }
+          show_on_mobile
+          sort_order_mobile
+        }
+      }
+    }
+  }
+}

next.config.js

@@ -25,8 +25,14 @@ const nextConfig = {
       loader: "graphql-tag/loader",
     })
 
-    return config
+    return config;
   },
-}
+
+  logging: {
+    fetches: {
+      fullUrl: true,
+    },
+  },
+};
 
 export default nextConfig

public/Static/img/scandic-logotype-white.svg

@@ -2,7 +2,7 @@
 <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="27 7.7 85 18.3" style="enable-background:new 27 7.7 85 18.3;" xml:space="preserve">
+	 viewBox="27 7.7 85 19" style="enable-background:new 27 7.7 85 19;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:#FFFFFF;}
 </style>

public/Static/img/scandic-logotype.svg

@@ -2,7 +2,7 @@
 <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 85 18.3" enable-background="new 0 0 85 18.3" xml:space="preserve">
+	 viewBox="0 0 85 19" enable-background="new 0 0 85 19" xml:space="preserve">
 <path fill-rule="evenodd" clip-rule="evenodd" fill="#CD0921" d="M24.8,17.9c-1.2,0.3-2.4,0.4-3.6,0.4c-4.3,0-7.1-2-7.1-6.7
 	c0-4.5,2.9-6.4,7-6.4c1.2,0,2.4,0.1,3.6,0.3v2.2c-0.9-0.1-1.6-0.2-2.4-0.2c-3.3,0-4.9,1-4.9,4.3c0,3.1,1.5,4.2,4.9,4.2
 	c0.9,0,1.6-0.1,2.4-0.2V17.9z"/>

types/components/current/contentPage.ts

@@ -1,8 +1,5 @@
-import type { Lang } from "@/types/lang"
 import type { GetCurrentBlockPageData } from "@/types/requests/currentBlockPage"
 
 export type ContentPageProps = {
   data: GetCurrentBlockPageData
-  uri: string
-  lang: Lang
 }

types/components/current/header/mainMenu.ts

@@ -0,0 +1,10 @@
+import type { HeaderLink, TopMenuHeaderLink } from "@/types/requests/header"
+import type { Image } from "@/types/image"
+
+export type MainMenuProps = {
+  frontpageLinkText: string
+  homeHref: string
+  links: HeaderLink[]
+  logo: Image
+  topMenuMobileLinks: TopMenuHeaderLink[]
+}

types/components/current/header/topMenu.ts

@@ -0,0 +1,7 @@
+import type { TopMenuHeaderLink } from "@/types/requests/header"
+
+export type TopMenuProps = {
+  frontpageLinkText: string
+  homeHref: string
+  links: TopMenuHeaderLink[]
+}

types/requests/currentBlockPage.ts

@@ -29,6 +29,10 @@ interface SharedBreadcrumb {
   breadcrumbs: {
     title?: string
   } | null
+  system: {
+    locale: string
+    uid: string
+  }
   title: string
   url: string
 }

types/requests/header.ts

@@ -0,0 +1,37 @@
+import type { Edges } from "./utils/edges"
+import type { Image } from "../image"
+
+export type HeaderLink = {
+  link: {
+    href: string
+    title: string
+  }
+}
+
+export type TopMenuHeaderLink = {
+  link: {
+    href: string
+    title: string
+  }
+  show_on_mobile: boolean
+  sort_order_mobile: number
+}
+
+export type HeaderLinks = {
+  links: HeaderLink[]
+}
+
+export type TopMenuHeaderLinks = {
+  links: TopMenuHeaderLink[]
+}
+
+export type HeaderQueryData = {
+  all_header: {
+    items: {
+      frontpage_link_text: string
+      logoConnection: Edges<Image>
+      menu: HeaderLinks
+      top_menu: TopMenuHeaderLinks
+    }[]
+  }
+}