better nav bar structure that handles home link separately

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();

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%;