App Shell
The application chrome: DrylLayout wires a DrylAppBar,
a DrylDrawer sidebar and DrylMainContent into a single
CSS-grid shell. The app bar exposes Start / Center /
End slots and a Raised elevation; the drawer adds
operating modes (Auto / Static / Collapsible / Pinnable / Flyout) and an
icon-rail collapse that reflows the body. This very website runs on it.
App bar — slots & elevation
Collapsible sidebar shell
DrylLayout coordinates the app-bar toggle with the drawer's collapsed state — the grid column animates to an icon rail and back.
Content
Sidebar is expanded. Use the chevron button in the app bar to toggle it.
Sidebar modes
DrylDrawer.Mode selects how the sidebar occupies space.
Auto (default) is an in-flow column on desktop and a
flyout overlay on mobile. Static is always a column.
Collapsible adds the icon-rail toggle shown above.
Pinnable persists that collapsed state to
localStorage. Flyout always overlays the
content, trapping focus and closing on Esc or backdrop click.
@* Pinnable: collapsed state survives a page reload. *@
<DrylDrawer Mode="SidebarMode.Pinnable" PersistStateKey="dryl.nav" @bind-Collapsed="navCollapsed">
<Header><AppBrand /></Header>
<Content>
<DrylNavGroup Title="Library">
<DrylNavLink Href="" Icon="Home" Match="NavLinkMatch.All">Overview</DrylNavLink>
</DrylNavGroup>
</Content>
<Footer><DrylNavLink Href="settings" Icon="Settings">Settings</DrylNavLink></Footer>
</DrylDrawer>
@* Flyout: always an overlay; Esc / backdrop close it, focus is trapped. *@
<DrylDrawer Mode="SidebarMode.Flyout" @bind-Open="navOpen">
<DrylNavGroup Title="Menu">
<DrylNavLink Href="profile" Icon="User">Profile</DrylNavLink>
</DrylNavGroup>
</DrylDrawer>