alpenwerk-hr/components/shell/Sidebar.tsx

"use client";

import { BarChart3, Building2, History, LayoutGrid, Network, Users, X } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect } from "react";

const NAV_ITEMS = [
  { href: "/", label: "Übersicht", icon: LayoutGrid },
  { href: "/employees", label: "Mitarbeiter:innen", icon: Users },
  { href: "/orgchart", label: "Organigramm", icon: Network },
  { href: "/positions", label: "Positionen", icon: Building2 },
  { href: "/reports", label: "Berichte", icon: BarChart3 },
  { href: "/audit", label: "Audit-Log", icon: History },
] as const;

export function isActiveRoute(pathname: string, href: string): boolean {
  return href === "/" ? pathname === "/" : pathname.startsWith(href);
}

// Permanent rail from lg up, slide-in drawer below it. Same markup either
// way — the breakpoint only changes how the <nav> is positioned — so the
// nav list has exactly one definition.
export function Sidebar({ open, onClose }: { open: boolean; onClose: () => void }) {
  const pathname = usePathname();

  // A route change means the user tapped a nav item; the drawer has to get
  // out of the way on its own, since it covers the page it just navigated to.
  useEffect(() => {
    onClose();
  }, [pathname, onClose]);

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  return (
    <>
      <div
        onClick={onClose}
        aria-hidden
        className={`fixed inset-0 z-40 bg-black/40 transition-opacity lg:hidden ${
          open ? "opacity-100" : "pointer-events-none opacity-0"
        }`}
      />
      <nav
        aria-label="Hauptnavigation"
        className={`fixed left-0 top-0 z-50 flex h-dvh w-[264px] flex-col border-r border-border bg-white transition-transform duration-200 lg:z-30 lg:w-[236px] lg:translate-x-0 ${
          open ? "translate-x-0" : "-translate-x-full"
        }`}
      >
        <div className="flex h-14 shrink-0 items-center justify-between border-b border-border pl-5 pr-3">
          <span className="text-base font-extrabold text-brand-700">Alpenwerk HR</span>
          <button
            type="button"
            onClick={onClose}
            aria-label="Navigation schließen"
            className="-mr-1 rounded p-2 text-ink-muted hover:bg-surface lg:hidden"
          >
            <X className="h-5 w-5" />
          </button>
        </div>
        {/* pb keeps the last item clear of the iOS home indicator. */}
        <ul className="flex-1 space-y-1 overflow-y-auto px-3 py-4 pb-[max(1rem,env(safe-area-inset-bottom))]">
          {NAV_ITEMS.map(({ href, label, icon: Icon }) => {
            const active = isActiveRoute(pathname, href);
            return (
              <li key={href}>
                <Link
                  href={href}
                  aria-current={active ? "page" : undefined}
                  className={`flex items-center gap-3 rounded px-3 py-2.5 text-sm font-semibold transition-colors ${
                    active ? "bg-brand-100 text-brand-700" : "text-ink-body hover:bg-surface"
                  }`}
                >
                  <Icon className="h-4 w-4 shrink-0" />
                  {label}
                </Link>
              </li>
            );
          })}
        </ul>
      </nav>
    </>
  );
}