iqbal/learning-lab-express
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Collapse sidebar nav groups into dropdowns that open on the active page

Browse Source 
Each group label (Dashboard, Settings) toggles its items; a group starts
closed unless it holds the current route, and a manual toggle resets on
the next navigation. Mobile keeps every item visible.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Iqbal
2026-10-28 13:55:27 +07:00
parent 844c88912a
commit d018c6826f
3 changed files with 29 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/styles/theme.css
View File

@@ -287,10 +287,15 @@ dialog::backdrop{background:rgba(16,24,40,.45);backdrop-filter:blur(4px)}
@keyframes page-in{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.skel,.app main{animation:none}}
/* Sidebar groups: Dashboard, then Settings */
.sidebar nav .nav-label{margin:0 12px 6px}
.sidebar nav .nav-label~.nav-label{margin-top:18px}
@media(max-width:700px){.sidebar nav .nav-label{display:none}}
/* Sidebar groups: Dashboard, then Settings, each a dropdown that opens on its active page */
.sidebar nav button.nav-label{display:flex;align-items:center;justify-content:space-between;width:auto;margin:0 0 2px;padding:6px 12px;border-radius:8px;color:var(--muted);font-size:11px;font-weight:600;box-shadow:none;background:none}
.sidebar nav button.nav-label:hover{background:#f2f7ff;color:var(--ink)}
.sidebar nav button.nav-label svg{width:14px;height:14px;color:inherit;transition:transform .15s}
.sidebar nav button.nav-label[aria-expanded=false] svg{transform:rotate(-90deg)}
.sidebar nav .nav-items~.nav-label{margin-top:12px}
.nav-items{display:contents}
@media(min-width:701px){.nav-items.closed{display:none}}
@media(max-width:700px){.sidebar nav button.nav-label{display:none}}
/* Production: the knowledge graph, then the metric row and the latest content */
.prod-metrics{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:24px}