Off-canvas Left

HTML Structure

The page is built around three key elements:

• <header class="site-header"> — sticky top bar with brand name, desktop nav links, theme toggle icons (sun/moon/monitor), and a burger button linking to #menu.
• <div id="menu"> — the off-canvas overlay. It contains a backdrop <a> and a sliding <aside> panel. The panel has a header with close button and a nav list for mobile.
• <main class="container"> — page content area using Pico's responsive container.

The burger link uses href="#menu" and the close/backdrop links use href="#". When clicked, the browser's fragment identifier changes, which the CSS :target pseudo-class detects to toggle the panel open or closed — zero JavaScript.

CSS: Off-canvas Mechanics

The panel and backdrop are positioned fixed and hidden by default:

• #menu is position: fixed; inset: 0; pointer-events: none — invisible and non-interactive by default.
• #menu:target sets pointer-events: auto, activating the overlay.
• .offcanvas__backdrop starts at opacity: 0 and fades in via #menu:target .offcanvas__backdrop { opacity: 1 }.
• .offcanvas__panel starts at transform: translateX(-100%) and slides in via #menu:target .offcanvas__panel { transform: translateX(0) }.
• Both transitions use a 280ms cubic-bezier timing for a smooth feel.

Key principles: z-index: 999-1001 layers the backdrop below the panel but above all page content. pointer-events controls interactivity — when the menu is not targeted, clicks pass right through.

CSS: Header & Responsive

• The header uses position: sticky; top: 0 so it stays fixed at the top while scrolling.
• Desktop nav is shown with display: flex. At 720px and below, nav.main-nav hides and .burger becomes visible via a media query.
• Theme toggles (light/dark/auto) sit in the header and call document.documentElement.setAttribute('data-theme', ...) on click. This switches Pico's CSS variables between light, dark, and system preference.
• The data-theme="light" selector overrides the header/footer background to #eef1f5 for a subtle light gray in day mode.

CSS Variables & Theming

Two custom properties drive the layout:

• --offcanvas-width: min(360px, 82vw) — panel width, capped at 360px or 82% of viewport.
• --transition-speed: 280ms — animation duration for backdrop fade and panel slide.

Pico's built-in variables handle the rest: --pico-card-background-color for panel/header/footer backgrounds, --pico-muted-border-color for borders, --pico-muted-color for secondary text.

Accessibility

• The off-canvas panel uses role="dialog" and aria-modal="true" to signal its role to assistive technology.
• All interactive elements have aria-label or title attributes (close menu, theme mode).
• The burger button uses aria-controls="menu" and aria-expanded="false".
• Focus outlines are preserved via .offcanvas__panel a:focus { outline: 3px solid Highlight }.
• SVG icons use aria-hidden="true" so screen readers ignore decorative graphics.

No JavaScript Required

This pattern relies entirely on the CSS :target pseudo-class, which matches when a fragment identifier in the URL corresponds to an element's id. Clicking a link like <a href="#menu"> changes the URL to #menu, which activates #menu:target. Clicking the backdrop or close link sets the URL back to # (the top of the page), deactivating the target. This is a robust, accessible pattern that works without a single line of JavaScript.