feat(admin): responsive entity nav and collapsible list panels (Phase 9)

EntityNav: hidden on mobile, 48px icon strip at tablet (md), full labels+counts at desktop (lg).
Each list panel collapses to a 32px handle via localStorage-persisted state; auto-collapses when
navigating to the "+New" route. Mobile routing hides the list panel when a detail route is active.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-30 07:19:41 +02:00
parent 06a489567a
commit 3c54401bb2
14 changed files with 540 additions and 178 deletions

View File

@@ -13,16 +13,18 @@ let { data, children } = $props();
Height fills from below the global header (64px) to bottom of viewport.
-->
<div class="-mt-6 flex overflow-hidden" style="height: calc(100vh - 65px)">
<!-- Entity Nav: always visible on desktop, icon strip on tablet (Phase 9) -->
<EntityNav
userCount={data.userCount}
groupCount={data.groupCount}
tagCount={data.tagCount}
canManageUsers={data.canManageUsers}
canManageTags={data.canManageTags}
canManageGroups={data.canManageGroups}
canRunMaintenance={data.canRunMaintenance}
/>
<!-- Entity Nav: hidden on mobile, icon strip on tablet, full labels on desktop -->
<div class="hidden md:flex">
<EntityNav
userCount={data.userCount}
groupCount={data.groupCount}
tagCount={data.tagCount}
canManageUsers={data.canManageUsers}
canManageTags={data.canManageTags}
canManageGroups={data.canManageGroups}
canRunMaintenance={data.canRunMaintenance}
/>
</div>
<!-- Right side: list panel + detail panel (or full-width for system) -->
<div class="flex min-w-0 flex-1 overflow-hidden">