Settings-Layout

Zweispaltige Einstellungsseite: links eine klebende Navigation, rechts der aktive Bereich. Unterhalb von md ersetzt ein Auswahlfeld die Liste, damit die Navigation ohne horizontales Scrollen bedienbar bleibt. Der Block erzwingt kein Routing –active und onNavigate kommen von außen.

Einbindung

Die Einträge tragen eine ID, eine Beschriftung und optional ein Symbol. Der aktive Eintrag ist mit aria-current="page" markiert; ein Wechsel meldet nur die ID des Ziels.

settings.tsxtsx

import { SettingsLayout } from '@lukasfend/ui/blocks/settings';
import { Bell, User } from 'lucide-react';

const NAV = [
  { id: 'profil', label: 'Profil', icon: <User /> },
  { id: 'benachrichtigungen', label: 'Benachrichtigungen', icon: <Bell /> },
];

<SettingsLayout
  nav={NAV}
  active={active}
  onNavigate={setActive}
  navLabel="Einstellungen"
>
  <ProfilFormular />
</SettingsLayout>;