v0.3.5 add shared mobile hamburger navigation

brand.css

@@ -238,3 +238,101 @@ html[data-theme="light"] .otb-dot{
     max-width:100%;
   }
 }
+
+
+
+/* ===== OTB hamburger nav ===== */
+.otb-menu-toggle{
+  display:none;
+  margin-left:auto;
+  width:46px;
+  height:42px;
+  border:1px solid var(--otb-border);
+  background:rgba(255,255,255,0.04);
+  border-radius:12px;
+  padding:0;
+  align-items:center;
+  justify-content:center;
+  flex-direction:column;
+  gap:5px;
+  cursor:pointer;
+}
+
+.otb-menu-toggle span{
+  display:block;
+  width:20px;
+  height:2px;
+  background:var(--otb-text);
+  border-radius:2px;
+  transition:transform 0.2s ease, opacity 0.2s ease;
+}
+
+.site-nav-right{
+  display:flex;
+  align-items:center;
+  gap:16px;
+}
+
+@media (max-width: 900px){
+  .otb-menu-toggle{
+    display:flex;
+  }
+
+  .site-nav{
+    display:flex;
+    align-items:center;
+    justify-content:space-between;
+    gap:14px;
+    flex-wrap:wrap;
+  }
+
+  .site-brand{
+    min-width:0;
+    flex:1 1 auto;
+  }
+
+  .site-nav-right{
+    display:none;
+    width:100%;
+    flex-direction:column;
+    align-items:flex-start;
+    gap:14px;
+    padding-top:10px;
+  }
+
+  .site-nav-right.otb-nav-open{
+    display:flex;
+  }
+
+  .site-navlinks{
+    width:100%;
+    display:flex;
+    flex-direction:column;
+    align-items:flex-start;
+    gap:10px;
+  }
+
+  .site-navlinks > a,
+  .dropdown{
+    width:100%;
+  }
+
+  .dropdown-toggle{
+    display:inline-flex;
+    width:100%;
+    justify-content:flex-start;
+  }
+
+  .dropdown-menu{
+    position:static !important;
+    display:none;
+    min-width:0;
+    width:100%;
+    margin-top:8px;
+  }
+
+  .dropdown:hover .dropdown-menu,
+  .dropdown:focus-within .dropdown-menu{
+    display:block;
+  }
+}

brand.js

@@ -1,31 +1,54 @@
 (function () {
+  const root = document.documentElement;
+  const KEY = "otb-theme";
+
   function applyTheme(theme) {
-    document.documentElement.setAttribute("data-theme", theme);
+    const resolved = theme === "light" ? "light" : "dark";
+    root.setAttribute("data-theme", resolved);
+    document.body.classList.toggle("otb-dark", resolved === "dark");
+    document.body.classList.toggle("otb-light", resolved === "light");
+
+    const toggle = document.getElementById("otbThemeToggle") || document.getElementById("themeToggle");
+    if (toggle) toggle.checked = resolved === "light";
+  }
 
-    if (theme === "dark") {
-      document.body.classList.add("otb-dark");
-    } else {
-      document.body.classList.remove("otb-dark");
+  function savedTheme() {
+    try {
+      return localStorage.getItem(KEY) || "dark";
+    } catch (e) {
+      return "dark";
     }
+  }
 
-    const toggle = document.getElementById("otbThemeToggle");
-    if (toggle) toggle.checked = theme === "light";
+  function saveTheme(theme) {
+    try {
+      localStorage.setItem(KEY, theme);
+    } catch (e) {}
   }
 
-  function savedTheme() {
-    return localStorage.getItem("otb_theme") || "dark";
+  function setupMenu() {
+    const btn = document.getElementById("otbMenuToggle");
+    const nav = document.getElementById("otbNavWrap");
+    if (!btn || !nav) return;
+
+    btn.addEventListener("click", function () {
+      const open = nav.classList.toggle("otb-nav-open");
+      btn.setAttribute("aria-expanded", open ? "true" : "false");
+    });
   }
 
-  window.addEventListener("DOMContentLoaded", function () {
+  document.addEventListener("DOMContentLoaded", function () {
     applyTheme(savedTheme());
 
-    const toggle = document.getElementById("otbThemeToggle");
-    if (!toggle) return;
+    const toggle = document.getElementById("otbThemeToggle") || document.getElementById("themeToggle");
+    if (toggle) {
+      toggle.addEventListener("change", function () {
+        const next = toggle.checked ? "light" : "dark";
+        saveTheme(next);
+        applyTheme(next);
+      });
+    }
 
-    toggle.addEventListener("change", function () {
-      const theme = toggle.checked ? "light" : "dark";
-      localStorage.setItem("otb_theme", theme);
-      applyTheme(theme);
-    });
+    setupMenu();
   });
 })();

fragments/header.html

@@ -9,7 +9,13 @@
         </div>
       </a>
 
-      <div class="site-nav-right">
+      <button class="otb-menu-toggle" id="otbMenuToggle" aria-label="Toggle menu" aria-expanded="false" aria-controls="otbNavWrap">
+        <span></span>
+        <span></span>
+        <span></span>
+      </button>
+
+      <div class="site-nav-right" id="otbNavWrap">
         <nav class="site-navlinks">
           <a href="https://outsidethebox.top">Home</a>
           <a href="https://outsidethebox.top/pricing.html">Pricing</a>