From 1c0ed05ac90c057cb9be7d9e3fdf775c692eff3d Mon Sep 17 00:00:00 2001
From: Zac Gaetano <zgaetano@wilddragon.net>
Date: Thu, 21 May 2026 12:30:38 -0400
Subject: [PATCH] =?UTF-8?q?web-ui:=20wave-1=20foundation=20=E2=80=94=20ser?=
 =?UTF-8?q?vices/web-ui/src/css/components/sidebar.css?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web-ui/src/css/components/sidebar.css     | 119 ++++++++++++++++++
 1 file changed, 119 insertions(+)
 create mode 100644 services/web-ui/src/css/components/sidebar.css

diff --git a/services/web-ui/src/css/components/sidebar.css b/services/web-ui/src/css/components/sidebar.css
new file mode 100644
index 0000000..cef1e91
--- /dev/null
+++ b/services/web-ui/src/css/components/sidebar.css
@@ -0,0 +1,119 @@
+/* sidebar.css ─ flat app navigation rail (200px, 28px rows) */
+
+.wd-sidebar {
+  width: var(--sidebar-w);
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-panel);
+  border-right: 1px solid var(--border);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.wd-sidebar-header {
+  height: var(--topbar-h);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--border-faint);
+  flex-shrink: 0;
+}
+.wd-sidebar-logo  { width: 18px; height: 18px; }
+.wd-sidebar-brand { font: 600 13px/1 var(--font); letter-spacing: -0.01em; color: var(--text-primary); }
+
+.wd-sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  padding: 8px 0;
+  gap: 1px;
+}
+
+.wd-sidebar-section {
+  font: 600 10px/1 var(--font);
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--text-tertiary);
+  padding: 16px 12px 4px;
+}
+
+.wd-nav-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 28px;
+  padding: 0 8px 0 16px;     /* extra left padding for the accent-dot indent */
+  font: 500 13px/1 var(--font);
+  color: var(--text-secondary);
+  text-decoration: none;
+  transition: background-color 120ms cubic-bezier(0.25, 1, 0.5, 1),
+              color           120ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+.wd-nav-item:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+.wd-nav-item svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-tertiary); }
+.wd-nav-item:hover svg { color: var(--text-secondary); }
+
+.wd-nav-item.is-active {
+  background: var(--bg-surface);
+  color: var(--text-primary);
+}
+.wd-nav-item.is-active svg { color: var(--text-primary); }
+
+/* 4px leading accent dot — NOT a side-stripe border (banned).
+ * Vertically centered, 8px tall, 4px from the left edge. */
+.wd-nav-item.is-active::before {
+  content: '';
+  position: absolute;
+  left: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 8px;
+  border-radius: 2px;
+  background: var(--accent);
+}
+
+/* IN DEV pill (auth-guard.js injects this) */
+.wd-nav-item .nav-dev-badge {
+  margin-left: auto;
+  font: 700 9px/1 var(--font);
+  letter-spacing: 0.12em;
+  padding: 2px 5px;
+  border-radius: 3px;
+  background: oklch(28% 0.14 80 / 0.45);
+  color: oklch(85% 0.16 85);
+  border: 1px solid oklch(50% 0.16 80 / 0.55);
+  text-transform: uppercase;
+  flex-shrink: 0;
+}
+
+/* Footer user widget */
+.wd-sidebar-footer {
+  margin-top: auto;
+  padding: 12px;
+  border-top: 1px solid var(--border-faint);
+}
+.wd-sidebar-user {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.wd-sidebar-user-avatar {
+  width: 28px; height: 28px;
+  border-radius: 50%;
+  background: var(--bg-surface);
+  display: flex; align-items: center; justify-content: center;
+  font: 600 11px/1 var(--font);
+  color: var(--text-secondary);
+  flex-shrink: 0;
+}
+.wd-sidebar-user-info { flex: 1; min-width: 0; }
+.wd-sidebar-user-name { font: 500 12px/1.3 var(--font); color: var(--text-primary); }
+.wd-sidebar-user-role { font: 500 10px/1.3 var(--font); color: var(--text-tertiary); letter-spacing: 0.06em; text-transform: uppercase; }
+.wd-sidebar-user-logout { opacity: 0; transition: opacity 120ms cubic-bezier(0.25, 1, 0.5, 1); }
+.wd-sidebar-user:hover .wd-sidebar-user-logout { opacity: 1; }