feat(frontend): sidebar migration started

frontend/src/routes/__root.tsx

@@ -2,8 +2,12 @@ import { createRootRouteWithContext, Outlet } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 import type { QueryClient } from "@tanstack/react-query";
 import { Toaster } from "sonner";
+import Cookies from "js-cookie";
 import { SessionGuard } from "../lib/providers/SessionProvider";
 import Nav from "../components/navBar/Nav";
+import { ThemeProvider } from "../lib/providers/theme-provider";
+import { SidebarProvider } from "../components/ui/sidebar";
+import SideBarNav from "../components/navBar/SideBarNav";
 
 interface RootRouteContext {
     queryClient: QueryClient;
@@ -15,13 +19,25 @@ interface RootRouteContext {
 const RootLayout = () => {
     //const { logout, login } = Route.useRouteContext();
 
+    const defaultOpen = Cookies.get("sidebar_state") === "true";
     return (
         <div>
             <SessionGuard>
-                <Nav />
-                <Outlet />
-                <Toaster expand={true} richColors closeButton />
-                <TanStackRouterDevtools />
+                <ThemeProvider>
+                    <div className="flex flex-col h-screen overflow-hidden">
+                        <Nav />
+                        <div className="flex flex-1 overflow-hidden">
+                            <SidebarProvider defaultOpen={defaultOpen}>
+                                <SideBarNav />
+                                <div className="flex-1 overflow-y-auto">
+                                    <Outlet />
+                                </div>
+                            </SidebarProvider>
+                        </div>
+                        <Toaster expand richColors closeButton />
+                        <TanStackRouterDevtools />
+                    </div>
+                </ThemeProvider>
             </SessionGuard>
         </div>
     );