logs route behind protected route and menu

frontend/src/routes/__root.tsx

@@ -1,20 +1,29 @@
-import { createRootRoute, Link, Outlet } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+import { createRootRoute, Outlet } from "@tanstack/react-router";
+import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
+import Header from "@/components/Header";
+import { AppSidebar } from "@/components/Sidebar/sidebar";
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+import { Toaster } from "@/components/ui/sonner";
+import { ThemeProvider } from "@/lib/theme-provider";
 
 const RootLayout = () => (
-  <>
-    <div className="p-2 flex gap-2">
-      <Link to="/" className="[&.active]:font-bold">
-        Home
-      </Link>{' '}
-      <Link to="/about" className="[&.active]:font-bold">
-        About
-      </Link>
-    </div>
-    <hr />
-    <Outlet />
-    <TanStackRouterDevtools />
-  </>
-)
+	<div className="[--header-height:calc(--spacing(14))]">
+		<ThemeProvider>
+			<SidebarProvider className="flex flex-col" defaultOpen={false}>
+				<Header />
+				<div className="flex flex-1">
+					<AppSidebar />
 
-export const Route = createRootRoute({ component: RootLayout })
+					<SidebarInset>
+						<Outlet />
+					</SidebarInset>
+				</div>
+
+				<Toaster expand richColors closeButton />
+			</SidebarProvider>
+		</ThemeProvider>
+		<TanStackRouterDevtools />
+	</div>
+);
+
+export const Route = createRootRoute({ component: RootLayout });