rentv front page: split single left drawer into 2 corner hamburgers (Explore left / Sections right) — parity with masthead nav

81770f55f12a332dba0c564ba353907c679a339c · 2026-08-06 10:30:59 -0700 · steve@designerwallcoverings.com

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Files touched

M public/index.html

Diff

commit 81770f55f12a332dba0c564ba353907c679a339c
Author: steve@designerwallcoverings.com <steve@designerwallcoverings.com>
Date:   Thu Aug 6 10:30:59 2026 -0700

    rentv front page: split single left drawer into 2 corner hamburgers (Explore left / Sections right) — parity with masthead nav
    
    Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 public/index.html | 34 ++++++++++++++++++++++++++--------
 1 file changed, 26 insertions(+), 8 deletions(-)

diff --git a/public/index.html b/public/index.html
index 350aab1c..ca5466b4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -20,6 +20,10 @@
   .scrim.open{opacity:1;pointer-events:auto}
   .drawer{position:fixed;top:0;left:0;height:100%;width:360px;max-width:88vw;background:#0b0e12;color:#e7ecf1;transform:translateX(-102%);transition:transform .26s cubic-bezier(.4,0,.2,1);z-index:951;display:flex;flex-direction:column;overflow-y:auto;box-shadow:2px 0 40px rgba(0,0,0,.4)}
   .drawer.open{transform:none}
+  /* RIGHT-corner drawer: mirror of the left drawer, slides in from the right (Sections). */
+  .drawer.right{left:auto;right:0;transform:translateX(102%);box-shadow:-2px 0 40px rgba(0,0,0,.4)}
+  .drawer.right.open{transform:none}
+  .rightnav{display:inline-flex;align-items:center;gap:6px}
   .drawer .dh{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #1c232b}
   .drawer .dh .w{font-family:'Playfair Display',serif;font-size:23px;font-weight:800}.drawer .dh .w span{color:var(--red)}
   .drawer .dh button{background:none;border:0;color:#8b949e;font-size:22px;cursor:pointer;line-height:1}
@@ -128,24 +132,35 @@
 </style></head>
 <body>
 <header class="top">
-  <button class="burger" id="burger" aria-label="Menu"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg><span class="lbl">Menu</span></button>
+  <button class="burger" id="burger" aria-label="Explore & regions menu"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg><span class="lbl">Explore</span></button>
   <a class="brand" href="/">REN<span>TV</span></a>
-  <button class="user" id="user" title="Sign in" aria-label="Sign in"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="3.5"/><path d="M4.5 20a7.5 7.5 0 0 1 15 0" stroke-linecap="round"/></svg></button>
+  <div class="rightnav">
+    <button class="user" id="user" title="Sign in" aria-label="Sign in"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="3.5"/><path d="M4.5 20a7.5 7.5 0 0 1 15 0" stroke-linecap="round"/></svg></button>
+    <button class="burger" id="burgerR" aria-label="Sections menu"><span class="lbl">Sections</span><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg></button>
+  </div>
 </header>
 <div class="scrim" id="scrim"></div>
+<!-- LEFT drawer (upper-left hamburger): Explore — tools, intelligence, company.
+     rentv-nav.js buildDrawerGroup() targets the FIRST .drawer and auto-folds a
+     "Regions" group in at the top, so this stays in parity with the masthead pages. -->
 <aside class="drawer" id="drawer">
   <div class="dh"><span class="w">REN<span>TV</span></span><button id="dclose" aria-label="Close">✕</button></div>
   <div class="snap" id="snap"></div>
   <div class="grp"><div class="gt">Discover</div></div>
   <nav><a href="/hub" style="font-weight:700">✨ Intelligence Hub — all tools</a><a href="/search">🔎 Search</a><a href="/market-pulse">📈 Rates &amp; Capital Markets</a><a href="/pulse">📊 Market Pulse</a><a href="/sector">🏙️ Sector Deep-Dives</a><a href="/metros">📍 Deal Flow by Metro</a><a href="/tools">🧮 CRE Toolkit</a><a href="/watchlist">⭐ Deal Watchlist</a><a href="/directory">🏢 CRE Directory</a><a href="/compare">⚖️ Deal Comparison</a><a href="/brief">📰 The RENTV Brief</a><a href="/syndicate">📡 Syndicate</a></nav>
-  <div class="grp"><div class="gt">Sections</div></div>
-  <nav><a href="/closings">Closings</a><a href="/sales">Sales</a><a href="/leases">Leases</a><a href="/financing">Financing</a><a href="/development">Development</a><a href="/multifamily">Multifamily</a><a href="/industrial">Industrial</a><a href="/retail">Retail</a></nav>
   <div class="grp"><div class="gt">Intelligence</div></div>
   <nav><a href="/deals">Deals</a><a href="/markets">Markets</a><a href="/la-commercial">LA Commercial</a><a href="/desk">Broker &amp; Owner Desk</a><a href="/review">The REview</a><a href="/cre-talk">CRE Talk</a><a href="/conferences">Conferences</a><a href="/blog">Blog</a></nav>
   <div class="grp"><div class="gt">Company</div></div>
   <nav><a href="/about">About</a><a href="/advertise">Advertise</a><a href="/subscribe">Subscribe / Newsletters</a></nav>
   <div class="df">RENTV.com — Commercial Real Estate News across the Western U.S. since 1998.</div>
 </aside>
+<!-- RIGHT drawer (upper-right hamburger): Sections — the property-type axis. -->
+<aside class="drawer right" id="drawerR" data-own-nav>
+  <div class="dh"><span class="w">Sections</span><button id="dcloseR" aria-label="Close">✕</button></div>
+  <div class="grp"><div class="gt">By Property Type</div></div>
+  <nav><a href="/closings">Closings</a><a href="/sales">Sales</a><a href="/leases">Leases</a><a href="/financing">Financing</a><a href="/development">Development</a><a href="/multifamily">Multifamily</a><a href="/industrial">Industrial</a><a href="/retail">Retail</a></nav>
+  <div class="df">RENTV.com — Commercial Real Estate News across the Western U.S. since 1998.</div>
+</aside>
 
 <div class="fold">
   <div class="datastrip"><div class="in" id="datastrip"></div></div>
@@ -240,10 +255,13 @@ document.addEventListener('click',e=>{ const d=e.target.closest('.drill[data-fil
 document.addEventListener('keydown',e=>{ if(e.key!=='Enter'&&e.key!==' ')return;
   const d=e.target.closest&&e.target.closest('.drill[data-filter="cat"]'); if(!d)return;
   e.preventDefault(); e.stopPropagation(); location.href=catURL(d.dataset.v||''); });
-$('burger').onclick=()=>{$('scrim').classList.add('open');$('drawer').classList.add('open');};
-const closeDrawer=()=>{$('scrim').classList.remove('open');$('drawer').classList.remove('open');};
-$('dclose').onclick=closeDrawer;$('scrim').onclick=closeDrawer;
-$('user').onclick=()=>{$('scrim').classList.add('open');$('drawer').classList.add('open');};
+const openDrawer=id=>{$('scrim').classList.add('open');$(id).classList.add('open');};
+const closeDrawer=()=>{$('scrim').classList.remove('open');$('drawer').classList.remove('open');$('drawerR').classList.remove('open');};
+$('burger').onclick=()=>openDrawer('drawer');    // upper-LEFT ham → Explore + Regions
+$('burgerR').onclick=()=>openDrawer('drawerR');  // upper-RIGHT ham → Sections
+$('dclose').onclick=closeDrawer;$('dcloseR').onclick=closeDrawer;$('scrim').onclick=closeDrawer;
+$('user').onclick=()=>openDrawer('drawerR');
+document.addEventListener('keydown',e=>{if(e.key==='Escape')closeDrawer();});
 async function jget(url){try{const r=await fetch(url,{credentials:'same-origin'});if(!r.ok)return null;return await r.json();}catch(e){return null;}}
 let ALL=[];
 // Canonical section labels — the drawer/footer link to /sales, /development, … which the

← ce079996 nav: surface /market-pulse (charts) in map hamburger + site- · back to Rentv · PR CRM notes: attach to deals too (string entity_id) + deals 30df559d →