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" />
             </>
         );
     },

frontend/src/routes/_auth.tsx

@@ -2,8 +2,9 @@ import {createFileRoute, redirect} from "@tanstack/react-router";
 
 // src/routes/_authenticated.tsx
 export const Route = createFileRoute("/_auth")({
-    beforeLoad: async ({context}) => {
-        if (!context.sessionType.session) {
+    beforeLoad: async () => {
+        const auth = localStorage.getItem("auth_token");
+        if (!auth) {
             throw redirect({
                 to: "/",
             });

frontend/src/routes/_auth/dashboard.tsx

@@ -1,9 +1,16 @@
-import { createFileRoute } from '@tanstack/react-router'
+import {createFileRoute} from "@tanstack/react-router";
+import {Button} from "../../components/ui/button";
+import {useLogout} from "../../lib/hooks/useLogout";
 
-export const Route = createFileRoute('/_auth/dashboard')({
-  component: RouteComponent,
-})
+export const Route = createFileRoute("/_auth/dashboard")({
+    component: RouteComponent,
+});
 
 function RouteComponent() {
-  return <div>Hello "/_auth/dashboard"!</div>
+    const logout = useLogout();
+    return (
+        <div>
+            Hello "/_auth/dashboard"!<Button onClick={() => logout()}>Logout</Button>
+        </div>
+    );
 }

frontend/src/routes/index.tsx

@@ -3,6 +3,7 @@ import LoginForm from "../components/auth/LoginForm";
 import {Button} from "../components/ui/button";
 import {useLogout} from "../lib/hooks/useLogout";
 import {useSession} from "../lib/hooks/useSession";
+import {useSessionStore} from "../lib/store/sessionStore";
 
 export const Route = createFileRoute("/")({
     component: Index,
@@ -10,20 +11,20 @@ export const Route = createFileRoute("/")({
 
 function Index() {
     const {session} = useSession();
+    const {user} = useSessionStore();
     const logout = useLogout();
     return (
         <div className="p-2">
-            <h3>Welcome Home!</h3>
-            <br></br>
-            <p>
-                {session ? (
-                    <>
-                        <Button onClick={() => logout()}>Logout</Button>{" "}
-                    </>
-                ) : (
-                    <LoginForm />
-                )}
-            </p>
+            {session ? (
+                <>
+                    <h3>Welcome Home {user?.username}</h3>
+                    <p>Your current role is: {user?.role}</p>
+                    <br></br>
+                    <Button onClick={() => logout()}>Logout</Button>{" "}
+                </>
+            ) : (
+                <LoginForm />
+            )}
         </div>
     );
 }