muh/frontend/src/layout/AppShell.tsx

import { NavLink, Outlet, useLocation, useNavigate } from "react-router-dom";
import { useSession } from "../lib/session";

const PAGE_TITLES: Record<string, string> = {
  "/home": "Startseite",
  "/admin/dashboard": "Admin Dashboard",
  "/samples/new": "Neuanlage einer Probe",
  "/portal": "MUH-Portal",
  "/report-template": "Bericht",
  "/admin/stammdaten": "Meine Stammdaten",
  "/admin/preistabelle": "Preistabelle",
  "/admin/rechnung/verwalten": "Rechnungsverwaltung",
  "/admin/rechnung/template": "Rechnungsvorlage",
};

function resolvePageTitle(pathname: string, isAdmin: boolean) {
  if (pathname.includes("/anamnesis")) {
    return "Anamnese";
  }
  if (pathname.includes("/antibiogram")) {
    return "Antibiogramm";
  }
  if (pathname.includes("/therapy")) {
    return "Therapieempfehlung";
  }
  if (pathname.includes("/registration")) {
    return "Probe bearbeiten";
  }
  if (pathname.startsWith("/admin/benutzer")) {
    return isAdmin ? "Benutzerfreigabe" : "Verwaltung | Benutzer";
  }
  return PAGE_TITLES[pathname] ?? "MUH App";
}

export default function AppShell() {
  const { user, setSession } = useSession();
  const location = useLocation();
  const navigate = useNavigate();

  return (
    <div className="app-shell">
      <aside className="sidebar">
        <div className="sidebar__brand">
          <div className="sidebar__logo">
            MUH <span className="sidebar__version">({__APP_VERSION__})</span>
          </div>
        </div>

        <nav className="sidebar__nav">
          {user?.role === "ADMIN" ? (
            <>
              <NavLink
                to="/admin/dashboard"
                className={({ isActive }) => `nav-link ${isActive ? "is-active" : ""}`}
              >
                Dashboard
              </NavLink>

              <div className="nav-group">
                <div className="nav-group__label">Benutzerverwaltung</div>
                <div className="nav-subnav">
                  <NavLink to="/admin/benutzer" className={({ isActive }) => `nav-sublink ${isActive ? "is-active" : ""}`}>
                    Freigabe / Sperre
                  </NavLink>
                </div>
              </div>

              <NavLink
                to="/admin/stammdaten"
                className={({ isActive }) => `nav-link ${isActive ? "is-active" : ""}`}
              >
                Stammdaten
              </NavLink>

              <NavLink
                to="/admin/preistabelle"
                className={({ isActive }) => `nav-link ${isActive ? "is-active" : ""}`}
              >
                Preistabelle
              </NavLink>

              <div className="nav-group">
                <div className="nav-group__label">Rechnung</div>
                <div className="nav-subnav">
                  <NavLink to="/admin/rechnung/verwalten" className={({ isActive }) => `nav-sublink ${isActive ? "is-active" : ""}`}>
                    Verwalten
                  </NavLink>
                  <NavLink to="/admin/rechnung/template" className={({ isActive }) => `nav-sublink ${isActive ? "is-active" : ""}`}>
                    Template
                  </NavLink>
                </div>
              </div>
            </>
          ) : (
            <>
              <NavLink to="/home" className={({ isActive }) => `nav-link ${isActive ? "is-active" : ""}`}>
                Start
              </NavLink>
              <NavLink to="/samples/new" className={({ isActive }) => `nav-link ${isActive ? "is-active" : ""}`}>
                Neue Probe
              </NavLink>

              <div className="nav-group">
                <div className="nav-group__label">Verwaltung</div>
                <div className="nav-subnav">
                  <div className="nav-subgroup">
                    <div className="nav-subgroup__label">Vorlagen</div>
                    <div className="nav-subnav nav-subnav--nested">
                      <NavLink to="/report-template" className={({ isActive }) => `nav-sublink ${isActive ? "is-active" : ""}`}>
                        Bericht
                      </NavLink>
                    </div>
                  </div>
                  <NavLink to="/admin/landwirte" className={({ isActive }) => `nav-sublink ${isActive ? "is-active" : ""}`}>
                    Landwirte
                  </NavLink>
                  <NavLink to="/admin/medikamente" className={({ isActive }) => `nav-sublink ${isActive ? "is-active" : ""}`}>
                    Medikamente
                  </NavLink>
                  <NavLink to="/admin/erreger" className={({ isActive }) => `nav-sublink ${isActive ? "is-active" : ""}`}>
                    Erreger
                  </NavLink>
                  <NavLink to="/admin/antibiogramm" className={({ isActive }) => `nav-sublink ${isActive ? "is-active" : ""}`}>
                    Antibiogramm
                  </NavLink>
                  <NavLink to="/admin/benutzer" className={({ isActive }) => `nav-sublink ${isActive ? "is-active" : ""}`}>
                    Benutzer
                  </NavLink>
                </div>
              </div>

              <div className="nav-group">
                <div className="nav-group__label">Suche</div>
                <div className="nav-subnav">
                  <NavLink to="/search/landwirt" className={({ isActive }) => `nav-sublink ${isActive ? "is-active" : ""}`}>
                    Landwirt
                  </NavLink>
                  <NavLink to="/search/probe" className={({ isActive }) => `nav-sublink ${isActive ? "is-active" : ""}`}>
                    Probe
                  </NavLink>
                  <NavLink to="/search/kalendar" className={({ isActive }) => `nav-sublink ${isActive ? "is-active" : ""}`}>
                    Kalendar
                  </NavLink>
                </div>
              </div>

              <NavLink to="/portal" className={({ isActive }) => `nav-link ${isActive ? "is-active" : ""}`}>
                Portal
              </NavLink>
            </>
          )}
        </nav>

        <div className="sidebar__footer">
          <div className="user-chip user-chip--stacked">
            <span>{user?.displayName}</span>
            <small>{user?.email ?? user?.role}</small>
          </div>
          <button
            type="button"
            className="ghost-button"
            onClick={() => {
              setSession(null);
              navigate("/");
            }}
          >
            Abmelden
          </button>
        </div>
      </aside>

      <div className="shell-main">
        <header className="topbar">
          <div className="topbar__headline">
            <h2>{resolvePageTitle(location.pathname, user?.role === "ADMIN")}</h2>
          </div>
        </header>

        <main className="content-area">
          <Outlet />
        </main>
      </div>
    </div>
  );
}