38 lines
1.4 KiB
TypeScript
38 lines
1.4 KiB
TypeScript
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
|
|
import { AppSidebar } from "@/components/app-sidebar"
|
|
import { Outlet } from "react-router-dom"
|
|
import { Button } from "@/components/ui/button";
|
|
import { LogOut } from "lucide-react";
|
|
import { useLogout, useUser } from "@/hooks/use-auth";
|
|
|
|
export default function Layout() {
|
|
const { mutate: logout } = useLogout();
|
|
const { data: user } = useUser();
|
|
|
|
return (
|
|
<SidebarProvider>
|
|
<AppSidebar />
|
|
<main className="w-full flex flex-col min-h-screen">
|
|
<header className="border-b bg-background/95 backdrop-blur h-14 flex items-center justify-between px-4 sticky top-0 z-10">
|
|
<div className="flex items-center gap-2">
|
|
<SidebarTrigger />
|
|
<div className="font-semibold">K-Notes</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<div className="text-sm text-muted-foreground hidden sm:block">
|
|
{user?.email}
|
|
</div>
|
|
<Button variant="ghost" size="icon" onClick={() => logout()} title="Logout">
|
|
<LogOut className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</header>
|
|
<div className="flex-1 p-4 md:p-6 bg-muted/10">
|
|
<Outlet />
|
|
</div>
|
|
</main>
|
|
</SidebarProvider>
|
|
)
|
|
}
|