board: add ⤓/⤒ icon toggle to flip nav bar above/below toolbar

1ccfb2d0643c9d7e6eb650a09184d6c20a9fe221 · 2026-09-11 12:35:56 -0700 · Steve Abrams

The nav bar rides its own .topnav strip; the toggle button on that strip
switches its position (top ⇄ below the toolbar) via a .nav-below class on
the sticky wrapper (pure CSS flex order). Choice persists to tkNavPos and
is cleared by Reset. Verified with a headless click + reload test.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QMDd11h9e9gLvFRu28oknU

Files touched

M board.html

Diff

commit 1ccfb2d0643c9d7e6eb650a09184d6c20a9fe221
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Fri Sep 11 12:35:56 2026 -0700

    board: add ⤓/⤒ icon toggle to flip nav bar above/below toolbar
    
    The nav bar rides its own .topnav strip; the toggle button on that strip
    switches its position (top ⇄ below the toolbar) via a .nav-below class on
    the sticky wrapper (pure CSS flex order). Choice persists to tkNavPos and
    is cleared by Reset. Verified with a headless click + reload test.
    
    Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
    Claude-Session: https://claude.ai/code/session_01QMDd11h9e9gLvFRu28oknU
---
 board.html | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/board.html b/board.html
index 605a796a..dde57d68 100644
--- a/board.html
+++ b/board.html
@@ -14,10 +14,14 @@
   *{box-sizing:border-box}
   body{margin:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--ink)}
   header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--bg)}
-  .stickytop{position:sticky;top:0;z-index:8;background:var(--bg)}
-  /* ticket nav bar — full-width strip across the very top */
-  .globalnav.topnav{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--bg);padding:8px 14px;gap:6px;overflow-x:auto}
-  .globalnav.topnav button{padding:8px 14px;font-size:11px}
+  .stickytop{position:sticky;top:0;z-index:8;background:var(--bg);display:flex;flex-direction:column}
+  /* ticket nav bar — full-width strip across the very top; ⤓ Nav toggles it below the toolbar */
+  .topnav{display:flex;align-items:center;gap:10px;width:100%;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--bg);overflow-x:auto}
+  .topnav .globalnav{border:0;background:transparent;padding:0;border-radius:0;gap:6px}
+  .topnav .globalnav button{padding:8px 14px;font-size:11px}
+  .navpos{margin-left:auto;flex:0 0 auto;border:1px solid var(--line);background:var(--card);color:var(--mut);padding:6px 10px;border-radius:8px;font:700 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
+  .navpos:hover{color:var(--ink);border-color:var(--ink)}
+  .stickytop.nav-below .topnav{order:2}
   h1{font-size:15px;margin:0;letter-spacing:.06em;white-space:nowrap}
   .pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--mut);background:var(--card);border:1px solid var(--line);border-radius:20px;padding:3px 9px;cursor:pointer;user-select:none}
   .pill b{color:var(--ink)} .pill.on{outline:1px solid var(--acc)}
@@ -111,7 +115,10 @@
   @media(max-width:900px){.catalog-grid{grid-template-columns:repeat(2,minmax(180px,1fr))}.globalnav{order:10;width:100%}.kvrow{align-items:flex-start;flex-direction:column}.kvrow h3{width:auto;flex:auto}}
 </style></head><body>
 <div class="stickytop">
-<nav class="globalnav topnav" aria-label="Fleet viewer"><button data-section="all">All</button><button data-section="open">Open</button><button data-section="blocked">Blocked</button><button data-section="doing">Doing</button><button data-section="agents">Agents</button><button data-section="skills">Skills</button></nav>
+<div class="topnav">
+  <nav class="globalnav" aria-label="Fleet viewer"><button data-section="all">All</button><button data-section="open">Open</button><button data-section="blocked">Blocked</button><button data-section="doing">Doing</button><button data-section="agents">Agents</button><button data-section="skills">Skills</button></nav>
+  <button id="navPosBtn" class="navpos" title="Move nav bar below the toolbar" aria-label="Toggle nav bar position">⤓ Nav</button>
+</div>
 <header>
   <h1>FLEET TICKETS</h1>
   <select class="gsel" id="view" title="Separate actionable work from recurring registries">
