var-monorepo/apps/hub/app/_components/Nav.tsx

import {
	HomeIcon,
	GearIcon,
	ExitIcon,
	LockClosedIcon,
	RocketIcon,
	ReaderIcon,
	DownloadIcon,
} from "@radix-ui/react-icons";
import Link from "next/link";
import { WarningAlert } from "./ui/PageAlert";
import { getServerSession } from "api/auth/[...nextauth]/auth";
import { Error } from "./Error";
import Image from "next/image";
import { Plane, Radar, Workflow } from "lucide-react";
import { BookingButton } from "./BookingButton";

export const VerticalNav = async () => {
	const session = await getServerSession();
	if (!session?.user) return <Error statusCode={401} title="Benutzer nicht authentifiziert!" />;
	const viewAdminMenu = session.user.permissions.some((p) => {
		return p.startsWith("ADMIN");
	});
	return (
		<ul className="menu bg-base-300 w-64 flex-nowrap rounded-lg p-3 font-semibold shadow-md">
			<li>
				<Link href="/">
					<HomeIcon /> Dashboard
				</Link>
			</li>
			<li>
				<Link href="/events">
					<RocketIcon />
					Events & Kurse
				</Link>
			</li>
			<li>
				<Link href="/logbook">
					<ReaderIcon />
					Einsatzhistorie
				</Link>
			</li>
			<li>
				<Link href="/settings">
					<GearIcon />
					Einstellungen
				</Link>
			</li>
			<li>
				<Link href="/resources">
					<DownloadIcon />
					Downloads / Links
				</Link>
			</li>
			{viewAdminMenu && (
				<li>
					<details open>
						<summary>
							<LockClosedIcon />
							Admin
						</summary>
						<ul>
							{session.user.permissions.includes("ADMIN_USER") && (
								<li>
									<Link href="/admin/user">Benutzer</Link>
								</li>
							)}
							{session.user.permissions.includes("ADMIN_STATION") && (
								<li>
									<Link href="/admin/station">Stationen</Link>
								</li>
							)}
							{session.user.permissions.includes("ADMIN_KEYWORD") && (
								<li>
									<Link href="/admin/keyword">Stichworte</Link>
								</li>
							)}
							{session.user.permissions.includes("ADMIN_HELIPORT") && (
								<li>
									<Link href="/admin/heliport">Heliports</Link>
								</li>
							)}
							{session.user.permissions.includes("ADMIN_EVENT") && (
								<li>
									<Link href="/admin/event">Events</Link>
								</li>
							)}
							{session.user.permissions.includes("ADMIN_MESSAGE") && (
								<li>
									<Link href="/admin/config">Config</Link>
								</li>
							)}
							{session.user.permissions.includes("ADMIN_USER") && (
								<li>
									<Link href="/admin/report">Reports</Link>
								</li>
							)}
							{session.user.permissions.includes("ADMIN_USER") && (
								<li>
									<Link href="/admin/penalty">Audit-Log</Link>
								</li>
							)}
							{session.user.permissions.includes("ADMIN_CHANGELOG") && (
								<li>
									<Link href="/admin/changelog">Changelog</Link>
								</li>
							)}
						</ul>
					</details>
				</li>
			)}
		</ul>
	);
};

export const HorizontalNav = async () => {
	const session = await getServerSession();
	if (!session?.user) return <Error statusCode={401} title="Benutzer nicht authentifiziert!" />;

	return (
		<div className="navbar bg-base-200 mb-4 rounded-lg shadow-md">
			<div className="flex items-center">
				<Link href="/" className="flex items-center">
					<Image
						src="/mail/var_logo.png"
						alt="VAR Logo"
						width={40}
						height={40}
						className="ml-2 mr-3"
						priority
					/>
					<h2 className="text-xl font-semibold normal-case">Virtual Air Rescue - HUB</h2>
				</Link>
				<WarningAlert />
			</div>
			<div className="ml-auto flex items-center">
				<ul className="flex items-center space-x-2 px-1">
					<li>
						<BookingButton currentUser={session?.user} />
					</li>
					<li>
						<a
							href={process.env.NEXT_PUBLIC_DISPATCH_URL + "/tracker"}
							rel="noopener noreferrer"
							target="_blank"
						>
							<button
								className="btn btn-sm btn-ghost tooltip tooltip-bottom"
								data-tip="Zum Tracker"
							>
								<Radar size={20} />
							</button>
						</a>
					</li>
					<li className="flex gap-2">
						{session.user.permissions.includes("DISPO") && (
							<a
								href={`${process.env.NEXT_PUBLIC_DISPATCH_URL}/dispatch`}
								rel="noopener noreferrer"
								target="_blank"
							>
								<button className="btn btn-sm btn-outline btn-primary">
									<Workflow /> Disponent
								</button>
							</a>
						)}
						{session.user.permissions.includes("PILOT") && (
							<a
								href={`${process.env.NEXT_PUBLIC_DISPATCH_URL}/pilot`}
								rel="noopener noreferrer"
								target="_blank"
							>
								<button className="btn btn-sm btn-outline btn-primary">
									<Plane /> Pilot
								</button>
							</a>
						)}
					</li>
					<li>
						<Link href="/logout">
							<button className="btn btn-sm btn-ghost">
								<ExitIcon /> Logout
							</button>
						</Link>
					</li>
				</ul>
			</div>
		</div>
	);
};