CSS Sidebar Layouts Playground

Apple-Pro premium — brushed-aluminium sidebar on a near-black slate, system-blue accents and SF-style typography. The classic admin shell with a luxe finish. Sidebar is sticky via `position: sticky`; main content scrolls.

Sunset palette — coral fading into magenta and ember orange, with a soft cream content area. Click the toggle to collapse from 240px to 64px. Pure CSS via <code>:has(:checked)</code> on the grid template; labels fade, icons stay glowing.

Cyberpunk 2099 — pitch black with electric cyan and hot pink, glitching scanlines, monospace HUD type. Tap the burger to slide the drawer in; the backdrop blurs and dims the page. <code>:has(:checked)</code> drives the transform; clicking the backdrop closes.

Bauhaus poster — cream canvas, cobalt-blue right rail, primary-red and lemon shapes composing into a designer's inspector pane. Sidebar on the right via <code>1fr 260px</code>. Real <code>&lt;dl&gt;</code> with <code>&lt;dt&gt;</code>/<code>&lt;dd&gt;</code> for the property pairs.

Editorial newspaper — off-white paper, ink-black serif headlines, spot-red active state. Three-column shell — folder sidebar, message list, reading pane. CSS grid with three columns, each scrolling independently. The mail client a print designer would lay out.

Scandinavian docs — warm beige paper, forest-green section nav, clay-red "active" pill, soft greys for the TOC. Three-column shell (left section nav, centre article, right rail of in-page anchors). Both sidebars sticky; centre flows. Like reading a Hay catalogue.

Tokyo neon arcade — deep midnight rail with electric-yellow + magenta glows that pulse on hover. Hover or focus a link to expand the rail from 64px to 240px and reveal the labels. Pure CSS via width transition; <code>aria-label</code> carries meaning when collapsed.

Luxury e-commerce — cream paper, brass-gold accents, chocolate copy. The kind of filter rail you'd find at Aesop or Hermès. Native <code>&lt;details&gt;</code> for collapsible groups gives keyboard support and <code>aria-expanded</code> for free; <code>accent-color</code> tints the checkboxes.

Art gallery white-cube — pure ivory canvas, hairline rules, oversized serif numerals. The sidebar floats as a museum placard with margin on all four sides; an oversized chocolate-on-ivory accent number frames the active item. The sidebar as printed material.

Gaming console — onyx black with carbon-fibre texture, plasma-green accents, monospace HUD type. Nav at the top, a player-profile block pinned to the bottom of the sidebar. Pure CSS via flex column + <code>margin-top: auto</code> on the footer.

Mid-century modern — mustard sidebar, walnut content area, teal active pill. Eames-era graphic palette. Toggling the burger pushes the content right instead of overlaying it. Pure CSS via <code>:has(:checked)</code> on the grid template columns.

Aurora glassmorphism — deep indigo night sky with drifting aurora-pink and cyan ribbons, frosted glass drawer with chromatic edge. Drawer slides in over the page; the backdrop blurs behind it. Pure CSS via <code>backdrop-filter</code> + <code>:has(:checked)</code>.

Pure white canvas, ink-black type, one single red dot for the active item. Swiss-poster minimalism. Click the toggle to collapse; state persists across page reloads via <code>localStorage</code>. An inline IIFE applies the stored state before paint to avoid a flash.

Frosted macOS Big-Sur — translucent grey sidebar with vibrancy blur over a pastel sunrise wallpaper, system-blue active state. A sticky <code>&lt;form role="search"&gt;</code> at the top stays visible as the nav scrolls. Native <code>&lt;input type="search"&gt;</code> for the clear button.

Memphis design — pastel-pink sidebar with mint and lemon accents, black squiggle backgrounds, hard-shadow chunky pills. Each section is its own <code>&lt;nav aria-label&gt;</code> so screen readers jump cleanly. The 80s/90s graphic style reborn for an admin shell.

Retro magazine TOC — cream paper, sepia rules, bordeaux-red active marker. The contents page of a 1970s journal. Active-link state via URL hash + <code>:target</code> pseudo-class; sibling selectors highlight the corresponding nav link. A 4-line script uses <code>history.pushState</code> so the URL hash updates without scrolling the host page.

Notebook paper — off-white sheet with hand-drawn ruled lines, graphite pencil marks, dog-eared corner. Two-level nav built with native <code>&lt;details&gt;</code>/<code>&lt;summary&gt;</code>: free keyboard support, free <code>aria-expanded</code>, free Enter/Space toggling. The browser does the work.

Dracula tribute — the editor theme reborn as a sidebar. Deep purple base with peach, cyan, lime, and pink accents; monospace IDE type. Three tabs swap the content (Files, Search, Git) via radio inputs + <code>:has()</code> + sibling selectors. Zero JavaScript.

Duolingo-style joyful gamification — forest-green nav with canary-yellow CTAs, hard chunky shadows, oversized rounded buttons. Native <code>&lt;progress&gt;</code> announces completion to screen readers; a real <code>&lt;ol&gt;</code> tracks steps. Designed to feel like progress is fun.

Brutalist mono — pure white, ink black, zero radius, oversized monospace. The "raw HTML element with no styling" energy. Drag the right edge of the sidebar to resize. Pure CSS via <code>resize: horizontal</code> on a wrapper; the browser provides the drag handle.

Linear-style minimal mono — slate canvas, hairline rules, single electric-blue accent. Three-pane workspace shell (workspace nav, page list, editor); each pane scrolls independently. Heavy on semantics — real <code>&lt;aside&gt;</code> + <code>&lt;nav&gt;</code> + <code>&lt;article&gt;</code>.

Sunset terminal — pitch black with green-screen phosphor type, amber prompt accents, a soft horizon glow at the bottom. The 1980s computer terminal aesthetic. Sidebar reflows into a horizontal top nav when its container drops below 600px — CSS <code>container queries</code>, not viewport media queries.

Vaporwave dream — chromatic magenta-to-cyan gradient with a sun on the horizon, scanlines, and a translucent glass sidebar floating above it. <code>backdrop-filter: blur()</code> handles the frost; CSS keyframes drift the sun. Pure CSS, no images.