104 lines
5.1 KiB
TypeScript
104 lines
5.1 KiB
TypeScript
import { createRootRoute, Link, Outlet } from "@tanstack/react-router";
|
|
//import {TanStackRouterDevtools} from "@tanstack/router-devtools";
|
|
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";
|
|
import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "../components/ui/dropdown-menu";
|
|
import { SessionProvider } from "../components/providers/Providers";
|
|
import { Toaster } from "sonner";
|
|
//import { Button } from "../components/ui/button";
|
|
|
|
import { useSessionStore } from "../lib/store/sessionStore";
|
|
import { useSession } from "@/hooks/useSession";
|
|
import { useLogout } from "@/hooks/useLogout";
|
|
import { AddCards } from "@/components/dashboard/AddCards";
|
|
|
|
// same as the layout
|
|
export const Route = createRootRoute({
|
|
component: () => {
|
|
const sidebarState = Cookies.get("sidebar_state") === "true";
|
|
const { session } = useSession();
|
|
const { user } = useSessionStore();
|
|
const logout = useLogout();
|
|
|
|
return (
|
|
<>
|
|
<SessionProvider>
|
|
<ThemeProvider>
|
|
<nav className="flex justify-end">
|
|
<div className="m-2 flex flex-row">
|
|
<div className="m-auto pr-2">
|
|
<AddCards />
|
|
</div>
|
|
<div className="m-1">
|
|
<ModeToggle />
|
|
</div>
|
|
{session ? (
|
|
<div className="m-1">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger>
|
|
<Avatar>
|
|
<AvatarImage
|
|
src="https://github.com/shadcn.png"
|
|
alt="@shadcn"
|
|
/>
|
|
<AvatarFallback>
|
|
CN
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<DropdownMenuLabel>
|
|
Hello {user?.username}
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
{/* <DropdownMenuItem>Profile</DropdownMenuItem>
|
|
<DropdownMenuItem>Billing</DropdownMenuItem>
|
|
<DropdownMenuItem>Team</DropdownMenuItem>
|
|
<DropdownMenuItem>Subscription</DropdownMenuItem> */}
|
|
<hr className="solid"></hr>
|
|
<DropdownMenuItem>
|
|
<div className="m-auto">
|
|
<button
|
|
onClick={() =>
|
|
logout()
|
|
}
|
|
>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<Link to="/login">Login</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
<SidebarProvider defaultOpen={sidebarState}>
|
|
<AppSidebar />
|
|
<Toaster expand={true} richColors closeButton />
|
|
<Outlet />
|
|
</SidebarProvider>
|
|
</ThemeProvider>
|
|
</SessionProvider>
|
|
|
|
{/* <TanStackRouterDevtools position="bottom-right" /> */}
|
|
</>
|
|
);
|
|
},
|
|
});
|