layoutresponsive states

responsive states

DashboardShell has two breakpoints: ≥1280 (full 4-cell grid) and <1280 (stacked: topnav over stage; brand + sidenav hide). below 768 the topnav padding tightens to match smaller viewports.

when the brand corner and sidenav hide, apps should put a hamburger button in the topnav and render their own drawer for the nav contents. consumers own that — the shell stays dumb.

variants

≥1280 — desktop (this view)
brand
topnav
sidenav
stage

full 4-cell grid with brand + topnav + sidenav + stage.

768–1279 — tablet
topnav
stage

brand + sidenav hidden. topnav stretches full-width over the stage.

<768 — mobile
topnav
stage

same stack as tablet; topnav padding tightens to 20px and per-page padding shrinks.