← back to Jutewallpaper
corner-nav: move login to its own hamburger in upper-left (panel slides from left)
dbc3ef92b76d3c469c4d634e6ff3b0d03e01fd4f · 2026-07-03 09:57:42 -0700 · Steve Abrams
Files touched
Diff
commit dbc3ef92b76d3c469c4d634e6ff3b0d03e01fd4f
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Fri Jul 3 09:57:42 2026 -0700
corner-nav: move login to its own hamburger in upper-left (panel slides from left)
---
public/corner-nav.js | 33 +++++++++++++++++++++++++--------
1 file changed, 25 insertions(+), 8 deletions(-)
diff --git a/public/corner-nav.js b/public/corner-nav.js
index 2bda0fc..d390a17 100644
--- a/public/corner-nav.js
+++ b/public/corner-nav.js
@@ -1,10 +1,14 @@
-/* corner-nav.js — universal upper-right 4-icon nav for the DW fleet.
+/* corner-nav.js — universal corner nav for the DW fleet.
*
- * What it does: injects a fixed top-right widget with four icons —
- * 1. Bag → links to designerwallcoverings.com search for this site's keyword
- * 2. Person → opens trade-account panel (info@<domain> + Shopify /account link)
- * 3. Magnifier → toggles a search overlay; filters [data-grid] if present, else /search
- * 4. Menu → toggles a drawer with the site's existing nav + sister-site links
+ * What it does: injects two fixed widgets —
+ * TOP-RIGHT pill (3 icons):
+ * 1. Bag → links to designerwallcoverings.com search for this site's keyword
+ * 2. Magnifier → toggles a search overlay; filters [data-grid] if present, else /search
+ * 3. Menu → toggles a drawer with the site's existing nav + sister-site links
+ * TOP-LEFT hamburger (its own control, per Steve 2026-07-03):
+ * • Account → opens the trade-account / sign-in panel (slides from the LEFT to
+ * match its left-corner trigger). Formerly the "Person" icon that
+ * lived in the top-right pill; relocated to its own upper-left hamburger.
*
* Self-styled. Idempotent. Drop-in: <script src="/corner-nav.js" defer></script>
*
@@ -45,6 +49,7 @@
// ---------- styles (scoped via .cnav prefix) ----------
var css = '\
.cnav-wrap{position:fixed;top:14px;right:18px;z-index:9000;display:flex;align-items:center;gap:18px;padding:10px 16px;background:rgba(10,10,10,0.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.08);border-radius:999px;font-family:-apple-system,"SF Pro Text",system-ui,sans-serif;color:#f5f1e8;font-size:13px;letter-spacing:0.04em;text-transform:uppercase}\
+.cnav-loginwrap{position:fixed;top:14px;left:18px;z-index:9000;display:flex;align-items:center;gap:10px;padding:10px 16px;background:rgba(10,10,10,0.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.08);border-radius:999px;font-family:-apple-system,"SF Pro Text",system-ui,sans-serif;color:#f5f1e8;font-size:13px;letter-spacing:0.04em;text-transform:uppercase}\
.cnav-btn{background:none;border:0;cursor:pointer;color:inherit;padding:4px;display:flex;align-items:center;gap:8px;transition:opacity .2s}\
.cnav-btn:hover{opacity:0.7}\
.cnav-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}\
@@ -53,6 +58,7 @@
.cnav-overlay.show{opacity:1;pointer-events:auto}\
.cnav-panel{position:fixed;top:0;right:0;height:100vh;width:min(420px,92vw);background:#0a0a0a;color:#f5f1e8;z-index:9001;transform:translateX(100%);transition:transform .3s ease;padding:88px 32px 24px;overflow-y:auto;border-left:1px solid rgba(255,255,255,0.08);box-sizing:border-box}\
.cnav-panel.show{transform:translateX(0)}\
+.cnav-panel-left{left:0;right:auto;transform:translateX(-100%);border-left:0;border-right:1px solid rgba(255,255,255,0.08)}\
.cnav-panel h3{font-family:"Playfair Display",Georgia,serif;font-weight:400;font-size:20px;margin:0 0 16px;letter-spacing:0.04em}\
.cnav-panel .cnav-close{position:absolute;top:18px;right:18px;background:none;border:0;color:#f5f1e8;font-size:28px;cursor:pointer;line-height:1;padding:6px}\
.cnav-panel a, .cnav-panel button.cnav-link{display:block;padding:12px 0;color:#f5f1e8;text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.08);font-size:15px;letter-spacing:0.02em;background:none;border-left:0;border-right:0;border-top:0;width:100%;text-align:left;cursor:pointer;font-family:inherit}\
@@ -60,7 +66,7 @@
.cnav-search{padding:14px 16px;width:100%;font-size:18px;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,0.18);color:#f5f1e8;outline:none;box-sizing:border-box;margin-bottom:18px;font-family:inherit}\
.cnav-search::placeholder{color:rgba(245,241,232,0.4)}\
.cnav-sub{font-size:12px;color:rgba(245,241,232,0.55);margin:18px 0 8px;letter-spacing:0.08em;text-transform:uppercase}\
-@media (max-width:520px){.cnav-wrap{top:10px;right:10px;padding:8px 12px;gap:12px}.cnav-btn .cnav-lbl{display:none}.cnav-btn svg{width:20px;height:20px}}\
+@media (max-width:520px){.cnav-wrap{top:10px;right:10px;padding:8px 12px;gap:12px}.cnav-loginwrap{top:10px;left:10px;padding:8px 12px;gap:8px}.cnav-btn .cnav-lbl{display:none}.cnav-btn svg{width:20px;height:20px}}\
';
var styleEl = document.createElement('style');
styleEl.setAttribute('data-cnav', '1');
@@ -82,11 +88,20 @@
wrap.setAttribute('aria-label', 'Primary');
wrap.innerHTML = '\
<a class="cnav-btn" href="' + BAG_URL + '" aria-label="Shop" title="Shop">' + ICONS.bag + '</a>\
- <button class="cnav-btn" id="cnav-account" aria-label="Account" title="Account">' + ICONS.person + '</button>\
<button class="cnav-btn" id="cnav-search" aria-label="Search" title="Search">' + ICONS.search + '</button>\
<button class="cnav-btn" id="cnav-menu" aria-label="Menu" title="Menu">' + ICONS.menu + '<span class="cnav-lbl">Menu</span></button>\
';
+ // Top-left login hamburger — its own control (Steve 2026-07-03). Opens the
+ // trade-account / sign-in panel; the panel slides from the LEFT to match.
+ var loginwrap = document.createElement('div');
+ loginwrap.className = 'cnav-loginwrap';
+ loginwrap.setAttribute('role', 'navigation');
+ loginwrap.setAttribute('aria-label', 'Account');
+ loginwrap.innerHTML = '\
+ <button class="cnav-btn" id="cnav-account" aria-label="Account" title="Sign in / Account">' + ICONS.menu + '<span class="cnav-lbl">Account</span></button>\
+ ';
+
var overlay = document.createElement('div');
overlay.className = 'cnav-overlay';
@@ -111,6 +126,7 @@
<a href="mailto:' + INFO_EMAIL + '?subject=' + encodeURIComponent('Trade account inquiry') + '">Email ' + INFO_EMAIL + '</a>\
<a href="tel:+18883734564">Call (888) 373-4564 · M–F 9–5 PT</a>\
');
+ acct.classList.add('cnav-panel-left'); // slides from the left, under the login hamburger
// Search panel — filters [data-grid] if present, otherwise dispatches to /search
var hasGrid = document.querySelector('[data-grid]') || document.querySelector('.product-grid') || document.querySelector('#shop');
@@ -153,6 +169,7 @@
');
document.body.appendChild(wrap);
+ document.body.appendChild(loginwrap);
document.body.appendChild(overlay);
document.body.appendChild(acct);
document.body.appendChild(srch);
← 3c292a4 Mount new-arrivals promo strip (Tier B): require ../_shared/
·
back to Jutewallpaper
·
Square product-card images (aspect-ratio 1/1) d03d802 →