79 lines
3.5 KiB
TypeScript
79 lines
3.5 KiB
TypeScript
// * Packages
|
|
import { Link, usePage } from "@inertiajs/react";
|
|
import { CircleUserRoundIcon, LogOutIcon, UserIcon } from "lucide-react";
|
|
import { route } from "ziggy-js";
|
|
// * Components shadcn
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
// * Other
|
|
import AppBreadcrumbs from "@/back/Components/Layout/AppBreadcrumbs";
|
|
import CustomSidebarTrigger from "@/back/Components/CustomSidebarTrigger";
|
|
import { Button } from "@/components/ui/button";
|
|
import { AuthProp } from "@/back/types/global";
|
|
import useTrans from "@/hooks/use-translations";
|
|
import AppSettings from "@/back/Components/Layout/AppSettings";
|
|
|
|
export default function AppHeader() {
|
|
const auth = usePage().props.auth as AuthProp;
|
|
const { user } = auth;
|
|
return (
|
|
<header className="sticky top-0 flex flex-col justify-between items-center bg-background border-b z-20">
|
|
<div className="sticky top-0 flex flex-row justify-between items-center w-full py-4">
|
|
<div className="flex flex-row justify-start items-center">
|
|
<CustomSidebarTrigger />
|
|
<AppBreadcrumbs className="hidden md:block" />
|
|
</div>
|
|
<div className="flex items-center">
|
|
<AppSettings />
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
className="text-muted-foreground"
|
|
>
|
|
<CircleUserRoundIcon />
|
|
<span className="hidden lg:block">
|
|
{user.first_name} {user.last_name}
|
|
</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
side="bottom"
|
|
className="w-fit me-1"
|
|
>
|
|
<DropdownMenuItem className="p-0">
|
|
<Button variant="ghost" asChild>
|
|
<Link
|
|
href={route("back.users.show", user.id)}
|
|
className="w-full"
|
|
>
|
|
<UserIcon />
|
|
{useTrans("back.profile")}
|
|
</Link>
|
|
</Button>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem className="p-0">
|
|
<Button variant="ghost" asChild>
|
|
<a
|
|
href={route("back.logout")}
|
|
className="w-full"
|
|
>
|
|
<LogOutIcon />
|
|
{useTrans("back.disconnect")}
|
|
</a>
|
|
</Button>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</div>
|
|
<AppBreadcrumbs className="block md:hidden mb-4 w-full" />
|
|
</header>
|
|
);
|
|
}
|