92 lines
4.4 KiB
TypeScript
92 lines
4.4 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";
|
|
|
|
// 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">
|
|
<p>Add Card</p>
|
|
</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 mt-3">
|
|
<Button onClick={() => logout()} variant="ghost">
|
|
Logout
|
|
</Button>
|
|
</div>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<Link to="/login">Login</Link>
|
|
</>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
<SidebarProvider defaultOpen={sidebarState}>
|
|
<AppSidebar />
|
|
<Toaster expand={true} richColors closeButton />
|
|
<Outlet />
|
|
</SidebarProvider>
|
|
</ThemeProvider>
|
|
</SessionProvider>
|
|
|
|
{/* <TanStackRouterDevtools position="bottom-right" /> */}
|
|
</>
|
|
);
|
|
},
|
|
});
|