hamburger nav: apply canonical pattern from sister-site fleet

394c199cbe90012f32a581720394eb1ba6209bdf · 2026-05-10 21:40:47 -0700 · Steve Abrams
Files touched

M public/index.html
Diff

commit 394c199cbe90012f32a581720394eb1ba6209bdf
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Sun May 10 21:40:47 2026 -0700

    hamburger nav: apply canonical pattern from sister-site fleet
---
 public/index.html | 100 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 100 insertions(+)

diff --git a/public/index.html b/public/index.html
index 0bde6f7..f60f739 100644
--- a/public/index.html
+++ b/public/index.html
@@ -463,5 +463,105 @@ density.addEventListener('input', function(){
 });
 </script>
 
+<!-- DW-HAMBURGER-NAV v1 (canonical 2026-05-10) -->
+<style id="dw-hamburger-styles">
+  /* Canonical hamburger nav — always visible top-right, all viewports.
+     Standing rule (Steve, 2026-05-08): hamburger is the primary nav. */
+  .dw-burger-btn {
+    position: fixed; top: 18px; right: 18px; z-index: 9999;
+    width: 44px; height: 44px;
+    background: rgba(20,20,20,0.78); color: #f5f1e8;
+    backdrop-filter: blur(8px) saturate(140%);
+    -webkit-backdrop-filter: blur(8px) saturate(140%);
+    border: 1px solid rgba(245,241,232,0.18); border-radius: 50%;
+    cursor: pointer; padding: 0;
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    gap: 4px;
+    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
+    transition: background 200ms, transform 200ms;
+  }
+  .dw-burger-btn:hover { background: rgba(20,20,20,0.92); }
+  .dw-burger-btn span {
+    display: block; width: 20px; height: 1.5px; background: currentColor;
+    transition: transform 220ms, opacity 220ms;
+  }
+  .dw-burger-btn[aria-expanded="true"] span:nth-child(1) {
+    transform: translateY(5.5px) rotate(45deg);
+  }
+  .dw-burger-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
+  .dw-burger-btn[aria-expanded="true"] span:nth-child(3) {
+    transform: translateY(-5.5px) rotate(-45deg);
+  }
+  .dw-burger-panel {
+    position: fixed; top: 72px; right: 18px; z-index: 9998;
+    min-width: 240px; max-width: 88vw;
+    background: rgba(15,15,15,0.96);
+    backdrop-filter: blur(14px) saturate(140%);
+    -webkit-backdrop-filter: blur(14px) saturate(140%);
+    border: 1px solid rgba(245,241,232,0.12);
+    border-radius: 14px;
+    box-shadow: 0 18px 50px rgba(0,0,0,0.55);
+    padding: 10px 0;
+    display: none;
+    font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
+  }
+  .dw-burger-panel.open { display: block; }
+  .dw-burger-panel a,
+  .dw-burger-panel button {
+    display: block; width: 100%;
+    padding: 13px 22px;
+    color: #f5f1e8 !important;
+    background: transparent; border: 0; cursor: pointer;
+    text-decoration: none !important;
+    font-size: 15px; font-weight: 400;
+    text-align: left;
+    letter-spacing: 0;
+    border-bottom: 1px solid rgba(245,241,232,0.06);
+    transition: background 160ms, color 160ms;
+    box-sizing: border-box;
+  }
+  .dw-burger-panel a:last-child,
+  .dw-burger-panel button:last-child { border-bottom: 0; }
+  .dw-burger-panel a:hover,
+  .dw-burger-panel button:hover {
+    background: rgba(245,241,232,0.06);
+    color: #ffffff !important;
+  }
+  @media (max-width: 480px) {
+    .dw-burger-btn { top: 12px; right: 12px; width: 40px; height: 40px; }
+    .dw-burger-panel { top: 62px; right: 12px; }
+  }
+  /* Avoid double-print on sites already adopting a top-of-page header
+     that overlaps z-index. Reserve safe space near top-right. */
+</style>
+<button type="button" class="dw-burger-btn" id="dwBurgerBtn"
+        aria-label="Toggle menu" aria-controls="dwBurgerPanel"
+        aria-expanded="false">
+  <span></span><span></span><span></span>
+</button>
+<nav class="dw-burger-panel" id="dwBurgerPanel" aria-label="Primary">
+  <a href="/">Home</a>
+  <a href="/about">About</a>
+  <a href="mailto:info@wallpaperestimator.com">Contact</a>
+</nav>
+<script>
+(function(){
+  var btn = document.getElementById('dwBurgerBtn');
+  var panel = document.getElementById('dwBurgerPanel');
+  if (!btn || !panel) return;
+  function close(){ panel.classList.remove('open'); btn.setAttribute('aria-expanded','false'); }
+  function toggle(){
+    var open = panel.classList.toggle('open');
+    btn.setAttribute('aria-expanded', open ? 'true' : 'false');
+  }
+  btn.addEventListener('click', function(e){ e.stopPropagation(); toggle(); });
+  document.addEventListener('click', function(e){
+    if (panel.classList.contains('open') && !panel.contains(e.target) && e.target !== btn) close();
+  });
+  document.addEventListener('keydown', function(e){ if (e.key === 'Escape') close(); });
+})();
+</script>
+<!-- /DW-HAMBURGER-NAV v1 -->
+
 </body>
 </html>
← 9df3984 initial scaffold + GA gtag · back to Wallpaperestimator · fleet-grid refine: chip_uniform_aspect (wallpaperestimator) b0bb79d →