From 4d0f1dc5b4fff3baaf208c847196a1431f0acf07 Mon Sep 17 00:00:00 2001
From: "Florine W. Dekker" <florine@fwdekker.com>
Date: Wed, 23 Nov 2022 11:09:37 +0100
Subject: [PATCH] Add border above some nav elements

Borders were added in api-nav v0.1.0.

Also simplify some CSS selectors, since they contained a lot of redundancy which made them harder to read.
---
 package.json                  |  2 +-
 src/main/css/snippets/nav.css | 16 ++++++++++------
 src/main/js/Template.ts       | 18 ++++++++++++------
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 50ce3c0..af25f38 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@fwdekker/template",
-    "version": "3.3.2",
+    "version": "3.3.3",
     "description": "The base template for pages on fwdekker.com.",
     "author": "Florine W. Dekker",
     "license": "MIT",
diff --git a/src/main/css/snippets/nav.css b/src/main/css/snippets/nav.css
index a68402a..5c1359f 100644
--- a/src/main/css/snippets/nav.css
+++ b/src/main/css/snippets/nav.css
@@ -28,7 +28,7 @@ nav.fwd-nav li > :first-child {
     margin: 0;
 }
 
-nav.fwd-nav ul li ul {
+nav.fwd-nav ul ul {
     display: none;
 
     position: absolute;
@@ -38,13 +38,13 @@ nav.fwd-nav ul li ul {
     margin: 0;
 }
 
-nav.fwd-nav ul li:where(:active, :focus-within, :hover) > ul {
+nav.fwd-nav li:where(:active, :focus-within, :hover) > ul {
     display: flex;
     flex-direction: column;
     align-items: start;
 }
 
-nav.fwd-nav ul li ul li ul {
+nav.fwd-nav ul ul ul {
     left: 100%;
     top: 0;
 }
@@ -58,17 +58,21 @@ nav.fwd-nav > ul > li > ul {
     z-index: 10;
 }
 
-/* Colors */
+/* Colors and optional styling */
 nav.fwd-nav,
 nav.fwd-nav ul {
     background-color: var(--primary);
 }
 
-nav.fwd-nav ul li:where(:active, :focus-within, :hover) {
+nav.fwd-nav li.border-above {
+    border-top: 1px solid #ccc;
+}
+
+nav.fwd-nav li:where(:active, :focus-within, :hover) {
     background-color: var(--primary-focus-dark);
 }
 
-nav.fwd-nav ul li.current-page:not(:where(:active, :focus-within, :hover)) {
+nav.fwd-nav li.current-page:not(:where(:active, :focus-within, :hover)) {
     background-color: var(--primary-focus-opaque);
 }
 
diff --git a/src/main/js/Template.ts b/src/main/js/Template.ts
index c468f3d..20dd830 100644
--- a/src/main/js/Template.ts
+++ b/src/main/js/Template.ts
@@ -112,21 +112,27 @@ function nav(highlightPath?: string, cb?: (json: any) => void): HTMLElement {
  * @returns the navigation list entry as HTML, described by its children
  */
 function unpackEntry(entry: any, path: string = "/", highlightPath?: string): string {
-    const shouldHighlight = highlightPath?.startsWith(`${path + entry.name}/`) ?? false;
-    const isExternalLink = !(/^https:\/\/.*fwdekker.com/i.test(entry.link)) && entry.link !== "#";
+    const classList = [];
+    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 !== "#"
+        ? `target="_blank"`
+        : "";
 
     if (entry.entries.length === 0)
         return "" +
-            `<li ${shouldHighlight ? "class=\"current-page\"" : ""}>` +
-            `<a href="${entry.link}" ${isExternalLink ? "target=\"_blank\"" : ""}>${entry.name}</a>` +
+            `<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 arrow = depth === 0 ? "&#9662;" : "&#9656;";
 
     return "" +
-        `<li class="${shouldHighlight ? "current-page" : ""}">` +
-        `<a href="${entry.link}">${entry.name} ${arrow}</a>` +
+        `<li ${classString}>` +
+        `<a href="${entry.link}" ${externalLinkString}>${entry.name} ${arrow}</a>` +
         `<ul>${entry.entries.map((it: any) => unpackEntry(it, `${path + entry.name}/`, highlightPath)).join("")}</ul>` +
         `</li>`;
 }