Sidebar

App shell: .shell, .sidebar, .shell-main, .topbar, .shell-body. Always open on desktop. data-collapsed on .shell shrinks the rail to --sidebar-width-icon (icons stay, labels hide). That collapse is desktop only. Below 40rem, data-open on .shell slides the sidebar over a backdrop — icon-collapse does not apply. There is no wrapper. Header is a team dropdown; footer is a user dropdown. Collapsed icon rows use a tooltip via Place.svelte. Hover … row actions are omitted so collapsed tooltips keep the hover target. Mobile overlay: Dashboard.

Default

Collapsed

Code

<div class="shell">
	<aside class="sidebar">
		<div class="sidebar-header">
			<button class="sidebar-link" type="button" popovertarget="team" aria-haspopup="menu">
				<span class="login-mark" aria-hidden="true"><!-- mark --></span>
				<span class="stack">Acme Inc. / Enterprise</span>
			</button>
			<div id="team" popover class="menu" role="menu" data-side="end"><!-- teams --></div>
		</div>
		<div class="sidebar-content">
			<input class="input" type="search" placeholder="Search…" aria-label="Search">
			<div class="sidebar-group">
				<div class="sidebar-label">Platform</div>
				<nav class="sidebar-menu" aria-label="Platform">
					<details open>
						<summary class="sidebar-link">
							<!-- icon -->
							<span>Playground</span>
							<svg class="sidebar-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
								<path d="m9 6 6 6-6 6"></path>
							</svg>
						</summary>
						<div class="sidebar-sub">
							<a class="sidebar-link" href="/">History</a>
							<a class="sidebar-link" href="/">Starred</a>
						</div>
					</details>
					<a class="sidebar-link" href="/" data-active>
						<!-- icon -->
						<span>Dashboard</span>
						<span class="badge badge-secondary">8</span>
					</a>
				</nav>
			</div>
		</div>
		<div class="sidebar-footer">
			<button class="sidebar-link" type="button" popovertarget="user" aria-haspopup="menu">
				<span class="avatar">AL</span>
				<span class="stack">Ada Lovelace</span>
			</button>
			<div id="user" popover class="menu" role="menu" data-side="end"><!-- Account, Billing, Log out --></div>
		</div>
	</aside>
	<div class="shell-main">
		<header class="topbar">
			<button class="button button-ghost button-icon shell-fold" type="button">…</button>
			<button class="button button-ghost button-icon shell-menu" type="button">…</button>
			…
		</header>
		<div class="shell-body">…</div>
	</div>
</div>

<!-- Desktop icon-collapse: data-collapsed on .shell. Labels hide; icons remain.
	 Hover icon rows for a .tooltip (Place.svelte). Team + user are .menu popovers.
	 Mobile overlay is unchanged (data-open). See the Dashboard block. -->