shinkan-jinkendo/frontend/src/components/ActiveClubSwitcher.jsx
Lars 413a096432
Some checks failed
Deploy Development / deploy (push) Successful in 37s
Test Suite / lint-backend (push) Successful in 0s
Test Suite / build-frontend (push) Successful in 7s
Test Suite / playwright-tests (push) Failing after 40s
feat: enhance mobile and desktop sidebar with ActiveClubSwitcher component
- Integrated ActiveClubSwitcher into both mobile and desktop sidebar layouts, improving club selection functionality.
- Updated app header styles for better mobile responsiveness and layout.
- Adjusted desktop sidebar footer styles for improved alignment and spacing.
2026-05-05 21:23:16 +02:00

45 lines
1.3 KiB
JavaScript

import { useAuth } from '../context/AuthContext'
/**
* Zeigt einen Vereins-Umschalter, wenn der Nutzer mehreren Vereinen zugeordnet ist.
* Steuert den Mandanten-Kontext (Header X-Active-Club-Id + Profilfeld active_club_id).
*/
export default function ActiveClubSwitcher({ variant = 'sidebar' }) {
const { user, setActiveClub } = useAuth()
const clubs = user?.clubs || []
if (clubs.length <= 1) return null
const selectClubId =
user?.active_club_id != null && clubs.some((c) => c.id === user.active_club_id)
? user.active_club_id
: clubs[0]?.id
const isMobile = variant === 'mobile'
return (
<label
className={
'active-club-switch' +
(isMobile ? ' active-club-switch--mobile' : ' active-club-switch--sidebar')
}
>
<span className="active-club-switch__label">Aktiver Verein</span>
<select
className="form-input active-club-switch__select"
aria-label="Aktiven Verein wählen"
value={selectClubId ?? ''}
onChange={(e) => {
const v = e.target.value
if (v) setActiveClub(Number(v))
}}
>
{clubs.map((c) => (
<option key={c.id} value={c.id}>
{c.name || `Verein #${c.id}`}
</option>
))}
</select>
</label>
)
}