Adds component markup for logo and dropdown menus using Strapi data for desktop

.eslintrc.js

@@ -70,7 +70,7 @@ module.exports = {
         "@typescript-eslint/no-unsafe-call": "off",
         "@typescript-eslint/no-unsafe-member-access": "off",
         "@typescript-eslint/no-unsafe-return": "off",
-        "@typescript-eslint/no-unused-vars": "error",
+        "@typescript-eslint/no-unused-vars": ["error", { "ignoreRestSiblings": true }],
         "@typescript-eslint/no-unused-expressions": "error",
         "@typescript-eslint/require-await": "off",
         "@typescript-eslint/restrict-template-expressions": "off",

app/components/ui/Navigation.module.scss

@@ -201,3 +201,16 @@
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
   }
 }
+
+.menuContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.dropdown {
+  display: none;
+}
+
+.showDropdown {
+  display: block
+}

app/components/ui/Navigation.tsx

@@ -1,20 +1,71 @@
-import React from "react";
+import React, { useState } from "react";
 import { Link } from "react-router-dom";
-import Translate from "./Translate";
+import Translate from "components/ui/Translate";
+import { useNavigationData } from "../../hooks/StrapiAPI";
+import {
+  StrapiModel,
+  extractLogoFromNavigationResponse,
+  extractNavigationMenusFromNavigationResponse,
+} from "../../models/Strapi";
 import styles from "./Navigation.module.scss";
 
 export const Navigation = ({
   toggleHamburgerMenu,
 }: {
   toggleHamburgerMenu: () => void;
 }) => {
+  const { data: navigationResponse, error, isLoading } = useNavigationData();
+  const [dropdown, setDropdown] = useState(false);
+  const logoData = extractLogoFromNavigationResponse(navigationResponse);
+  const menus =
+    extractNavigationMenusFromNavigationResponse(navigationResponse);
+
+  // TODO
+  if (error) {
+    return <span>ERROR</span>;
+  }
+
+  // TODO
+  if (isLoading) {
+    return <span>is loading...</span>;
+  }
+
   return (
     <nav className={styles.siteNav}>
       <div className={styles.primaryRow}>
         <div className={styles.navLeft}>
-          <SiteLogo />
+          <Link className={`${styles.navLogo}`} to="/">
+            <img src={logoData?.url} alt={logoData?.alternativeText} />
+          </Link>
         </div>
-        <SiteLinks />
+
+        <ul className={styles.navRight}>
+          {menus?.map((menu) => (
+            <div className={styles.menuContainer} key={menu.id.toString()}>
+              <button
+                type="button"
+                aria-haspopup="menu"
+                aria-expanded={dropdown ? "true" : "false"}
+                onClick={() => setDropdown((prev) => !prev)}
+              >
+                {menu.title}
+              </button>
+
+              <ul
+                className={`${styles.dropdown} ${
+                  dropdown ? styles.showDropdown : ""
+                }`}
+              >
+                {menu.link.map((linkItem: StrapiModel.Link) => (
+                  <li key={linkItem.id} className="menu-item">
+                    <Link to={linkItem.url}>{linkItem.text}</Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+          <Translate />
+        </ul>
         <div className={styles.mobileNavigation}>
           <button
             type="button"
@@ -28,19 +79,4 @@ export const Navigation = ({
   );
 };
 
-const SiteLogo = () => (
-  <Link className={`${styles.navLogo}`} to="/">
-    {/* TODO */}
-    [SITE LOGO HERE]
-  </Link>
-);
-
-const SiteLinks = () => {
-  return (
-    <div className={styles.navRight}>
-      <Translate />
-    </div>
-  );
-};
-
 export default Navigation;

app/hooks/StrapiAPI.ts

@@ -116,10 +116,9 @@ export namespace StrapiApi {
     provider: string;
     createdAt: string;
     updatedAt: string;
-    formats: FormatsResponse
+    formats: FormatsResponse;
     // TODO uknown types
     // provider_metadata: null;
-    // formats: null;
   }
 
   export interface NavigationMenuResponse {

app/models/Strapi.ts

@@ -12,3 +12,18 @@ export namespace StrapiModel {
   export interface NavigationMenu extends StrapiApi.NavigationMenuResponse {
   }
 }
+
+export function extractNavigationMenusFromNavigationResponse(
+  navigationResponse: StrapiModel.Header | null
+): Array<Omit<StrapiModel.NavigationMenu, "__component">> | null {
+  return (
+    navigationResponse &&
+    navigationResponse.navigation.map(({ __component, ...rest }) => rest)
+  );
+}
+
+export function extractLogoFromNavigationResponse(
+  navigationResponse: StrapiModel.Header | null
+): StrapiModel.Logo | null {
+  return navigationResponse && navigationResponse.logo.data.attributes;
+}