Responsive Sidebar Design

Goal

Make both the app sidebar (300px fixed) and admin sidebar (240px fixed) responsive so they look good on smaller laptop resolutions without breaking the layout.

Three Phases

Phase	Viewport	App Sidebar	Admin Sidebar
Full	≥ 1280px	300px	240px
Compact	1024px – 1279px	220px	200px
Collapsed	< 1024px	Hidden, hamburger overlay	Hidden, hamburger overlay

CSS Variables & Transitions

Both sidebars switch from hardcoded widths to CSS custom properties:

App: --sidebar-width: 300px on :root, used by .sidebar (width) and .content (margin-left)
Admin: already has --sidebar-width: 240px, reused
Both sidebar and content areas get transition: width 0.2s ease / transition: margin-left 0.2s ease for smooth resizing

Compact Phase (1024px – 1279px)

Media query overrides the CSS variable:

App: --sidebar-width: 220px
Admin: --sidebar-width: 200px

No structural HTML changes. Text still fits — longest app item "Document Management" fits at 220px with icon + gap + padding (~145px text + ~64px overhead). Admin items are all short (≤11 chars).

Collapsed Phase (< 1024px)

CSS

Sidebar: transform: translateX(-100%) — hidden off-screen left
Content: margin-left: 0 — full width
Hamburger button: display: block (hidden above 1024px with display: none)
When body.sidebar-open:
- Sidebar: transform: translateX(0), overlays content (doesn't push it)
- Backdrop: position: fixed; inset: 0; background: rgba(0,0,0,0.5) — behind sidebar, above content
- Sidebar z-index > backdrop z-index > content z-index

HTML additions (both app and admin)

Hamburger button:

[:button.sidebar-toggle {:hx-on:click "document.body.classList.toggle('sidebar-open')"}
 [:iconify-icon {:icon :lucide:menu}]]

Backdrop:

[:div.sidebar-backdrop {:hx-on:click "document.body.classList.toggle('sidebar-open')"}]

Both elements exist in the DOM always but are hidden via CSS above 1024px.

Behavior

Hamburger click toggles sidebar-open class on <body>
Backdrop click removes sidebar-open class (closes sidebar)
Same classList.toggle pattern already used for user menu expansion
No JS framework needed

Files to Modify

File	Change
`resources/app/public/css/style.css`	CSS variables, transitions, media queries, hamburger/backdrop styles
`resources/admin/public/css/style.css`	Transitions, updated media queries (already has 768px breakpoint, update to 1024px), hamburger/backdrop styles
`src/com/getorcha/app/ui/layout.clj`	Add hamburger button and backdrop div to `base` function
`src/com/getorcha/admin/ui/layout.clj`	Add hamburger button and backdrop div to admin layout

What doesn't change

Sidebar component functions (nav in app, sidebar in admin) — no structural changes
App footer — already position: fixed; left: 0; right: 0, works independently of sidebar width
Navigation behavior (plain <a href> links)