From b19f3566aeb12b95e96cf56ed2e309ce8522bfbc Mon Sep 17 00:00:00 2001
From: Simon Leary <simon.leary42@proton.me>
Date: Mon, 12 Jan 2026 13:02:14 -0500
Subject: [PATCH 1/2] rework navbar, header

---
 resources/templates/header.php | 26 +++++++------
 webroot/css/global.css         |  6 ---
 webroot/css/navbar.css         | 70 +++++++++++++++++-----------------
 webroot/js/global-late.js      | 16 +-------
 4 files changed, 51 insertions(+), 67 deletions(-)
diff --git a/resources/templates/header.php b/resources/templates/header.php
index c91c0ff06..43ebaef74 100644
--- a/resources/templates/header.php
+++ b/resources/templates/header.php
@@ -68,17 +68,21 @@
 
 <body>
 
-   <header>
-     <img id="imgLogo" draggable=false
-     src="<?php echo getURL("assets", CONFIG["site"]["logo"]); ?>" alt="Unity Logo">
-     <button class="hamburger vertical-align">
-       <img
-         draggable="false"
-         src="<?php echo getURL("assets/menu.png") ?>"
-         alt="Menu Button"
-       >
-     </button>
-   </header>
+   <div class="header">
+    <img
+      id="imgLogo"
+      draggable=false
+      src="<?php echo getURL("assets", CONFIG["site"]["logo"]); ?>"
+      alt="Unity Logo"
+    >
+    <button class="hamburger">
+      <img
+        draggable="false"
+        src="<?php echo getURL("assets/menu.png") ?>"
+        alt="Menu Button"
+      >
+    </button>
+  </div>
 
   <nav class="mainNav">
     <?php
diff --git a/webroot/css/global.css b/webroot/css/global.css
index 5dc3c736d..c3829079d 100644
--- a/webroot/css/global.css
+++ b/webroot/css/global.css
@@ -97,12 +97,6 @@ p {
   margin: 0;
 }
 
-.vertical-align {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
 button.plusBtn span {
   font-size: 24pt;
   font-family: monospace;
diff --git a/webroot/css/navbar.css b/webroot/css/navbar.css
index 60bbc683d..6c4b7d2a9 100644
--- a/webroot/css/navbar.css
+++ b/webroot/css/navbar.css
@@ -1,5 +1,9 @@
 /* Navbar */
 
+:root {
+  --header-height: 50px;
+}
+
 hr.navHR {
   margin-left: 10px;
   margin-right: 10px;
@@ -7,13 +11,9 @@ hr.navHR {
 
 nav.mainNav {
   background: var(--accent);
-  position: fixed;
-  left: 0;
-  top: 45px;
   font-size: 11pt;
-  overflow: hidden;
   white-space: nowrap;
-  z-index: 100;
+  z-index: 9;
 }
 
 nav.mainNav a {
@@ -37,23 +37,19 @@ nav.mainNav a.active {
   background: var(--accent_2);
 }
 
-header {
+.header {
   background: var(--accent);
-  height: 50px;
-  width: 250px;
-  position: fixed;
-  top: 0;
-  left: 0;
+  height: var(--header-height);
   z-index: 10;
 }
 
-header > #imgLogo {
+.header > #imgLogo {
   height: 65%;
   margin-left: 10px;
   margin-top: 8px;
 }
 
-header > a.unity-state {
+.header > a.unity-state {
   background: var(--accent_foreground);
   color: var(--accent);
   display: block;
@@ -66,56 +62,60 @@ header > a.unity-state {
   border-radius: 5px;
 }
 
-header > a.unity-state:hover {
+.header > a.unity-state:hover {
   text-decoration: none;
 }
 
-header > button.hamburger {
+.header > button.hamburger {
   background: var(--accent);
   padding: 0;
-  right: 23px;
-  height: 60%;
+  float: right;
 }
 
-header > button.hamburger > img {
-  position: relative;
-  height: 100%;
+.header > button.hamburger > img {
+  height: calc(var(--header-height) * 0.6);
+  margin-top: calc(var(--header-height) * 0.2);
+  margin-right: calc(var(--header-height) * 0.2);
 }
 
 /* MOBILE VIEW */
 
 @media only screen and (max-width: 1000px) {
-  nav.mainNav {
-    right: 0;
-  }
-
-  header {
+  .header {
     width: 100%;
   }
-
-  main {
-    /* Header element height + 2*element padding */
-    margin-top: 45px;
-  }
 }
 
 /* DESKTOP VIEW */
 
 @media only screen and (min-width: 1001px) {
+  :root {
+    --navbar-width: 250px;
+  }
+
   nav.mainNav {
-    bottom: 0;
-    width: 250px;
+    position: fixed;
+    width: var(--navbar-width);
+    padding-top: var(--header-height);
+    height: 100%;
   }
 
-  header > button.hamburger {
+  .header > button.hamburger {
     display: none;
   }
 
   main {
-    margin-left: 250px;
+    margin-left: var(--navbar-width);
   }
 
   footer {
-    margin-left: 250px;
+    margin-left: var(--navbar-width);
+  }
+
+  .header {
+    width: var(--navbar-width);
+    position: fixed;
+    top: 0;
+    left: 0;
   }
 }
diff --git a/webroot/js/global-late.js b/webroot/js/global-late.js
index 69a574922..3e9aa6069 100644
--- a/webroot/js/global-late.js
+++ b/webroot/js/global-late.js
@@ -11,21 +11,7 @@
   }
 
   $("button.hamburger").on("click", function () {
-    var mainNav = $("nav.mainNav");
-    if (mainNav.is(":visible")) {
-      mainNav.fadeOut(100);
-    } else {
-      mainNav.fadeIn(100);
-    }
-  });
-
-  $(window).click(function (e) {
-    if (
-      !$(e.target).parent().hasClass("hamburger") &&
-      $("button.hamburger").is(":visible")
-    ) {
-      $("nav.mainNav").fadeOut(100);
-    }
+    $("nav.mainNav").toggle();
   });
 
   // Functions to set nav links as active. Sub links can activate parents by naming files with same prefix, for example: documentation.php and documentation_view.php activate the same link

From 6769ac738a38656fe8eb85c04656e486f4aeedd9 Mon Sep 17 00:00:00 2001
From: Simon Leary <simon.leary42@proton.me>
Date: Mon, 12 Jan 2026 13:09:31 -0500
Subject: [PATCH 2/2] revert header

---
 resources/templates/header.php |  4 ++--
 webroot/css/navbar.css         | 18 +++++++++---------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/resources/templates/header.php b/resources/templates/header.php
index 43ebaef74..79110a45f 100644
--- a/resources/templates/header.php
+++ b/resources/templates/header.php
@@ -68,7 +68,7 @@
 
 <body>
 
-   <div class="header">
+   <header>
     <img
       id="imgLogo"
       draggable=false
@@ -82,7 +82,7 @@
         alt="Menu Button"
       >
     </button>
-  </div>
+  </header>
 
   <nav class="mainNav">
     <?php
diff --git a/webroot/css/navbar.css b/webroot/css/navbar.css
index 6c4b7d2a9..19e5366d1 100644
--- a/webroot/css/navbar.css
+++ b/webroot/css/navbar.css
@@ -37,19 +37,19 @@ nav.mainNav a.active {
   background: var(--accent_2);
 }
 
-.header {
+header {
   background: var(--accent);
   height: var(--header-height);
   z-index: 10;
 }
 
-.header > #imgLogo {
+header > #imgLogo {
   height: 65%;
   margin-left: 10px;
   margin-top: 8px;
 }
 
-.header > a.unity-state {
+header > a.unity-state {
   background: var(--accent_foreground);
   color: var(--accent);
   display: block;
@@ -62,17 +62,17 @@ nav.mainNav a.active {
   border-radius: 5px;
 }
 
-.header > a.unity-state:hover {
+header > a.unity-state:hover {
   text-decoration: none;
 }
 
-.header > button.hamburger {
+header > button.hamburger {
   background: var(--accent);
   padding: 0;
   float: right;
 }
 
-.header > button.hamburger > img {
+header > button.hamburger > img {
   height: calc(var(--header-height) * 0.6);
   margin-top: calc(var(--header-height) * 0.2);
   margin-right: calc(var(--header-height) * 0.2);
@@ -81,7 +81,7 @@ nav.mainNav a.active {
 /* MOBILE VIEW */
 
 @media only screen and (max-width: 1000px) {
-  .header {
+  header {
     width: 100%;
   }
 }
@@ -100,7 +100,7 @@ nav.mainNav a.active {
     height: 100%;
   }
 
-  .header > button.hamburger {
+  header > button.hamburger {
     display: none;
   }
 
@@ -112,7 +112,7 @@ nav.mainNav a.active {
     margin-left: var(--navbar-width);
   }
 
-  .header {
+  header {
     width: var(--navbar-width);
     position: fixed;
     top: 0;
