From e362f2aefe9e90ec28f26ad039986ba58509470c Mon Sep 17 00:00:00 2001
From: saravanakumardb1 <saravanakumardb1@users.noreply.github.com>
Date: Sat, 28 Mar 2026 23:30:02 -0700
Subject: [PATCH] feat(web): add responsive sidebar CSS breakpoints for mobile

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

diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index 9cebe07..b917486 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -236,6 +236,27 @@ button:active:not(:disabled), [role="button"]:active:not(:disabled) {
   border: 2px solid var(--nl-accent); border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none;
 }
 
+/* Responsive sidebar */
+@media (max-width: 768px) {
+  .app-sidebar {
+    position: fixed;
+    left: -260px;
+    top: 0;
+    z-index: 40;
+    width: 240px;
+    height: 100vh;
+    transition: left 0.2s ease;
+  }
+  .app-sidebar.open { left: 0; }
+  .sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 39; background: rgba(0,0,0,0.5); }
+  .sidebar-overlay.open { display: block; }
+  .sidebar-toggle { display: flex; }
+}
+@media (min-width: 769px) {
+  .sidebar-toggle { display: none; }
+  .sidebar-overlay { display: none; }
+}
+
 /* Respect user motion preference */
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {