rhl-lieferscheine/components/app-shell/TopNav.jsx

import React from "react";
import Link from "next/link";
import Image from "next/image";

import QuickNav from "@/components/app-shell/QuickNav";
import UserStatus from "@/components/app-shell/UserStatus";
import ThemeToggleButton from "@/components/app-shell/ThemeToggleButton";
import SessionIndicator from "@/components/app-shell/SessionIndicator";

export default function TopNav() {
	return (
		<header className="sticky top-0 z-50 w-full border-b bg-background">
			<div className="px-4">
				<div className="mx-auto grid h-14 w-full items-center 2xl:grid-cols-[1fr_minmax(0,45%)_1fr]">
					<div className="flex items-center justify-between gap-4 2xl:col-start-2">
						<div className="flex items-center gap-2">
							<Link
								href="/"
								title="Startseite"
								className="hover:cursor-pointer"
							>
								<div className="relative h-10 w-16">
									<Image
										src="/brand/logo-blackNav.png"
										alt="Firmenlogo"
										fill
										sizes="64px"
										className="object-contain dark:hidden"
										priority
									/>
									<Image
										src="/brand/logo-whiteNav.png"
										alt="Firmenlogo"
										fill
										sizes="64px"
										className="hidden object-contain dark:block"
										priority
									/>
								</div>
							</Link>

							<nav aria-label="Hauptnavigation" className="flex items-center">
								<QuickNav />
							</nav>
						</div>

						{/* Actions group (clean separation + consistent spacing) */}
						<div className="flex items-center gap-3">
							<div className="flex items-center gap-3" aria-label="Aktionen">
								<ThemeToggleButton />
								<SessionIndicator />
							</div>

							{/* Subtle separator between actions and user menu */}
							<div className="h-6 w-px bg-border" aria-hidden="true" />

							<UserStatus />
						</div>
					</div>
				</div>
			</div>
		</header>
	);
}