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

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