design-system/src/pages/Admin/Admin.tsx

import { useNavigate, useLocation } from 'react-router-dom'
import { AppShell } from '../../design-system/layout/AppShell/AppShell'
import { Sidebar } from '../../design-system/layout/Sidebar/Sidebar'
import { TopBar } from '../../design-system/layout/TopBar/TopBar'
import { SIDEBAR_APPS } from '../../mocks/sidebar'
import styles from './Admin.module.css'
import type { ReactNode } from 'react'

const ADMIN_TABS = [
  { label: 'User Management', path: '/admin/rbac' },
  { label: 'Audit Log', path: '/admin/audit' },
  { label: 'OIDC', path: '/admin/oidc' },
]

interface AdminLayoutProps {
  title: string
  children: ReactNode
}

export function AdminLayout({ title, children }: AdminLayoutProps) {
  const navigate = useNavigate()
  const location = useLocation()

  return (
    <AppShell sidebar={<Sidebar apps={SIDEBAR_APPS} />}>
      <TopBar
        breadcrumb={[
          { label: 'Admin', href: '/admin' },
          { label: title },
        ]}
        environment="PRODUCTION"
        user={{ name: 'hendrik' }}
      />
      <nav className={styles.adminNav} aria-label="Admin sections">
        {ADMIN_TABS.map((tab) => (
          <button
            key={tab.path}
            className={`${styles.adminTab} ${location.pathname === tab.path ? styles.adminTabActive : ''}`}
            onClick={() => navigate(tab.path)}
            type="button"
          >
            {tab.label}
          </button>
        ))}
      </nav>
      <div className={styles.adminContent}>
        {children}
      </div>
    </AppShell>
  )
}