feat(SW-186): implement cms data into new header

components/Header/TopMenu/index.tsx

@@ -8,17 +8,19 @@ import styles from "./topMenu.module.css"
 
 import type { TopMenuProps } from "@/types/components/header/topMenu"
 
-export default async function TopMenu({ languageUrls }: TopMenuProps) {
+export default async function TopMenu({ languageUrls, topLink }: TopMenuProps) {
   const intl = await getIntl()
 
   return (
     <div className={styles.topMenu}>
       <div className={styles.content}>
-        <HeaderLink href="#">
-          <GiftIcon width={20} height={20} color="burgundy" />
-          {intl.formatMessage({ id: "Join Scandic Friends" })}
-        </HeaderLink>
-        <div className={styles.right}>
+        {topLink ? (
+          <HeaderLink className={styles.topLink} href={topLink.href}>
+            <GiftIcon width={20} height={20} color="burgundy" />
+            {topLink.title}
+          </HeaderLink>
+        ) : null}
+        <div className={styles.options}>
           <LanguageSwitcher type="desktopHeader" urls={languageUrls} />
           <HeaderLink href="#">
             <SearchIcon width={20} height={20} color="burgundy" />

components/Header/TopMenu/topMenu.module.css

@@ -8,12 +8,12 @@
 .content {
   max-width: var(--max-width-navigation);
   margin: 0 auto;
-  display: flex;
+  display: grid;
   justify-content: space-between;
   gap: var(--Spacing-x3);
 }
 
-.right {
+.options {
   display: flex;
   gap: var(--Spacing-x2);
   align-items: center;
@@ -23,4 +23,15 @@
   .topMenu {
     display: block;
   }
+  .content {
+    grid-template-areas: "topLink options";
+  }
+
+  .topLink {
+    grid-area: topLink;
+  }
+
+  .options {
+    grid-area: options;
+  }
 }