[object Object]

← back to Wallco Ai

consolidate INFO + EDIT + ADMIN into single ☰ hamburger menu (UR corner)

bd718e0a4a18062c7fc7a5b4660f3d93e7fdfca2 · 2026-05-26 07:17:42 -0700 · Steve Abrams

Hides the standalone INFO and ADMIN button labels and replaces them
with a unified dropdown menu opened from the existing ☰ button.
Menu shows Info (always), Edit + Admin (admin only). Closes on
outside-click or Escape. The original sheets (#edit-modal,
#buyer-hamburger, #admin-hamburger) are preserved so their open
logic still fires; only the always-visible button labels are
display:none.

Steve directive 2026-05-26 — corner-stack was getting cluttered.

Files touched

Diff

commit bd718e0a4a18062c7fc7a5b4660f3d93e7fdfca2
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue May 26 07:17:42 2026 -0700

    consolidate INFO + EDIT + ADMIN into single ☰ hamburger menu (UR corner)
    
    Hides the standalone INFO and ADMIN button labels and replaces them
    with a unified dropdown menu opened from the existing ☰ button.
    Menu shows Info (always), Edit + Admin (admin only). Closes on
    outside-click or Escape. The original sheets (#edit-modal,
    #buyer-hamburger, #admin-hamburger) are preserved so their open
    logic still fires; only the always-visible button labels are
    display:none.
    
    Steve directive 2026-05-26 — corner-stack was getting cluttered.
---
 server.js | 83 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 82 insertions(+), 1 deletion(-)

diff --git a/server.js b/server.js
index ab4e094..55922b2 100644
--- a/server.js
+++ b/server.js
@@ -9428,6 +9428,55 @@ ${htmlHeader('/designs')}
       </script>
       ` : ''}
 
+      <!-- UNIFIED HAMBURGER MENU (Steve 2026-05-26) ──────────────────────────
+           Single ☰ button in the UR corner now opens this dropdown. INFO and
+           ADMIN button labels are hidden; their sheets still exist and are
+           opened by the menu items below. -->
+      <div id="hb-menu" hidden role="menu" aria-labelledby="edit-hamburger">
+        <button type="button" class="hb-menu-item" data-hb-action="info" role="menuitem">
+          <span class="hb-menu-icon" aria-hidden="true">ℹ</span> Info
+        </button>
+        ${_isAdmin ? `
+        <button type="button" class="hb-menu-item" data-hb-action="edit" role="menuitem">
+          <span class="hb-menu-icon" aria-hidden="true">✎</span> Edit
+        </button>
+        <button type="button" class="hb-menu-item" data-hb-action="admin" role="menuitem">
+          <span class="hb-menu-icon" aria-hidden="true">⚙</span> Admin tools
+        </button>
+        ` : ''}
+      </div>
+      <script>
+      (function(){
+        const ham  = document.getElementById('edit-hamburger');
+        const menu = document.getElementById('hb-menu');
+        if (!ham || !menu) return;
+        function setOpen(v){
+          menu.hidden = !v;
+          ham.setAttribute('aria-expanded', v ? 'true' : 'false');
+        }
+        ham.addEventListener('click', function(e){
+          e.stopPropagation();
+          setOpen(menu.hidden);
+        });
+        document.addEventListener('click', function(e){
+          if (menu.hidden) return;
+          if (!menu.contains(e.target) && e.target !== ham) setOpen(false);
+        });
+        document.addEventListener('keydown', function(e){
+          if (e.key === 'Escape' && !menu.hidden) setOpen(false);
+        });
+        menu.addEventListener('click', function(e){
+          const item = e.target.closest('[data-hb-action]');
+          if (!item) return;
+          setOpen(false);
+          const a = item.getAttribute('data-hb-action');
+          if (a === 'info')  document.getElementById('buyer-hamburger')?.click();
+          if (a === 'edit')  { if (typeof window.__openEditModal === 'function') window.__openEditModal(); }
+          if (a === 'admin') document.getElementById('admin-hamburger')?.click();
+        });
+      })();
+      </script>
+
       <!-- INFO MODAL ───────────────────────────────────────────────────────── -->
       <div id="edit-modal" class="edit-modal" hidden role="dialog" aria-modal="true" aria-labelledby="edit-modal-title">
         <div class="edit-modal-backdrop" data-close="1"></div>
@@ -9611,6 +9660,35 @@ ${htmlHeader('/designs')}
       <style>
         /* Hamburger button — small, top-right of the design image */
         .edit-hamburger { position:absolute; top:14px; right:14px; width:42px; height:42px; background:rgba(20,18,15,.85); backdrop-filter:blur(8px); color:#f0eadc; border:1px solid rgba(255,255,255,.1); border-radius:8px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:0; z-index:18; transition:background .15s; }
+        /* Steve 2026-05-26: hide INFO + ADMIN labelled buttons; ☰ alone opens
+           a unified menu containing Info / Edit / Admin entries. */
+        .buyer-hamburger, .admin-hamburger { display:none !important; }
+        /* Unified hamburger menu */
+        #hb-menu {
+          position:absolute; top:62px; right:14px;
+          background:rgba(20,18,15,.96); backdrop-filter:blur(10px);
+          border:1px solid rgba(210,177,92,.45); border-radius:10px;
+          padding:6px; min-width:170px; z-index:25;
+          box-shadow:0 10px 28px rgba(0,0,0,.45);
+          display:flex; flex-direction:column; gap:2px;
+        }
+        #hb-menu[hidden] { display:none; }
+        .hb-menu-item {
+          display:flex; align-items:center; gap:10px; width:100%;
+          padding:10px 12px; background:transparent; color:#f0eadc;
+          border:0; border-radius:6px; cursor:pointer; text-align:left;
+          font:600 12px var(--sans,system-ui); letter-spacing:.04em;
+          transition:background .12s ease;
+        }
+        .hb-menu-item:hover, .hb-menu-item:focus-visible { background:rgba(210,177,92,.18); outline:none; }
+        .hb-menu-item .hb-menu-icon {
+          display:inline-flex; align-items:center; justify-content:center;
+          width:20px; height:20px; border-radius:4px;
+          background:rgba(210,177,92,.15); color:#d2b15c; font-size:12px;
+        }
+        @media (max-width:560px){
+          #hb-menu { top:54px; right:8px; min-width:160px; }
+        }
         .edit-hamburger:hover { background:rgba(20,18,15,.95); border-color:#d2b15c; }
         .edit-hamburger span { display:block; width:18px; height:2px; background:currentColor; border-radius:1px; }
         /* ADMIN button — sits horizontally to the LEFT of the hamburger
@@ -13152,7 +13230,10 @@ ${(() => {
           hamburger.setAttribute('aria-expanded','false');
           document.body.style.overflow = '';
         }
-        hamburger.addEventListener('click', openModal);
+        // Steve 2026-05-26: ☰ now opens a unified menu (Info / Edit / Admin)
+        // instead of jumping straight to the Edit modal. Expose openModal as
+        // a global so the new menu's "Edit" entry can still call it.
+        window.__openEditModal = openModal;
         modal.addEventListener('click', function(e){
           if (e.target.getAttribute('data-close') === '1') closeModal();
         });

← 3c5ffe6 seamless gate: drunk-* tolerance 30 → 80 after overnight bat  ·  back to Wallco Ai  ·  snapshot before ComfyUI redirect to Mac1 43ed08a →