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

import {
	HomeIcon,
	GearIcon,
	ExitIcon,
	LockClosedIcon,
	RocketIcon,
	ReaderIcon,
	DownloadIcon,
	ActivityLogIcon,
} 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 flex w-64 flex-nowrap justify-between rounded-lg p-3 font-semibold shadow-md">
			<div className="border-none">
				<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_USER_ADVANCED") && (
									<li>
										<Link href="/admin/account-log">Account Log</Link>
									</li>
								)}
								{session.user.permissions.includes("ADMIN_CHANGELOG") && (
									<li>
										<Link href="/admin/changelog">Changelog</Link>
									</li>
								)}
							</ul>
						</details>
					</li>
				)}
			</div>
			<li>
				<Link href="/changelog">
					<ActivityLogIcon />
					Changelog
				</Link>
			</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>
	);
};