website: redesign part 8

website_next/header/index.js

@@ -1,24 +1,32 @@
 import { createCube } from "../cube/index.js";
+import { primaryRoutes } from "../routes.js";
 
-const header = document.createElement("header");
+export function createHeader() {
+  const header = document.createElement("header");
 
-const home = document.createElement("a");
-const cube = document.createElement("span");
+  const home = document.createElement("a");
+  const cube = document.createElement("span");
 
-home.href = "/";
-home.ariaLabel = "bitview home";
-cube.append(createCube());
-home.append(cube, "bitview");
+  home.href = "/";
+  home.ariaLabel = "bitview home";
+  cube.append(createCube());
+  home.append(cube, "bitview");
 
-const nav = document.createElement("nav");
-nav.setAttribute("aria-label", "Primary");
-nav.innerHTML = `
-    <ul>
-      <li><a href="/explore" aria-current="page">Explore</a></li>
-      <li><a href="/learn">Learn</a></li>
-      <li><a href="/build">Build</a></li>
-    </ul>
-`;
+  const nav = document.createElement("nav");
+  const list = document.createElement("ul");
+  nav.setAttribute("aria-label", "Primary");
 
-header.append(home, nav);
-document.body.append(header);
+  for (const { pathname, label } of primaryRoutes) {
+    const item = document.createElement("li");
+    const anchor = document.createElement("a");
+
+    anchor.href = pathname;
+    anchor.append(label);
+    item.append(anchor);
+    list.append(item);
+  }
+
+  nav.append(list);
+  header.append(home, nav);
+  return header;
+}