. * em-layout = flex row with [aside.em-sidebar | div.em-content]. * Theme-aware via em-base.css's [data-theme] tokens. */ :root { --em-sidebar-width: 240px; --em-topbar-height: 60px; /* Light-theme defaults */ --em-sidebar-bg: #ffffff; --em-sidebar-border: #e2e8f0; --em-sidebar-section-label: #64748b; --em-sidebar-link: #475569; --em-sidebar-link-hover-bg: #f1f5f9; --em-sidebar-link-hover-text: #0f172a; --em-sidebar-link-active-bg: #e0e7ff; --em-sidebar-link-active-text: #1e40af; --em-sidebar-footer-text: #64748b; --em-sidebar-footer-dot: #22c55e; --em-content-bg: #f8fafc; } [data-theme="dark"] { --em-sidebar-bg: #0b1426; --em-sidebar-border: #1e293b; --em-sidebar-section-label: #64748b; --em-sidebar-link: #94a3b8; --em-sidebar-link-hover-bg: rgba(255, 255, 255, 0.04); --em-sidebar-link-hover-text: #e2e8f0; --em-sidebar-link-active-bg: rgba(59, 130, 246, 0.15); --em-sidebar-link-active-text: #93c5fd; --em-sidebar-footer-text: #64748b; --em-sidebar-footer-dot: #22c55e; --em-content-bg: #020617; } .em-layout { display: flex; align-items: stretch; min-height: calc(100vh - var(--em-topbar-height)); background-color: var(--em-content-bg); } .em-sidebar { width: var(--em-sidebar-width); flex: 0 0 var(--em-sidebar-width); background-color: var(--em-sidebar-bg); border-right: 1px solid var(--em-sidebar-border); padding: 1rem 0; display: flex; flex-direction: column; } .em-sidebar__nav { flex: 1; overflow-y: auto; } .em-sidebar__section { margin-bottom: 1.25rem; } .em-sidebar__section-label { font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--em-sidebar-section-label); padding: 0 1rem; margin-bottom: 0.25rem; } .em-sidebar__item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1rem; font-size: 0.875rem; color: var(--em-sidebar-link); text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; } .em-sidebar__item:hover, .em-sidebar__item:focus { background-color: var(--em-sidebar-link-hover-bg); color: var(--em-sidebar-link-hover-text); text-decoration: none; } .em-sidebar__item.is-active { background-color: var(--em-sidebar-link-active-bg); color: var(--em-sidebar-link-active-text); font-weight: 500; } .em-sidebar__icon { width: 16px; height: 16px; flex-shrink: 0; stroke-width: 2; } .em-sidebar__footer { border-top: 1px solid var(--em-sidebar-border); padding: 0.75rem 1rem; font-size: 0.75rem; color: var(--em-sidebar-footer-text); display: flex; align-items: center; gap: 0.5rem; } .em-sidebar__footer-dot { width: 8px; height: 8px; border-radius: 50%; background-color: var(--em-sidebar-footer-dot); flex-shrink: 0; } .em-sidebar__footer-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .em-content { flex: 1 1 auto; min-width: 0; } /* Mobile: hide sidebar (could later be turned into off-canvas drawer). */ @media (max-width: 768px) { .em-sidebar { display: none; } }