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",
};

function resolvePageTitle(pathname: string) {
  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/landwirte")) {
    return "Die Verwaltung der Landwirte";
  }
  if (pathname.startsWith("/admin/benutzer")) {
    return "Verwaltung | Benutzer";
  }
  if (pathname.startsWith("/admin/medikamente")) {
    return "Die Verwaltung der Medikamente";
  }
  if (pathname.startsWith("/admin/erreger")) {
    return "Die Verwaltung der Erreger";
  }
  if (pathname.startsWith("/admin/antibiogramm")) {
    return "Die Verwaltung der Antibiogramme";
  }
  if (pathname.startsWith("/search/landwirt")) {
    return "Suche | Landwirt";
  }
  if (pathname.startsWith("/search/probe")) {
    return "Suche | Probe";
  }
  if (pathname.startsWith("/search/kalendar")) {
    return "Suche | Kalendar";
  }
  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</div>
        </div>

        <nav className="sidebar__nav">
          {user?.role === "ADMIN" ? (
            <>
              <NavLink
                to="/admin/dashboard"
                className={({ isActive }) => `nav-link ${isActive ? "is-active" : ""}`}
              >
                Dashboard
              </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>
            </>
          ) : (
            <>
              <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)}</h2>
          </div>
        </header>

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