Support linkess nav elements

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fwdekker/template",
-    "version": "3.3.4",
+    "version": "3.3.5",
     "description": "The base template for pages on fwdekker.com.",
     "author": "Florine W. Dekker",
     "license": "MIT",

src/main/css/snippets/nav.css

@@ -29,6 +29,10 @@ nav.fwd-nav li > :first-child {
     margin: 0;
 }
 
+nav.fwd-nav a {
+    cursor: pointer;
+}
+
 nav.fwd-nav ul ul {
     display: none;
 
@@ -113,7 +117,7 @@ nav.fwd-nav #logo::before {
 }
 
 /* Hamburger */
-nav.fwd-nav #nav-hamburger-label {
+nav.fwd-nav #fwd-nav-hamburger-label {
     height: fit-content;
     margin: 0;
     padding: calc(var(--nav-element-spacing-horizontal) + var(--nav-link-spacing-vertical));
@@ -121,18 +125,18 @@ nav.fwd-nav #nav-hamburger-label {
     color: var(--primary-inverse);
 }
 
-nav.fwd-nav #nav-hamburger-label:where(:active, :focus-within, :hover) {
+nav.fwd-nav #fwd-nav-hamburger-label:where(:active, :focus-within, :hover) {
     background-color: var(--primary-focus-dark);
 }
 
 @media (min-width: 576px) {
-    nav.fwd-nav #nav-hamburger-label {
+    nav.fwd-nav #fwd-nav-hamburger-label {
         display: none;
     }
 }
 
 @media (max-width: 576px) {
-    nav.fwd-nav #nav-hamburger-checkbox:not(:checked) ~ ul li:not(:first-child) {
+    nav.fwd-nav #fwd-nav-hamburger-checkbox:not(:checked) ~ ul li:not(:first-child) {
         display: none;
     }
 }

src/main/js/Template.ts

@@ -81,8 +81,12 @@ export function getMetaProperty(name: string): string | null | undefined {
  * @returns a base navigation element that will eventually be filled with contents
  */
 function nav(highlightPath?: string, cb?: (json: any) => void): HTMLElement {
-    const base = stringToHtml(`<ul><li><a id="logo" href="https://fwdekker.com/">FWDekker</a></span></li></ul>`);
+    const nav = stringToHtml(`<nav class="fwd-nav"></nav>`);
 
+    const checkbox = stringToHtml(`<input id="fwd-nav-hamburger-checkbox" type="checkbox" hidden />`);
+    nav.appendChild(checkbox);
+
+    const base = stringToHtml(`<ul><li><a id="logo" href="https://fwdekker.com/">FWDekker</a></span></li></ul>`);
     fetch("https://fwdekker.com/api/nav/")
         .then(it => it.json())
         .then(json => {
@@ -94,11 +98,11 @@ function nav(highlightPath?: string, cb?: (json: any) => void): HTMLElement {
             );
         })
         .catch(error => console.error("Failed to fetch navigation elements", error));
-
-    const nav = stringToHtml(`<nav class="fwd-nav"></nav>`);
-    nav.appendChild(stringToHtml(`<input id="nav-hamburger-checkbox" type="checkbox" hidden />`));
     nav.appendChild(base);
-    nav.appendChild(stringToHtml(`<label id="nav-hamburger-label" for="nav-hamburger-checkbox">&#9776;</label>`));
+
+    const label = stringToHtml(`<label id="fwd-nav-hamburger-label" for="fwd-nav-hamburger-checkbox">&#9776;</label>`);
+    nav.appendChild(label);
+
     return nav;
 }
 
@@ -106,34 +110,40 @@ function nav(highlightPath?: string, cb?: (json: any) => void): HTMLElement {
  * Unpacks a navigation entry returned from the navigation API into an HTML element.
  *
  * @param entry the entry to unpack
- * @param path the current path traversed, found by joining the names of the entries with `/`s; always starts and ends
+ * @param parentPath the current path traversed, found by joining the names of the entries with `/`s; always starts and
- * with a `/`
+ * ends with a `/`
  * @param highlightPath the path to highlight together with its parents, or `undefined` if no path should be highlighted
  * @returns the navigation list entry as HTML, described by its children
  */
-function unpackEntry(entry: any, path: string = "/", highlightPath?: string): string {
+function unpackEntry(entry: any, parentPath: string = "/", highlightPath?: string): string {
-    const classList = [];
+    const path = `${parentPath + entry.name}/`;
-    if (highlightPath?.startsWith(`${path + entry.name}/`) ?? false) classList.push("current-page");
-    if (entry.border) classList.push("border-above");
-    const classString = classList.length !== 0 ? `class="${classList.join(" ")}"` : "";
 
-    const externalLinkString = !(/^https:\/\/.*fwdekker.com/i.test(entry.link)) && entry.link !== "#"
+    const classList = [];
-        ? `target="_blank"`
+    if (highlightPath?.startsWith(path) ?? false) classList.push("current-page");
-        : "";
+    if (entry.border) classList.push("border-above");
+    const classString = classList.length === 0 ? "" : `class="${classList.join(" ")}"`;
+
+    let hrefString;
+    if (entry.link == null) {
+        hrefString = "";
+    } else {
+        hrefString = `href="${entry.link}"`;
+        if (entry.link !== "#" && !/^https:\/\/.*fwdekker.com/i.test(entry.link))
+            hrefString += ` target="_blank"`;
+    }
 
     if (entry.entries.length === 0)
-        return "" +
+        return `<li ${classString}><a ${hrefString}>${entry.name}</a></li>`;
-            `<li ${classString}>` +
-            `<a href="${entry.link}" ${externalLinkString}>${entry.name}</a>` +
-            `</li>`;
 
-    const depth = path.split("/").length - 2;  // -1 because count parts, then another -1 because of leading `/`
+    const depth = parentPath.split("/").length - 2;  // -1 because count parts, then another -1 because of leading `/`
     const arrow = depth === 0 ? "&#9662;" : "&#9656;";
 
     return "" +
         `<li ${classString}>` +
-        `<a href="${entry.link}" ${externalLinkString}>${entry.name} ${arrow}</a>` +
+        /**/`<a ${hrefString}>${entry.name} ${arrow}</a>` +
-        `<ul>${entry.entries.map((it: any) => unpackEntry(it, `${path + entry.name}/`, highlightPath)).join("")}</ul>` +
+        /**/`<ul>` +
+        /**//**/entry.entries.map((it: any) => unpackEntry(it, path, highlightPath)).join("") +
+        /**/`</ul>` +
         `</li>`;
 }