/* * Sidebar (collapsible left navigation drawer). * * Width is driven by `.sidebar-collapsed` on (set pre-Alpine to avoid * FOUC and toggled by sidebar.js). The Alpine store keeps the class in sync. */ #sidebar { width: 280px; border-right: 1px solid var(--md-sys-color-outline-variant); transition: width 0.2s ease; } html.sidebar-collapsed #sidebar { width: 72px; } /* Center icons + drop padding when collapsed so 24px icons sit in 72px gutter */ html.sidebar-collapsed #sidebar .sidebar-item { justify-content: center; padding: 0; gap: 0; } /* Labels inside collapsed sidebar — hard hide to prevent any flash via x-show */ html.sidebar-collapsed #sidebar .sidebar-item > span.truncate, html.sidebar-collapsed #sidebar .sidebar-group-label { display: none; } /* Main content offset — matches sidebar width on lg+ screens */ @media (min-width: 1024px) { .sidebar-offset { margin-left: 280px; transition: margin-left 0.2s ease; } html.sidebar-collapsed .sidebar-offset { margin-left: 72px; } }