Navigation und Menüs

Die Navigation der St. Georg App basiert vollständig auf Metadaten der aktiven Organisation.
Damit lassen sich Menüs pro Organisation konfigurieren, ohne dass der Code angepasst werden muss.

Datenstruktur metadata.navigation

In der Datenbank ist für jede Organisation ein Feld metadata hinterlegt.
Dieses Feld enthält ein Objekt navigation mit folgendem Aufbau:

groups als Liste von Navigationsgruppen
Jede Gruppe hat ein label und eine Liste von sections
Jede Sektion hat mindestens title und optional url, icon, logo, external und items

Beispiel für eine Gruppe:

{
  "label": "Herbstfahrt",
  "sections": [
    {
      "title": "Gruppen erstellen",
      "url": "/messdiener/gruppen",
      "icon": "Users"
    },
    {
      "title": "Süßer Shop",
      "url": "/messdiener/shop",
      "icon": "Candy",
      "isActive": true,
      "items": [
        {
          "title": "Teilnehmer",
          "url": "/messdiener/shop/teilnehmer"
        }
      ]
    }
  ]
}

Die Funktion parseNavigationGroups in apps/web/src/lib/navigation.ts wandelt dieses rohen Objekt in eine typsichere Struktur um, die von NavMain einfach verarbeitet werden kann.

Darstellung in NavMain

NavMain unter apps/web/src/components/layout/nav-main.tsx liest die Navigationsgruppen und rendert daraus:

Sidebar-Gruppen mit Label
Sektionen als Hauptpunkte
Unterpunkte (Items) als Submenüeinträge

Für externe Links wird das Feld external angewendet.
Ist es true, so wird der Link als normaler Anchor gerendert, der in einem neuen Tab öffnet, und es erscheint rechts das Icon SquareArrowUpRight.

Interne Links werden als Link aus tanstack Router gerendert und nutzen die bekannten Übergänge und URL Generierung.