bottom navigation functionality

assets/global.css

@@ -38,16 +38,25 @@ main img {
 
 #bottomnav {
     display: flex;
-    /* width: 100dvw; */
-    list-style: none;
+    justify-content: space-between;
     padding: 32px;
     margin: 0;
-
-    gap: 16px;
-
     outline: 1px solid black;
 }
 
+#bottomnav span {
+    align-self: center;
+}
+
+#bottomnav ul {
+    display: flex;
+    flex-direction: row;
+    list-style: none;
+    
+    padding: 0;
+    gap: 16px;
+}
+
 #bottomnav li {
     padding: 0px;
 }
@@ -64,7 +73,6 @@ main img {
 }
 
 #bottomnav a:hover {
-    cursor: not-allowed;
     text-decoration: underline;
     
     background: black;

assets/global.js

@@ -3,7 +3,11 @@ const parser = new DOMParser();
 fetch("/_bottomnav.html")
 .then(response => response.text())
 .then(text => {
-    const bottomNav = parser.parseFromString(text, "text/html");
+    const bottomNavHTML = parser.parseFromString(text, "text/html");
+    const bottomNav = bottomNavHTML.getElementById("bottomnav");
 
-    document.body.appendChild(bottomNav.getElementById("bottomnav"));
+    const pathSpan = bottomNav.querySelector("span");
+    pathSpan.innerText = pathSpan.innerText.replace("%PATH%", document.location.pathname);
+    
+    document.body.appendChild(bottomNav);
 });