feat: add proper mobile responsive layout

Mobile behavior (< 1024px / lg breakpoint):
- Sidebar hidden by default
- Hamburger menu in navbar opens sidebar as overlay
- Dark backdrop behind sidebar when open
- Tap backdrop or press Escape to close
- Auto-closes when navigating to a new page
- Body scroll locked when menu is open
- Full-width sidebar with close button

Desktop behavior (>= 1024px):
- Sidebar always visible
- Can be collapsed to icon-only mode
- Collapse toggle in sidebar footer

Also:
- Added --mobile-breakpoint CSS variable for consistency
- Reduced padding on mobile (p-4) vs desktop (md:p-6)
- Main content has no left margin on mobile

Author: DevanshuNEU

frontend/src/components/dashboard/DashboardLayout.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { Outlet } from 'react-router-dom'
+import { Outlet, useLocation } from 'react-router-dom'
 import { Sidebar } from './Sidebar'
 import { TopNav } from './TopNav'
 import { CommandPalette } from './CommandPalette'
@@ -15,7 +15,9 @@ const SIDEBAR_STORAGE_KEY = 'codeintel-sidebar-collapsed'
 
 export function DashboardLayout({ children }: DashboardLayoutProps) {
   const { theme } = useTheme()
+  const location = useLocation()
 
+  // Desktop: collapsed state (narrow sidebar)
   const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
     try {
       const stored = localStorage.getItem(SIDEBAR_STORAGE_KEY)
@@ -24,8 +26,12 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
       return false
     }
   })
+  
+  // Mobile: open/closed state (overlay)
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
   const [commandPaletteOpen, setCommandPaletteOpen] = useState(false)
 
+  // Persist desktop collapsed state
   useEffect(() => {
     try {
       localStorage.setItem(SIDEBAR_STORAGE_KEY, JSON.stringify(sidebarCollapsed))
@@ -34,6 +40,30 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
     }
   }, [sidebarCollapsed])
 
+  // Close mobile menu on route change
+  useEffect(() => {
+    setMobileMenuOpen(false)
+  }, [location.pathname])
+
+  // Close mobile menu on escape key
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setMobileMenuOpen(false)
+    }
+    document.addEventListener('keydown', handleEscape)
+    return () => document.removeEventListener('keydown', handleEscape)
+  }, [])
+
+  // Prevent body scroll when mobile menu is open
+  useEffect(() => {
+    if (mobileMenuOpen) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = ''
+    }
+    return () => { document.body.style.overflow = '' }
+  }, [mobileMenuOpen])
+
   useKeyboardShortcut(SHORTCUTS.COMMAND_PALETTE, () => {
     setCommandPaletteOpen(true)
   })
@@ -42,26 +72,50 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
     setSidebarCollapsed((prev: boolean) => !prev)
   })
 
