Fix main content padding when sidebar collapses (#120)

* Initial plan

* Add sidebar context and dynamic padding based on collapse state

Co-authored-by: Boshen <1430279+Boshen@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Boshen <1430279+Boshen@users.noreply.github.com>

Author: Copilot

apps/dashboard/src/App.tsx

@@ -1,6 +1,7 @@
 import { lazy, Suspense } from "react";
 import { Route, Routes } from "react-router-dom";
 import Layout from "./components/Layout";
+import { SidebarProvider } from "./context/SidebarContext";
 
 // Lazy load all page components for code-splitting
 const HomePage = lazy(() => import("./pages/HomePage"));
@@ -18,50 +19,52 @@ const PageLoader = () => (
 
 function App() {
   return (
-    <Routes>
-      <Route path="/" element={<Layout />}>
-        <Route
-          index
-          element={
-            <Suspense fallback={<PageLoader />}>
-              <HomePage />
-            </Suspense>
-          }
-        />
-        <Route
-          path="rolldown-stats"
-          element={
-            <Suspense fallback={<PageLoader />}>
-              <RolldownStatsPage />
-            </Suspense>
-          }
-        />
-        <Route
-          path="minification"
-          element={
-            <Suspense fallback={<PageLoader />}>
-              <MinificationBenchmarksPage />
-            </Suspense>
-          }
-        />
-        <Route
-          path="npm-packages"
-          element={
-            <Suspense fallback={<PageLoader />}>
-              <NpmPackagesPage />
-            </Suspense>
-          }
-        />
-        <Route
-          path="dependents"
-          element={
-            <Suspense fallback={<PageLoader />}>
-              <DependentsPage />
-            </Suspense>
-          }
-        />
-      </Route>
-    </Routes>
+    <SidebarProvider>
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route
+            index
+            element={
+              <Suspense fallback={<PageLoader />}>
+                <HomePage />
+              </Suspense>
+            }
+          />
+          <Route
+            path="rolldown-stats"
+            element={
+              <Suspense fallback={<PageLoader />}>
+                <RolldownStatsPage />
+              </Suspense>
+            }
+          />
+          <Route
+            path="minification"
+            element={
+              <Suspense fallback={<PageLoader />}>
+                <MinificationBenchmarksPage />
+              </Suspense>
+            }
+          />
+          <Route
+            path="npm-packages"
+            element={
+              <Suspense fallback={<PageLoader />}>
+                <NpmPackagesPage />
+              </Suspense>
+            }
+          />
+          <Route
+            path="dependents"
+            element={
+              <Suspense fallback={<PageLoader />}>
+                <DependentsPage />
+              </Suspense>
+            }
+          />
+        </Route>
+      </Routes>
+    </SidebarProvider>
   );
 }
 

apps/dashboard/src/components/Layout.tsx

@@ -1,8 +1,11 @@
 import { Outlet } from "react-router-dom";
 import { AppBar } from "./layout/AppBar";
 import { Sidebar } from "./layout/Sidebar";
+import { useSidebar } from "../context/SidebarContext";
 
 function Layout() {
+  const { collapsed } = useSidebar();
+
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-purple-50/30 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950 relative overflow-hidden">
       {/* Background decorative elements */}
@@ -12,7 +15,7 @@ function Layout() {
       <Sidebar />
 
       {/* Main Content Area */}
-      <div className="lg:pl-64 transition-all duration-300 relative z-10">
+      <div className={`${collapsed ? "lg:pl-20" : "lg:pl-64"} transition-all duration-300 relative z-10`}>
         <div className="flex flex-col h-screen">
           <AppBar />
 

apps/dashboard/src/components/layout/Sidebar.tsx

@@ -1,6 +1,7 @@
 import { BarChart3, ChevronLeft, Download, GitBranch, Home, Menu, Package, X, Zap } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Link, useLocation } from "react-router-dom";
+import { useSidebar } from "../../context/SidebarContext";
 
 interface NavItem {
   path: string;
@@ -39,7 +40,7 @@ const navItems: NavItem[] = [
 
 export function Sidebar() {
   const location = useLocation();
-  const [collapsed, setCollapsed] = useState(false);
+  const { collapsed, setCollapsed } = useSidebar();
   const [mobileOpen, setMobileOpen] = useState(false);
   // Auto-detect dark mode from system preferences
   useEffect(() => {

apps/dashboard/src/context/SidebarContext.tsx

@@ -0,0 +1,26 @@
+import { createContext, useContext, useState } from "react";
+
+interface SidebarContextType {
+  collapsed: boolean;
+  setCollapsed: (collapsed: boolean) => void;
+}
+
+const SidebarContext = createContext<SidebarContextType | undefined>(undefined);
+
+export function SidebarProvider({ children }: { children: React.ReactNode }) {
+  const [collapsed, setCollapsed] = useState(false);
+
+  return (
+    <SidebarContext.Provider value={{ collapsed, setCollapsed }}>
+      {children}
+    </SidebarContext.Provider>
+  );
+}
+
+export function useSidebar() {
+  const context = useContext(SidebarContext);
+  if (context === undefined) {
+    throw new Error("useSidebar must be used within a SidebarProvider");
+  }
+  return context;
+}