/* ============================================================
_sidebar.css — Sidebar / Drawer component
============================================================
Variants:
┌─────────────────────────────────────────────────────────┐
│ .sidebar — base (left, overlay mode) │
│ .sidebar.sidebar-right — slides from right │
│ .sidebar.sidebar-push — pushes page content │
│ .sidebar.sidebar-right.sidebar-push — push from right │
│ .sidebar.sidebar-fullpage — full viewport overlay │
└─────────────────────────────────────────────────────────┘
Required HTML wrapper for push variants:
Open/Close via JS:
sidebarOpen('my-sidebar')
sidebarClose('my-sidebar')
sidebarToggle('my-sidebar')
Backdrop click to close (also closes on click outside automatically):
============================================================ */
/* ── CSS Variables ── */
:root {
--sidebar-width: 280px;
--sidebar-bg: var(--color-dark-secondary);
--sidebar-border: color-mix(in srgb, var(--color-neutral-600) 25%, transparent);
--sidebar-shadow: 0 8px 48px rgba(0, 0, 0, 0.38);
--sidebar-duration: 0.28s;
--sidebar-ease: cubic-bezier(0.4, 0, 0.2, 1);
}
/* ══════════════════════════════════════════
BASE SIDEBAR
══════════════════════════════════════════ */
.sidebar {
position: fixed;
top: 0;
left: 0;
width: var(--sidebar-width);
height: 100vh;
height: 100dvh;
background: var(--sidebar-bg);
border-right: 1px solid var(--sidebar-border);
display: flex;
flex-direction: column;
z-index: calc(var(--z-modal) - 1);
transform: translateX(-100%);
transition: transform var(--sidebar-duration) var(--sidebar-ease),
box-shadow var(--sidebar-duration) var(--sidebar-ease);
overflow: hidden;
}
.sidebar.is-open {
transform: translateX(0);
box-shadow: var(--sidebar-shadow);
}
/* ── Header ── */
.sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--sidebar-border);
flex-shrink: 0;
min-height: 60px;
gap: var(--space-3);
}
.sidebar-title {
font-size: var(--fs-base);
font-weight: 700;
color: var(--color-light);
flex: 1;
}
/* ── Brand (logo + name in header) ── */
.sidebar-brand {
display: flex;
align-items: center;
gap: var(--space-2);
flex: 1;
min-width: 0;
}
.sidebar-brand-logo {
font-size: var(--fs-xl);
font-weight: 900;
color: var(--color-primary);
letter-spacing: -0.5px;
line-height: 1;
}
.sidebar-brand-text {
font-size: var(--fs-sm);
color: var(--color-muted);
font-weight: 500;
}
/* ── Close button ── */
.sidebar-close {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: none;
border: none;
color: var(--color-muted);
cursor: pointer;
border-radius: var(--radius-sm);
transition: background var(--ease-fast), color var(--ease-fast);
flex-shrink: 0;
}
.sidebar-close:hover {
background: color-mix(in srgb, var(--color-neutral-600) 20%, transparent);
color: var(--color-light);
}
.sidebar-close svg { pointer-events: none; }
/* Larger close button for fullpage variant */
.sidebar-close-lg {
width: 44px;
height: 44px;
border-radius: var(--radius-full);
}
.sidebar-close-lg:hover {
background: color-mix(in srgb, var(--color-error) 12%, transparent);
color: var(--color-error);
}
/* ── Body ── */
.sidebar-body {
flex: 1;
overflow-y: auto;
padding: var(--space-4) var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-2);
/* Custom slim scrollbar */
scrollbar-width: thin;
scrollbar-color: var(--sidebar-border) transparent;
}
.sidebar-body::-webkit-scrollbar { width: 4px; }
.sidebar-body::-webkit-scrollbar-track { background: transparent; }
.sidebar-body::-webkit-scrollbar-thumb {
background: var(--sidebar-border);
border-radius: 4px;
}
/* ── Footer ── */
.sidebar-footer {
padding: var(--space-3) var(--space-5);
border-top: 1px solid var(--sidebar-border);
flex-shrink: 0;
}
/* ── Nav links inside sidebar ── */
.sidebar-nav {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.sidebar-link {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
color: var(--color-muted-light);
font-size: var(--fs-sm);
font-weight: 500;
text-decoration: none;
transition: background var(--ease-fast), color var(--ease-fast);
cursor: pointer;
border: none;
background: none;
width: 100%;
text-align: left;
position: relative;
}
.sidebar-link:hover {
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
color: var(--color-light);
}
/* Active state — left accent bar */
.sidebar-link.is-active {
background: color-mix(in srgb, var(--color-primary) 14%, transparent);
color: var(--color-primary);
font-weight: 600;
}
.sidebar-link.is-active::before {
content: '';
position: absolute;
left: 0;
top: 20%;
height: 60%;
width: 3px;
background: var(--color-primary);
border-radius: 0 3px 3px 0;
}
.sidebar-link svg { flex-shrink: 0; opacity: 0.65; }
.sidebar-link.is-active svg { opacity: 1; }
/* ── Section label ── */
.sidebar-label {
font-size: var(--fs-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.9px;
color: var(--color-muted);
padding: var(--space-4) var(--space-4) var(--space-1);
}
/* ── Divider ── */
.sidebar-divider {
height: 1px;
background: var(--sidebar-border);
margin: var(--space-2) 0;
}
/* ══════════════════════════════════════════
VARIANT: RIGHT
══════════════════════════════════════════ */
.sidebar.sidebar-right {
left: auto;
right: 0;
border-right: none;
border-left: 1px solid var(--sidebar-border);
transform: translateX(100%);
}
.sidebar.sidebar-right.is-open {
transform: translateX(0);
}
/* ══════════════════════════════════════════
VARIANT: PUSH (shifts page content)
Requires .sidebar-layout wrapper
══════════════════════════════════════════ */
.sidebar-layout {
display: flex;
min-height: 100vh;
position: relative;
}
.sidebar-layout .sidebar.sidebar-push {
position: relative;
top: auto;
left: auto;
right: auto;
transform: translateX(0);
flex-shrink: 0;
width: 0;
overflow: hidden;
box-shadow: none;
border: none;
transition: width var(--sidebar-duration) var(--sidebar-ease);
z-index: 1;
}
.sidebar-layout .sidebar.sidebar-push.is-open {
width: var(--sidebar-width);
border-right: 1px solid var(--sidebar-border);
box-shadow: none;
}
.sidebar-layout .sidebar.sidebar-push.sidebar-right {
order: 1;
}
.sidebar-layout .sidebar.sidebar-push.sidebar-right.is-open {
border-left: 1px solid var(--sidebar-border);
border-right: none;
}
.sidebar-content {
flex: 1;
min-width: 0;
transition: none;
}
/* ══════════════════════════════════════════
VARIANT: FULLPAGE
══════════════════════════════════════════ */
.sidebar.sidebar-fullpage {
width: 100vw;
border: none;
transform: translateX(-100%);
}
.sidebar.sidebar-fullpage.is-open {
transform: translateX(0);
box-shadow: none;
}
.sidebar.sidebar-fullpage .sidebar-header {
padding: var(--space-5) var(--space-8);
border: none;
min-height: 72px;
}
/* Fullpage body — vertically and horizontally centered */
.sidebar-fullpage-body {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-8);
overflow-y: auto;
}
/* Fullpage nav */
.sidebar-fullpage-nav {
display: flex;
flex-direction: column;
gap: var(--space-2);
width: 100%;
max-width: 400px;
}
.sidebar-fullpage-link {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
font-size: var(--fs-xl);
font-weight: 700;
color: var(--color-muted-light);
text-decoration: none;
border-radius: var(--radius-lg);
transition: background var(--ease-fast), color var(--ease-fast), transform 0.18s var(--sidebar-ease);
position: relative;
}
.sidebar-fullpage-link:hover {
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
color: var(--color-primary);
transform: translateX(10px);
}
.sidebar-fullpage-link::before {
content: '';
position: absolute;
left: 0;
top: 20%;
height: 60%;
width: 3px;
background: var(--color-primary);
border-radius: 0 3px 3px 0;
transform: scaleY(0);
transition: transform 0.18s var(--sidebar-ease);
}
.sidebar-fullpage-link:hover::before { transform: scaleY(1); }
.sidebar-fullpage-link svg { flex-shrink: 0; opacity: 0.6; }
.sidebar-fullpage-link:hover svg { opacity: 1; }
/* Fullpage footer */
.sidebar-fullpage-footer {
padding: var(--space-6) var(--space-8);
border: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
}
.sidebar-social-links {
display: flex;
gap: var(--space-3);
}
.sidebar-social-link {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-full);
color: var(--color-muted);
background: color-mix(in srgb, var(--color-neutral-600) 15%, transparent);
text-decoration: none;
transition: background var(--ease-fast), color var(--ease-fast);
}
.sidebar-social-link:hover {
background: color-mix(in srgb, var(--color-primary) 15%, transparent);
color: var(--color-primary);
}
.sidebar-social-link svg { pointer-events: none; }
/* ══════════════════════════════════════════
BACKDROP
══════════════════════════════════════════ */
.sidebar-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.48);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
z-index: calc(var(--z-modal) - 2);
animation: sidebar-backdrop-in 0.22s ease forwards;
}
.sidebar-backdrop.is-visible { display: block; }
@keyframes sidebar-backdrop-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* ── Prevent body scroll when overlay sidebar is open ── */
body.sidebar-open { overflow: hidden; }
/* ══════════════════════════════════════════
VARIANT: PUSH RIGHT
Same as push left but sidebar slides from right.
Wrap page in .sidebar-layout:
══════════════════════════════════════════ */
/* Already handled by .sidebar-push.sidebar-right rules above */
/* ══════════════════════════════════════════
VARIANT: MINI / ICON RAIL
Always-visible rail that collapses to icons.
Use inside .sidebar-layout + add .sidebar-push.
Toggle with sidebarExpandToggle('id').
Wrap text in