From 36a95609ff22c7cd6f3db717f5a333ae198d2001 Mon Sep 17 00:00:00 2001
From: saravanakumardb1 <saravanakumardb1@users.noreply.github.com>
Date: Sat, 28 Mar 2026 00:50:31 -0700
Subject: [PATCH] chore(design-system): add responsive sidebar CSS breakpoints
 (768px collapse)

---
 web/src/app/globals.css | 72 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)

diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index be5ebb2..b2d1d8f 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -247,3 +247,75 @@ button {
     --nl-text-tertiary: #94A3B8;
   }
 }
+
+/* ── Responsive Sidebar ──────────────────────────────────────── */
+
+.app-layout {
+  display: flex;
+  min-height: 100vh;
+}
+
+.app-sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  z-index: 40;
+  transition: transform 0.22s ease;
+}
+
+.app-sidebar-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.5);
+  z-index: 39;
+}
+
+.app-main {
+  flex: 1;
+  min-width: 0;
+}
+
+@media (max-width: 768px) {
+  .app-sidebar {
+    transform: translateX(-100%);
+  }
+  .app-sidebar[data-open="true"] {
+    transform: translateX(0);
+  }
+  .app-sidebar-overlay[data-open="true"] {
+    display: block;
+  }
+  .app-main {
+    margin-left: 0 !important;
+  }
+}
+
+@media (min-width: 769px) {
+  .app-sidebar {
+    transform: translateX(0);
+  }
+}
+
+.mobile-menu-btn {
+  display: none;
+  position: fixed;
+  top: 12px;
+  left: 12px;
+  z-index: 38;
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  font-size: 20px;
+  align-items: center;
+  justify-content: center;
+}
+
+@media (max-width: 768px) {
+  .mobile-menu-btn {
+    display: flex;
+  }
+}