81 lines
2.7 KiB
TypeScript
81 lines
2.7 KiB
TypeScript
"use client";
|
|
import { authClient } from "~/lib/auth-client";
|
|
import Link from "next/link";
|
|
import { useState } from "react";
|
|
import { Logo } from "~/components/branding/logo";
|
|
import { SidebarTrigger } from "~/components/navigation/sidebar-trigger";
|
|
import { Button } from "~/components/ui/button";
|
|
import { Skeleton } from "~/components/ui/skeleton";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
export function Navbar() {
|
|
const { data: session, isPending } = authClient.useSession();
|
|
const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
|
|
const router = useRouter();
|
|
|
|
// Get current open invoice for quick access
|
|
// const { data: currentInvoice } = api.invoices.getCurrentOpen.useQuery();
|
|
|
|
return (
|
|
<header className="bg-navbar border-navbar-border text-navbar-foreground fixed top-0 right-0 left-0 z-30 border-b">
|
|
<div className="flex h-14 items-center justify-between px-4 md:h-16 md:px-8">
|
|
<div className="flex items-center gap-4 md:gap-6">
|
|
<SidebarTrigger
|
|
isOpen={isMobileNavOpen}
|
|
onToggle={() => setIsMobileNavOpen(!isMobileNavOpen)}
|
|
/>
|
|
<Link href="/dashboard" className="flex items-center gap-2">
|
|
<Logo size="md" />
|
|
</Link>
|
|
</div>
|
|
<div className="flex items-center gap-2 md:gap-4">
|
|
{isPending ? (
|
|
<>
|
|
<Skeleton className="bg-muted/20 hidden h-5 w-20 sm:inline" />
|
|
<Skeleton className="bg-muted/20 h-8 w-16" />
|
|
</>
|
|
) : session?.user ? (
|
|
<>
|
|
<span className="text-muted-foreground hidden text-xs font-medium sm:inline md:text-sm">
|
|
{session.user.name ?? session.user.email}
|
|
</span>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={async () => {
|
|
await authClient.signOut();
|
|
router.push("/");
|
|
}}
|
|
className="text-xs md:text-sm"
|
|
>
|
|
Sign Out
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Link href="/auth/signin">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-xs md:text-sm"
|
|
>
|
|
Sign In
|
|
</Button>
|
|
</Link>
|
|
<Link href="/auth/register">
|
|
<Button
|
|
size="sm"
|
|
variant="default"
|
|
className="text-xs font-medium md:text-sm"
|
|
>
|
|
Register
|
|
</Button>
|
|
</Link>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|