refactor(lst): added side bar plus dummy menus

frontend/src/routes/__root.tsx

@@ -1,41 +1,31 @@
-import {createRootRouteWithContext, Link, Outlet} from "@tanstack/react-router";
+import {createRootRoute, Outlet} from "@tanstack/react-router";
 import {TanStackRouterDevtools} from "@tanstack/router-devtools";
-import {SessionType} from "../lib/hooks/useSession";
+import Cookies from "js-cookie";
+import {SidebarProvider} from "../components/ui/sidebar";
+import {ThemeProvider} from "../components/layout/theme-provider";
+import {ModeToggle} from "../components/layout/mode-toggle";
+import {AppSidebar} from "../components/layout/lst-sidebar";
 
-type RouterContext = {
-    sessionType: SessionType;
-};
 // same as the layout
-export const Route = createRootRouteWithContext<RouterContext>()({
+export const Route = createRootRoute({
     component: () => {
+        const sidebarState = Cookies.get("sidebar_state") === "true";
+
         return (
             <>
-                <div className="p-2 flex gap-2">
-                    <Link to="/" className="[&.active]:font-bold">
-                        Home
-                    </Link>{" "}
-                    <Link to="/about" className="[&.active]:font-bold">
-                        About
-                    </Link>
-                    <Link to="/dashboard" className="[&.active]:font-bold">
-                        dashboard
-                    </Link>
-                    <Link to="/profile" className="[&.active]:font-bold">
-                        {({isActive}) => <>Profile {isActive && "~"}</>}
-                    </Link>
-                    <Link
-                        to="/ocp"
-                        search={{q: "1"}}
-                        activeProps={{style: {fontWeight: "bold"}}}
-                        className="[&.active]:font-bold"
-                    >
-                        {({isActive}) => <>OCP {isActive && "~"}</>}
-                    </Link>
-                </div>
-                <hr />
-                <Outlet />
+                <ThemeProvider>
+                    <nav className="flex justify-end">
+                        <div className="m-2">
+                            <ModeToggle />
+                        </div>
+                    </nav>
+                    <SidebarProvider defaultOpen={sidebarState}>
+                        <AppSidebar />
+                        <Outlet />
+                    </SidebarProvider>
+                </ThemeProvider>
 
-                <TanStackRouterDevtools />
+                <TanStackRouterDevtools position="bottom-right" />
             </>
         );
     },