From 8d451f8a41484cbd2b4cccdbe05f15af96a436bd Mon Sep 17 00:00:00 2001
From: Lee Cattarin <lee.cattarin@gmail.com>
Date: Mon, 29 Dec 2025 09:24:47 -0800
Subject: [PATCH] better nav bar structure that handles home link separately

---
 scripts/nav.js | 16 +++++++++++-----
 styles/nav.css | 13 ++++++++++++-
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/scripts/nav.js b/scripts/nav.js
index 1a74ddd..4b7d173 100644
--- a/scripts/nav.js
+++ b/scripts/nav.js
@@ -1,9 +1,5 @@
 /* Top nav */
 const navItems = [
-  {
-    href: "/",
-    title: "↩ back home"
-  },
   {
     href: "/about/",
     title: "ⓘ about"
@@ -18,6 +14,14 @@ const populateNav = function() {
   let nav = document.getElementById("top-nav");
   let path = window.location.pathname;
 
+  let home = document.createElement("a");
+  home.href = "/";
+  home.innerHTML = "↩ home";
+  if (path === "/") home.id = "current-page";
+  nav.append(home);
+
+  let div = document.createElement("div");
+
   for (const item of navItems) {
     let a = document.createElement("a");
     a.href = item.href;
@@ -25,8 +29,10 @@ const populateNav = function() {
 
     if (item.href === path) a.id = "current-page";
 
-    nav.append(a);
+    div.append(a);
   }
+
+  nav.append(div);
 }
 
 populateNav();
diff --git a/styles/nav.css b/styles/nav.css
index da97e4b..bacbfb0 100644
--- a/styles/nav.css
+++ b/styles/nav.css
@@ -19,10 +19,21 @@ nav a {
   }
 }
 
-#current-page {
+nav div {
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* this specifically handles the home button
+we want it taking up flex container space */
+nav > #current-page {
   visibility: hidden;
 }
 
+nav > div > #current-page {
+  display: none;
+}
+
 header img {
   max-height: 25vh;
   max-width: 100%;