latosa-escrima/frontend/components/nav-bar.tsx

"use client";
import { Menu } from "lucide-react";

import { cn } from "@/lib/utils";

import { Button, buttonVariants } from "@/components/ui/button";
import { navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
import {
	Sheet,
	SheetContent,
	SheetHeader,
	SheetTitle,
	SheetTrigger,
} from "@/components/ui/sheet";
import Link from "next/link";
import { deleteCookie, getCookie } from "cookies-next";
import { useEffect, useState } from "react";
import { ThemeSwitcher } from "./theme-switcher";
import "./nav-bar.css";

const Href: React.FC<React.PropsWithChildren<{ href: string }>> = ({
	href,
	children,
}) => {
	return (
		<Link
			className={cn(
				"text-foreground font-bold",
				navigationMenuTriggerStyle,
				buttonVariants({
					variant: "ghost",
				}),
			)}
			href={href}
		>
			{children}
		</Link>
	);
};

const Navbar = () => {
	const [cookie, setCookie] = useState<string | null>(null);
	useEffect(() => {
		const _cookie = getCookie("auth_token");
		setCookie(_cookie?.toString() ?? null);
	}, []);
	return (
		<section className="sticky top-0 z-50 bg-background/50 border-b border-b-white/10 backdrop-blur-md p-4 transition duration-200 ease-in-out animate-header-slide-down-fade">
			<div>
				<nav className="hidden justify-between lg:flex">
					<div className="flex items-center gap-6">
						<div className="flex items-center gap-2">
							<img
								src="https://shadcnblocks.com/images/block/block-1.svg"
								className="w-8"
								alt="logo"
							/>
							<span className="text-xl font-bold">
								Latosa-Escrima
							</span>
						</div>
						<div className="flex items-center">
							<Href href="/">Accueil</Href>
							<Href href="/planning">Planning</Href>
							<Href href="/about">À propos</Href>
							<Href href="/gallery">Gallerie</Href>
							<Href href="/blogs">Blog</Href>
						</div>
					</div>
					<div className="flex gap-2 animate-in ease-in-out">
						<ThemeSwitcher />
						{cookie ? (
							<Link
								className={cn(
									"text-muted-foreground",
									navigationMenuTriggerStyle,
									buttonVariants({
										variant: "outline",
									}),
								)}
								href="/dashboard"
							>
								Compte
							</Link>
						) : (
							<Link
								className={cn(
									"text-muted-foreground",
									navigationMenuTriggerStyle,
									buttonVariants({
										variant: "outline",
									}),
								)}
								href="/login"
							>
								Se connecter
							</Link>
						)}
						{cookie ? (
							<Button
								onClick={() => {
									deleteCookie("auth_token");
									setCookie(null);
								}}
							>
								Se déconnecter
							</Button>
						) : (
							<Button>Créer un compte</Button>
						)}
					</div>
				</nav>
				<div className="block lg:hidden">
					<div className="flex items-center justify-between">
						<div className="flex items-center gap-2">
							<img
								src="https://shadcnblocks.com/images/block/block-1.svg"
								className="w-8"
								alt="logo"
							/>
							<span className="text-xl font-bold">
								Latosa-Escrima
							</span>
						</div>
						<div className="flex gap-2">
							<ThemeSwitcher />
							<Sheet>
								<SheetTrigger asChild>
									<Button variant="outline" size="icon">
										<Menu className="size-4" />
									</Button>
								</SheetTrigger>
								<SheetContent className="overflow-y-auto">
									<SheetHeader>
										<SheetTitle>
											<div className="flex items-center gap-2">
												<img
													src="https://shadcnblocks.com/images/block/block-1.svg"
													className="w-8"
													alt="logo"
												/>
												<span className="text-xl font-bold">
													Latosa-Escrima
												</span>
											</div>
										</SheetTitle>
									</SheetHeader>
									<div className="mb-8 mt-8 flex flex-col gap-4">
										<Link
											href="/"
											className="font-semibold"
										>
											Accueil
										</Link>
										<Link
											href="/planning"
											className="font-semibold"
										>
											Planning
										</Link>
										<Link
											href="/about"
											className="font-semibold"
										>
											À propos
										</Link>
										<Link
											href="/gallery"
											className="font-semibold"
										>
											Gallerie
										</Link>
										<Link
											href="/blog"
											className="font-semibold"
										>
											Blog
										</Link>
									</div>
									<div className="border-t pt-4">
										<div className="grid grid-cols-2 justify-start">
											<a
												className={cn(
													buttonVariants({
														variant: "ghost",
													}),
													"justify-start text-muted-foreground",
												)}
												href="#"
											>
												Press
											</a>
											<a
												className={cn(
													buttonVariants({
														variant: "ghost",
													}),
													"justify-start text-muted-foreground",
												)}
												href="#"
											>
												Contact
											</a>
											<a
												className={cn(
													buttonVariants({
														variant: "ghost",
													}),
													"justify-start text-muted-foreground",
												)}
												href="#"
											>
												Imprint
											</a>
											<a
												className={cn(
													buttonVariants({
														variant: "ghost",
													}),
													"justify-start text-muted-foreground",
												)}
												href="#"
											>
												Sitemap
											</a>
											<a
												className={cn(
													buttonVariants({
														variant: "ghost",
													}),
													"justify-start text-muted-foreground",
												)}
												href="#"
											>
												Legal
											</a>
											<a
												className={cn(
													buttonVariants({
														variant: "ghost",
													}),
													"justify-start text-muted-foreground",
												)}
												href="#"
											>
												Cookie Settings
											</a>
										</div>
										<div className="mt-2 flex flex-col gap-3">
											<Button variant="outline">
												<Link href="/login">
													Se connecter
												</Link>
											</Button>
											<Button>Sign up</Button>
										</div>
									</div>
								</SheetContent>
							</Sheet>
						</div>
					</div>
				</div>
			</div>
		</section>
	);
};

export default Navbar;