dog-park: brand logo upper-left, hamburger nav upper-right with site sections

3aa27262c3187776fa81cc346b761a0e271aeebb · 2026-05-13 11:44:52 -0700 · SteveStudio2
Files touched

M public/dogpark/index.html
Diff

commit 3aa27262c3187776fa81cc346b761a0e271aeebb
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Wed May 13 11:44:52 2026 -0700

    dog-park: brand logo upper-left, hamburger nav upper-right with site sections
---
 public/dogpark/index.html | 66 ++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 59 insertions(+), 7 deletions(-)

diff --git a/public/dogpark/index.html b/public/dogpark/index.html
index 564c208..12185e2 100644
--- a/public/dogpark/index.html
+++ b/public/dogpark/index.html
@@ -8,9 +8,23 @@
   *{box-sizing:border-box;margin:0;padding:0}
   html,body{width:100%;height:100%;overflow:hidden;background:#1a2a1f;font-family:-apple-system,BlinkMacSystemFont,sans-serif;color:#fff}
   canvas{display:block}
-  #ui{position:fixed;top:0;left:0;right:0;padding:10px 14px;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent);z-index:10;display:flex;align-items:center;gap:1em;font-size:13px}
-  #ui a{color:#fff;text-decoration:none;opacity:.85}
-  #ui a:hover{opacity:1;text-decoration:underline}
+  #ui{position:fixed;top:0;left:0;right:0;padding:10px 14px;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent);z-index:10;display:flex;align-items:center;font-size:13px;pointer-events:none}
+  #ui > *{pointer-events:auto}
+  #ui a{color:#fff;text-decoration:none;opacity:.9}
+  #ui a:hover{opacity:1}
+  #brand{display:flex;align-items:center;gap:.5em;font-weight:700;letter-spacing:.02em}
+  #brand .mark{font-size:18px;line-height:1}
+  #brand .name{font-size:14px}
+  #nav-toggle{margin-left:auto;width:38px;height:34px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.18);border-radius:8px;cursor:pointer;padding:0}
+  #nav-toggle span{display:block;width:18px;height:2px;background:#fff;border-radius:2px;transition:transform 180ms,opacity 180ms}
+  #nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
+  #nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
+  #nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
+  #nav-menu{position:fixed;top:54px;right:14px;min-width:200px;background:rgba(14,14,16,.96);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:6px;display:none;flex-direction:column;z-index:11;backdrop-filter:blur(10px);box-shadow:0 16px 48px rgba(0,0,0,.55)}
+  #nav-menu.show{display:flex}
+  #nav-menu a{padding:.55em .8em;border-radius:6px;font-size:13px;color:#f4f1ea;opacity:.85}
+  #nav-menu a:hover{background:rgba(212,160,74,.18);opacity:1;color:#f4f1ea}
+  #nav-menu a.active{background:rgba(212,160,74,.28);color:#f4f1ea;opacity:1;font-weight:600}
   #join{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.7);z-index:100}
   #join .panel{background:#fff;color:#1a1a1a;padding:2em 2.5em;border-radius:14px;width:360px;max-width:90vw}
   #join h1{margin-bottom:.5em;font-size:1.4em;color:#0f4d3a}
@@ -40,11 +54,26 @@
 </head>
 <body>
 <div id="ui">
-  <a href="/">← AnimalsDirectory</a>
-  <span style="opacity:.6">·</span>
-  <strong>🌳 Dog Park</strong>
-  <span style="margin-left:auto;opacity:.7">multiplayer · Three.js</span>
+  <a id="brand" href="/" aria-label="AnimalsDirectory home">
+    <span class="mark">🐾</span><span class="name">AnimalsDirectory</span>
+  </a>
+  <button id="nav-toggle" aria-label="Open menu" aria-controls="nav-menu" aria-expanded="false">
+    <span></span><span></span><span></span>
+  </button>
 </div>
+<nav id="nav-menu" aria-label="Site sections">
+  <a href="/">Home</a>
+  <a href="/breeds">Breeds</a>
+  <a href="/dog-park" class="active">Dog Park</a>
+  <a href="/shows">Shows</a>
+  <a href="/photographers">Photographers</a>
+  <a href="/vets">Vets</a>
+  <a href="/marketplace">Marketplace</a>
+  <a href="/circles">Circles</a>
+  <a href="/my-pets">My Pets</a>
+  <a href="/register-dog">Register Dog</a>
+  <a href="/about">About</a>
+</nav>
 
 <div id="join">
   <div class="panel">
@@ -71,6 +100,29 @@
   </div>
 </div>
 
+<script>
+  // Hamburger nav: toggle on click, close on outside-click / Escape. Sits over
+  // the Three.js canvas so the menu must not steal pointer events when closed
+  // (handled in CSS with pointer-events:none on #ui + auto on its children).
+  (() => {
+    const btn = document.getElementById('nav-toggle');
+    const menu = document.getElementById('nav-menu');
+    if (!btn || !menu) return;
+    const set = (open) => {
+      menu.classList.toggle('show', open);
+      btn.setAttribute('aria-expanded', open ? 'true' : 'false');
+      btn.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
+    };
+    btn.addEventListener('click', (e) => { e.stopPropagation(); set(!menu.classList.contains('show')); });
+    document.addEventListener('click', (e) => {
+      if (!menu.classList.contains('show')) return;
+      if (menu.contains(e.target) || btn.contains(e.target)) return;
+      set(false);
+    });
+    document.addEventListener('keydown', (e) => { if (e.key === 'Escape') set(false); });
+  })();
+</script>
+
 <script>
   // Surface custom avatar if present
   (() => {
← 446da7c yolo: Breed page: nearest businesses that work with this bre · back to Animals · dog-park: arrow-key movement + Auto walk toggle (button/T-ke 4071c18 →