Add navigation to header using new useNav hook

Corofides · Nov 8, 2023 · 22d9364 · 22d9364
1 parent 7a6838c
commit 22d9364
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/src/SiteHeader/SiteHeader.js b/src/SiteHeader/SiteHeader.js
@@ -2,10 +2,12 @@ import React from 'react';
 import useSettings from '../Hooks/useSettings';
 import './SiteHeader.scss';
 import { css } from 'glamor';
+import useNav from "../Hooks/useNav";
 
 export default () => {
 
   const {settings} = useSettings();
+  const {getNavForPosition, loading} = useNav();
 
   const headerRule = css({
     "background-color": settings['brand-primary-bg'],
@@ -39,7 +41,13 @@ export default () => {
             {settings.site_name}
           </a>
         </h1>
-        <nav />
+        <nav>
+            {getNavForPosition("main").map((item) => {
+              return (
+                <a href={process.env.REACT_APP_SITE_URL + "#" + item.location}>{item.label}</a>
+              )
+            })}
+        </nav>
       </div>
     </header>
   )

diff --git a/src/SiteHeader/SiteHeader.scss b/src/SiteHeader/SiteHeader.scss
@@ -6,7 +6,7 @@ nav {
 
     padding: 8px;
     text-decoration: none;
-    color: $glimmering-silver;
+    color: #ffffff;
 
     &:last-of-type {
       padding-right: 0;