@@ -357,6 +364,13 @@ function initSectionTabs(){
 initSectionTabs();
 function setLayout(layout){LAYOUT=layout;save('tkLayout',LAYOUT);syncUrl();document.querySelectorAll('[data-layout]').forEach(b=>b.classList.toggle('on',b.dataset.layout===LAYOUT));if(SECTION==='agents'||SECTION==='skills')renderCatalog();else{const agent=window.NavAgent&&window.NavAgent.instances&&window.NavAgent.instances[0];if(agent&&agent.setView)agent.setView(LAYOUT==='kv'?'list':'grid');}}
 document.querySelectorAll('[data-section]').forEach(b=>b.onclick=()=>setSection(b.dataset.section));document.querySelectorAll('[data-layout]').forEach(b=>b.onclick=()=>setLayout(b.dataset.layout));
+// nav-bar position toggle (top ⇄ below the toolbar), persisted like other view settings
+let NAVPOS=LS('tkNavPos','top');
+function setNavPos(pos){NAVPOS=(pos==='bottom'?'bottom':'top');save('tkNavPos',NAVPOS);
+  const st=document.querySelector('.stickytop'); if(st)st.classList.toggle('nav-below',NAVPOS==='bottom');
+  const b=document.getElementById('navPosBtn'); if(b){b.textContent=NAVPOS==='top'?'⤓ Nav':'⤒ Nav';b.title=NAVPOS==='top'?'Move nav bar below the toolbar':'Move nav bar above the toolbar';}}
+{const _npb=document.getElementById('navPosBtn'); if(_npb)_npb.onclick=()=>setNavPos(NAVPOS==='top'?'bottom':'top');}
+setNavPos(NAVPOS);
 document.querySelectorAll('[data-section]').forEach(b=>b.classList.toggle('on',b.dataset.section===SECTION));document.querySelectorAll('[data-layout]').forEach(b=>b.classList.toggle('on',b.dataset.layout===LAYOUT));
 // ── selection action bar ──
 function syncBar(){const n=SEL.size;$('#seln').textContent=n;$('#actionbar').classList.toggle('show',n>0);}
@@ -428,7 +442,7 @@ $('#colsBtn').onclick=e=>toggleMenu('#colmenu',e.currentTarget);
 $('#pillsBtn').onclick=e=>toggleMenu('#pillmenu',e.currentTarget);
 $('#detBtn').onclick=e=>toggleMenu('#detmenu',e.currentTarget);
 $('#dmBtn').onclick=()=>{DM_ON=DM_ON?0:1;save('tkDM',DM_ON);$('#dmBtn').classList.toggle('off',!DM_ON);dmPanel(LASTMSG);};
-$('#resetBtn').onclick=()=>{['tkCols','tkOrder','tkWid','tkDens','tkPills','tkDet','tkDM','tkGroup','tkView','tkSortKey','tkSortDir','tkTheme','tkSection','tkLayout','tkSectionOrder','tkCatalogSort','tkCatalogDir','tkCatalogCols','tkRunProfile','tkRunProfileDefaultV2'].forEach(k=>localStorage.removeItem(k));location.reload();};
+$('#resetBtn').onclick=()=>{['tkCols','tkOrder','tkWid','tkDens','tkPills','tkDet','tkDM','tkGroup','tkView','tkSortKey','tkSortDir','tkTheme','tkSection','tkLayout','tkSectionOrder','tkCatalogSort','tkCatalogDir','tkCatalogCols','tkRunProfile','tkRunProfileDefaultV2','tkNavPos'].forEach(k=>localStorage.removeItem(k));location.reload();};
 document.addEventListener('click',e=>{if(!e.target.closest('#colmenu,#colsBtn'))$('#colmenu').classList.remove('show');if(!e.target.closest('#pillmenu,#pillsBtn'))$('#pillmenu').classList.remove('show');if(!e.target.closest('#detmenu,#detBtn'))$('#detmenu').classList.remove('show');});
 function dmPanel(mm){
   if(!DM_ON){$('#dmwrap').innerHTML='';return;}

← ae20b9e2 board: move ticket nav bar to a full-width strip across the · back to Ticket System · TK-11372: independent re-verification of the fix by a second 92526783 →