`public/nav-drawer.css`

39 lines
/* nav-drawer.css — collapses the page's #topbar into a hamburger drawer pinned
 * upper-left. Shared across every USRE page so the nav is identical everywhere.
 * Inherits the host page's --bg/--panel/--line/--fg/--muted/--gold CSS vars. */
#navBurger{position:fixed;top:12px;left:12px;z-index:1200;width:44px;height:44px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(17,21,29,.94);border:1px solid var(--line,#222936);color:var(--gold,#c8a24b);
  font-size:20px;line-height:1;cursor:pointer;backdrop-filter:blur(6px);box-shadow:0 2px 10px rgba(0,0,0,.4);}
#navBurger:hover{border-color:var(--gold,#c8a24b);color:var(--fg,#e8ecf2);}
#navBurger.open{color:var(--fg,#e8ecf2);}

#navBackdrop{position:fixed;inset:0;z-index:1150;background:rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transition:opacity .2s;}
#navBackdrop.open{opacity:1;visibility:visible;}

#navDrawer{position:fixed;top:0;left:0;height:100%;width:280px;max-width:84vw;z-index:1180;
  background:rgba(13,17,24,.98);border-right:1px solid var(--line,#222936);backdrop-filter:blur(8px);
  transform:translateX(-100%);transition:transform .22s ease;overflow-y:auto;
  box-shadow:2px 0 22px rgba(0,0,0,.55);}
#navDrawer.open{transform:translateX(0);}
#navDrawerBody{display:flex;flex-direction:column;gap:16px;padding:66px 18px 26px;}

/* re-flow whatever came out of the topbar into a clean vertical stack */
#navDrawerBody .brand{font-size:16px;font-weight:700;white-space:normal;}
#navDrawerBody nav{display:flex;flex-direction:column;gap:2px;font-size:15px;}
#navDrawerBody nav a{padding:9px 11px;border-radius:8px;text-decoration:none;color:var(--muted,#8a93a3);}
#navDrawerBody nav a:hover,#navDrawerBody nav a.active{background:rgba(200,162,75,.12);color:var(--gold,#c8a24b);}
/* neutralize the old flex-row spacers so children stack full-width */
#navDrawerBody #metrics,#navDrawerBody #typeSeg{margin-left:0;}
#navDrawerBody #metrics{display:flex;flex-direction:column;align-items:stretch;gap:6px;}
#navDrawerBody #metrics button{width:100%;text-align:left;}
#navDrawerBody #typeSeg{display:inline-flex;width:100%;}
#navDrawerBody #typeSeg button{flex:1;}
#navDrawerBody #exportcsv,#navDrawerBody #freshness,#navDrawerBody #thinToggle{margin-left:0;}
#navDrawerBody .cg-sec-label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted,#8a93a3);}

/* clearance for the fixed upper-left hamburger (see nav-drawer.js) */
body.navdz-pad{padding-top:56px;}            /* flow-layout pages */
.cg-shell .cg-rail{padding-top:56px;}         /* grid pages: keep the first facet below the burger even when scrolled */