Refactor: Implement DashboardLayout, fix mobile nav, and resolve scroll issues

components/layout/DashboardLayout.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import { ReactNode, useEffect } from 'react'
+import { Sidebar, Header, MobileNav } from '@/components/layout'
+import { useSidebar } from '@/app/providers'
+import { useAlerts } from '@/components/alerts'
+
+interface DashboardLayoutProps {
+  children: ReactNode
+  title: string
+}
+
+export function DashboardLayout({ children, title }: DashboardLayoutProps) {
+  const { isOpen, toggle, close, open } = useSidebar()
+  const { unreadCount } = useAlerts()
+
+  // Ensure sidebar is open on desktop mount
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth >= 1024) {
+        open()
+      } else {
+        close()
+      }
+    }
+
+    // Initial check
+    handleResize()
+
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [open, close])
+
+  return (
+    <div className="flex min-h-screen bg-slate-950">
+      {/* Sidebar */}
+      <Sidebar
+        isOpen={isOpen}
+        onClose={close}
+        unreadAlertsCount={unreadCount}
+      />
+
+      {/* Main content wrapper */}
+      <div className="flex flex-1 flex-col lg:ml-0 min-w-0">
+        {/* Header */}
+        <Header onMenuClick={toggle} title={title} />
+
+        {/* Page content */}
+        <main className="flex-1 p-4 md:p-6 lg:p-8 pb-24 lg:pb-8">
+          <div className="mx-auto max-w-7xl h-full">
+            {children}
+          </div>
+        </main>
+      </div>
+
+      {/* Mobile Navigation */}
+      <MobileNav unreadAlertsCount={unreadCount} />
+    </div>
+  )
+}