Desktop side-rail variant of the unified app shell #47

New issue

Open

opened 2026-05-07 09:52:36 +00:00 by padreug · 0 comments

padreug commented

2026-05-07 09:52:36 +00:00

Owner

Scope

Add a desktop="rail" (or similar) variant to <AppShell> that renders a left-edge rail at lg: and up while keeping the bottom nav at <lg.
Profile entry, Hub pill, app-specific tabs all keep their semantics, just relocate.
Reuse existing AppLayout.vue patterns rather than reinventing.

Why now

Surfaced while planning the unified bottom-nav refactor. Today every standalone uses the mobile bottom-nav pattern at every breakpoint, which wastes vertical space on desktop and looks out of place.

Depends on

The unified app shell (Phase A of bottom-nav refactor) being merged — that's where <AppShell> lives.

Acceptance

At lg and up, navigation moves to a left rail; at <lg, bottom nav stays.
No layout shift / hydration mismatch on resize.
Hub pill, profile sheet trigger, app tabs all reachable from both layouts.

The unified app shell built in the bottom-nav refactor is mobile-first (fixed bottom nav, no breakpoint variants). On desktop / tablet landscape, a side-rail navigation (mirroring `src/components/layout/AppLayout.vue` + `AppSidebar.vue` patterns already in the project) is more ergonomic. ## Scope - Add a `desktop="rail"` (or similar) variant to `<AppShell>` that renders a left-edge rail at `lg:` and up while keeping the bottom nav at `<lg`. - Profile entry, Hub pill, app-specific tabs all keep their semantics, just relocate. - Reuse existing `AppLayout.vue` patterns rather than reinventing. ## Why now Surfaced while planning the unified bottom-nav refactor. Today every standalone uses the mobile bottom-nav pattern at every breakpoint, which wastes vertical space on desktop and looks out of place. ## Depends on - The unified app shell (Phase A of bottom-nav refactor) being merged — that's where `<AppShell>` lives. ## Acceptance - [ ] At `lg` and up, navigation moves to a left rail; at `<lg`, bottom nav stays. - [ ] No layout shift / hydration mismatch on resize. - [ ] Hub pill, profile sheet trigger, app tabs all reachable from both layouts.

padreug referenced this issue

2026-05-07 10:06:37 +00:00

feat(layout): unified app-shell primitives (Phase A) #51

padreug referenced this issue

2026-05-07 10:27:10 +00:00

feat(layout): adopt unified AppShell across hub + 7 standalones (Phase B) #52

padreug added the

app:webapp

enhancement

labels

2026-05-17 21:23:34 +00:00