Dashboard · Floating panel
The sidebar does not touch the screen: 16px of ground on every side, a 20px radius and one soft shadow underneath. The plainest of the six, and the one that makes a back office stop looking like a form.
Design Library
Dashboard
One restaurant back office, six sidebar systems. The content is real — dishes, prices and photos from M Desk’s live menu, the order board, the last 30 days (scaled) — and each sidebar is rebuilt by hand from the same video study: floating panel, dark rail, glass rail, rail + panel, hover expand, grouped nav.
Dashboard · Dark rail
The sidebar is the only dark thing on the page, so it carries all the weight. Inactive items are low-contrast grey; only the current one is lit, with a 3px accent bar on its left edge.
Dashboard · Glass rail
A blurred photo of the food under everything; the sidebar is frosted glass — 44% white, 24px backdrop blur, a 1px bright edge — and the cards are the same glass a little more opaque so the numbers still read.
Dashboard · Rail + panel
A 72px rail of module icons and a 240px panel listing that module’s own sections. Switching a module swaps the panel’s list with a short fade; picking a section filters the screen — orders by status, menu by category.
Dashboard · Hover expand
Dark throughout. The rail rests at 72px and opens to 240 on hover with an ease-out; the labels are always in the DOM and fade in 80ms after the width starts moving, so text never sits over the shrinking rail on the way out.
Dashboard · Grouped nav
Items grouped by area — Sala, Gestione, Sistema — under tiny grey labels with 32px between groups. The list scrolls on its own between a pinned brand at the top and a pinned user area at the bottom, so the exit is always where the eye expects it.
Full library — live sample, numbers, prompt and source — is for clients. I have the password