+  const handleToggleSidebar = () => {
+    // On mobile: toggle overlay menu
+    // On desktop: toggle collapsed state
+    if (window.innerWidth < 1024) {
+      setMobileMenuOpen(!mobileMenuOpen)
+    } else {
+      setSidebarCollapsed(!sidebarCollapsed)
+    }
+  }
+
   return (
     <div className="min-h-screen bg-background">
       <TopNav 
-        onToggleSidebar={() => setSidebarCollapsed(!sidebarCollapsed)}
+        onToggleSidebar={handleToggleSidebar}
         sidebarCollapsed={sidebarCollapsed}
         onOpenCommandPalette={() => setCommandPaletteOpen(true)}
       />
 
       <div className="flex">
+        {/* Mobile backdrop */}
+        {mobileMenuOpen && (
+          <div 
+            className="fixed inset-0 z-30 bg-black/50 lg:hidden"
+            onClick={() => setMobileMenuOpen(false)}
+            aria-hidden="true"
+          />
+        )}
+
         <Sidebar 
           collapsed={sidebarCollapsed} 
-          onToggle={() => setSidebarCollapsed(!sidebarCollapsed)}
+          onToggle={handleToggleSidebar}
+          mobileOpen={mobileMenuOpen}
+          onMobileClose={() => setMobileMenuOpen(false)}
         />
 
+        {/* Main content - no margin on mobile, dynamic margin on desktop */}
         <main 
-          className={`flex-1 transition-all duration-300 pt-[var(--navbar-height)] ${
-            sidebarCollapsed ? 'ml-[var(--sidebar-width-collapsed)]' : 'ml-[var(--sidebar-width)]'
-          }`}
+          className={`
+            flex-1 transition-all duration-300 pt-[var(--navbar-height)]
+            ml-0 lg:ml-[var(--sidebar-width)]
+            ${sidebarCollapsed ? 'lg:ml-[var(--sidebar-width-collapsed)]' : ''}
+          `}
         >
-          <div className="p-6">
+          <div className="p-4 md:p-6">
             {children || <Outlet />}
           </div>
         </main>

frontend/src/components/dashboard/Sidebar.tsx

@@ -6,12 +6,15 @@ import {
   BookOpen, 
   ChevronLeft, 
   ChevronRight,
-  ExternalLink
+  ExternalLink,
+  X
 } from 'lucide-react'
 
 interface SidebarProps {
   collapsed: boolean
   onToggle: () => void
+  mobileOpen?: boolean
+  onMobileClose?: () => void
 }
 
 interface NavItem {
@@ -31,7 +34,7 @@ const bottomNavItems: NavItem[] = [
   { name: 'Settings', href: '/dashboard/settings', icon: <Settings className="w-5 h-5" /> },
 ]
 
-export function Sidebar({ collapsed, onToggle }: SidebarProps) {
+export function Sidebar({ collapsed, onToggle, mobileOpen, onMobileClose }: SidebarProps) {
   const location = useLocation()
 
   const isActive = (href: string) => {
@@ -41,6 +44,11 @@ export function Sidebar({ collapsed, onToggle }: SidebarProps) {
     return location.pathname === href
   }
 
+  const handleNavClick = () => {
+    // Close mobile menu when navigating
+    onMobileClose?.()
+  }
+
   const NavLink = ({ item }: { item: NavItem }) => {
     const active = isActive(item.href)
 
@@ -52,18 +60,22 @@ export function Sidebar({ collapsed, onToggle }: SidebarProps) {
       }
     `
 
+    // On mobile, always show full labels (not collapsed)
+    const showLabels = !collapsed || mobileOpen
+
     if (item.external) {
       return (
         <a
           href={item.href}
           target="_blank"
           rel="noopener noreferrer"
           className={baseClasses}
+          onClick={handleNavClick}
         >
           <span className={active ? 'text-primary' : 'text-muted-foreground group-hover:text-foreground'}>
             {item.icon}
           </span>
-          {!collapsed && (
+          {showLabels && (
             <>
               <span className="text-sm font-medium truncate">{item.name}</span>
               <ExternalLink className="w-3 h-3 ml-auto opacity-50" />
@@ -74,26 +86,49 @@ export function Sidebar({ collapsed, onToggle }: SidebarProps) {
     }
 
     return (
-      <Link to={item.href} className={baseClasses}>
+      <Link to={item.href} className={baseClasses} onClick={handleNavClick}>
         <span className={active ? 'text-primary' : 'text-muted-foreground group-hover:text-foreground'}>
           {item.icon}
         </span>
-        {!collapsed && (
+        {showLabels && (
           <span className="text-sm font-medium truncate">{item.name}</span>
         )}
       </Link>
     )
   }
 
+  // Determine sidebar width class
+  const getWidthClass = () => {
+    if (mobileOpen) return 'w-[var(--sidebar-width)]' // Always full width on mobile when open
+    if (collapsed) return 'w-[var(--sidebar-width-collapsed)]'
+    return 'w-[var(--sidebar-width)]'
+  }
+
   return (
     <aside 
       className={`
         fixed left-0 top-[var(--navbar-height)] bottom-0 z-40 
         flex flex-col border-r border-border bg-background 
         transition-all duration-300
-        ${collapsed ? 'w-[var(--sidebar-width-collapsed)]' : 'w-[var(--sidebar-width)]'}
+        ${getWidthClass()}
+        
+        /* Mobile: hidden by default, shown when mobileOpen */
+        ${mobileOpen ? 'translate-x-0' : '-translate-x-full'}
+        lg:translate-x-0
       `}
     >
+      {/* Mobile close button */}
+      <div className="lg:hidden flex items-center justify-between p-3 border-b border-border">
+        <span className="font-semibold text-foreground">Menu</span>
+        <button
+          onClick={onMobileClose}
+          className="p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors"
+          aria-label="Close menu"
+        >
+          <X className="w-5 h-5" />
+        </button>
+      </div>
+
       <nav className="flex-1 p-3 space-y-1">
         {mainNavItems.map((item) => (
           <NavLink key={item.href} item={item} />
@@ -105,9 +140,10 @@ export function Sidebar({ collapsed, onToggle }: SidebarProps) {
           <NavLink key={item.href} item={item} />
         ))}
 
+        {/* Collapse toggle - desktop only */}
         <button
           onClick={onToggle}
-          className="flex items-center gap-3 px-3 py-2.5 w-full rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted transition-all"
+          className="hidden lg:flex items-center gap-3 px-3 py-2.5 w-full rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted transition-all"
         >
           {collapsed ? (
             <ChevronRight className="w-4 h-4" />

frontend/src/index.css

@@ -18,9 +18,12 @@ html {
 @layer base {
   :root {
     /* Layout */
-    --navbar-height: 3.5rem; /* 56px = h-14 */
-    --sidebar-width: 15rem; /* 240px = w-60 */
-    --sidebar-width-collapsed: 4rem; /* 64px = w-16 */
+    --navbar-height: 3.5rem; /* 56px */
+    --sidebar-width: 15rem; /* 240px */
+    --sidebar-width-collapsed: 4rem; /* 64px */
+    
+    /* Mobile breakpoint - sidebar hidden below this */
+    --mobile-breakpoint: 1024px; /* lg */
 
     /* Background */
     --color-bg-primary: #09090b;