let users opera patch everything and add hiding to nav bar

Overlord-Server/public/assets/nav/layout.js

@@ -1,8 +1,52 @@
 import { NAV_MODE_KEY } from "./template.js";
 
 const LS_KEY = "sb_collapsed";
+const NAV_HIDDEN_KEY = "nav_hidden";
 const MOBILE_BP = 768;
 
+/* ──────────────────────────────────────────────
+   NAV HIDE / REVEAL — shared across both modes
+   ────────────────────────────────────────────── */
+
+function createNavHideController() {
+  let hidden = localStorage.getItem(NAV_HIDDEN_KEY) === "true";
+
+  // Create reveal button (injected into body)
+  const revealBtn = document.createElement("button");
+  revealBtn.id = "nav-reveal-btn";
+  revealBtn.setAttribute("aria-label", "Show navigation");
+  const isMac = /Mac|iPhone|iPad/.test(navigator.platform || "");
+  revealBtn.dataset.tooltip = `Show nav  ${isMac ? "⌘" : "Ctrl"}+\\`;
+  revealBtn.innerHTML = '<i class="fa-solid fa-angles-right" style="font-size:0.65rem"></i>';
+  document.body.appendChild(revealBtn);
+
+  function setHidden(val) {
+    hidden = val;
+    localStorage.setItem(NAV_HIDDEN_KEY, String(val));
+    document.body.classList.toggle("nav-hidden", val);
+  }
+
+  function toggle() {
+    setHidden(!hidden);
+  }
+
+  // Apply persisted state
+  if (hidden) document.body.classList.add("nav-hidden");
+
+  // Click the reveal button → show nav
+  revealBtn.addEventListener("click", () => { if (hidden) setHidden(false); });
+
+  // Keyboard shortcut: Ctrl+\ (or Cmd+\ on Mac)
+  document.addEventListener("keydown", (e) => {
+    if ((e.ctrlKey || e.metaKey) && e.key === "\\") {
+      e.preventDefault();
+      toggle();
+    }
+  });
+
+  return { toggle, isHidden: () => hidden, setHidden };
+}
+
 /* ──────────────────────────────────────────────
    TOPBAR DROPDOWN LOGIC
    ────────────────────────────────────────────── */
@@ -241,9 +285,15 @@ function createSidebarController(host, refs) {
 
 export function createAdaptiveNavController(host, refs) {
   const mode = localStorage.getItem(NAV_MODE_KEY);
-  if (mode === "sidebar") {
-    return createSidebarController(host, refs);
-  }
-  return createTopbarController(host, refs);
+  const navCtrl = mode === "sidebar"
+    ? createSidebarController(host, refs)
+    : createTopbarController(host, refs);
+
+  const hideCtrl = createNavHideController();
+
+  return {
+    applyAdaptiveNavLayout: navCtrl.applyAdaptiveNavLayout,
+    navHide: hideCtrl,
+  };
 }
 

Overlord-Server/public/assets/nav/template.js

@@ -161,6 +161,11 @@ function mountTopbar(host) {
             title="Logout" aria-label="Logout">
             <i class="fa-solid fa-right-from-bracket text-rose-300 group-hover:text-rose-200 transition-colors"></i>
           </button>
+          <button id="nav-hide-btn"
+            class="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-slate-900/50 border border-slate-800 text-slate-500 hover:text-slate-200 hover:bg-slate-800 transition-colors"
+            title="Hide navigation (Ctrl+\\)" aria-label="Hide navigation">
+            <i class="fa-solid fa-eye-slash" style="font-size:0.75rem"></i>
+          </button>
         </div>
       </div>
     </div>
@@ -180,6 +185,7 @@ function mountTopbar(host) {
     usernameDisplay: document.getElementById("username-display"),
     roleBadge: document.getElementById("role-badge"),
     enrollmentBadge: document.getElementById("enrollment-badge"),
+    navHideBtn: document.getElementById("nav-hide-btn"),
   };
 
   // Add individual link refs
@@ -293,6 +299,11 @@ function mountSidebar(host) {
         <i class="fa-solid fa-right-from-bracket sb-icon"></i>
         <span class="sb-text">Logout</span>
       </button>
+      <button id="nav-hide-btn" class="sb-link"
+        title="Hide navigation (Ctrl+\\)" aria-label="Hide navigation">
+        <i class="fa-solid fa-eye-slash sb-icon" style="font-size:0.75rem"></i>
+        <span class="sb-text">Hide Nav</span>
+      </button>
     </div>
   `;
 
@@ -329,6 +340,7 @@ function mountSidebar(host) {
     usernameDisplay: document.getElementById("username-display"),
     roleBadge: document.getElementById("role-badge"),
     enrollmentBadge: document.getElementById("enrollment-badge"),
+    navHideBtn: document.getElementById("nav-hide-btn"),
   };
 
   // Convenience refs expected by nav.js