Sidebar

Vertical navigation or contextual panel.

html

<div class="sb-demo sb-demo--left">
  <aside class="sb-demo__aside" style="width:160px;">
    <div class="sb-demo__title" style="border-color:#A8E6C1;">Workspace</div>
    <div class="sb-demo__item" style="background:#A8E6C1;"></div>
    <div class="sb-demo__item"></div>
    <div class="sb-demo__item"></div>
  </aside>
  <main class="sb-demo__main">Main content</main>
</div>
<style>
.sb-demo { display: flex; height: 150px; font: 13px system-ui, sans-serif; color: #241430; border: 1px solid #24143022; }
.sb-demo--right { flex-direction: row-reverse; }
.sb-demo__aside { flex: none; box-sizing: border-box; background: #241430; color: #FAF7F2; padding: 12px 10px; overflow: hidden; }
.sb-demo__aside--collapsed { width: 48px !important; }
@media (prefers-reduced-motion: no-preference) {
  .sb-demo__aside { transition: width .15s; }
}
.sb-demo__title { font-weight: 700; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid; white-space: nowrap; }
.sb-demo__item { height: 8px; border-radius: 4px; background: #FAF7F233; margin-bottom: 8px; }
.sb-demo__main { flex: 1; background: #FAF7F2; display: flex; align-items: center; justify-content: center; color: #24143066; }
</style>

tailwind

<div class="flex h-[150px] font-sans text-[13px] text-[#241430] border border-[#24143022] sb-tw sb-tw--left">
  <aside class="flex-none box-border bg-[#241430] text-[#FAF7F2] px-2.5 py-3 overflow-hidden motion-safe:transition-[width] motion-safe:duration-150 sb-tw__aside" style="width:160px;">
    <div class="font-bold mb-2.5 pb-2 border-b-2 whitespace-nowrap" style="border-color:#A8E6C1;">Workspace</div>
    <div class="h-2 rounded mb-2" style="background:#A8E6C1;"></div>
    <div class="h-2 rounded mb-2 bg-[#FAF7F2]/20"></div>
    <div class="h-2 rounded mb-2 bg-[#FAF7F2]/20"></div>
  </aside>
  <main class="flex-1 bg-[#FAF7F2] flex items-center justify-center text-[#24143066]">Main content</main>
</div>
<style>
.sb-tw--right { flex-direction: row-reverse; }
.sb-tw__aside--collapsed { width: 48px !important; }
</style>

react

export function Sidebar({
  title = "Workspace",
  side = "left",
  width = 160,
  collapsed = false,
  accent = "#A8E6C1",
}) {
  const w = collapsed ? 48 : width;
  return (
    <div style={{ display: "flex", flexDirection: side === "right" ? "row-reverse" : "row", height: 150, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430", border: "1px solid #24143022" }}>
      <aside className="sidebar-aside" style={{ flex: "none", boxSizing: "border-box", width: w, background: "#241430", color: "#FAF7F2", padding: "12px 10px", overflow: "hidden" }}>
        <div style={{ fontWeight: 700, marginBottom: 10, paddingBottom: 8, borderBottom: `2px solid ${accent}`, whiteSpace: "nowrap" }}>{!collapsed && title}</div>
        <div style={{ height: 8, borderRadius: 4, background: accent, marginBottom: 8 }} />
        <div style={{ height: 8, borderRadius: 4, background: "#FAF7F233", marginBottom: 8 }} />
        <div style={{ height: 8, borderRadius: 4, background: "#FAF7F233", marginBottom: 8 }} />
      </aside>
      <main style={{ flex: 1, background: "#FAF7F2", display: "flex", alignItems: "center", justifyContent: "center", color: "#24143066" }}>Main content</main>
      <style>{`
        @media (prefers-reduced-motion: no-preference) {
          .sidebar-aside { transition: width .15s; }
        }
      `}</style>
    </div>
  );
}