janpeter/Scrum4Me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ST-507): replace navbar roles/settings/logout with avatar user menu

Browse source 
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Janpeter Visser 2026-04-26 19:31:21 +02:00
parent 8a5076a5ed
commit e887f796c7
3 changed files with 141 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

51
components/shared/nav-bar.tsx
View file

@ -2,32 +2,22 @@
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { logoutAction } from '@/actions/auth'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { AppIcon } from '@/components/shared/app-icon'
import { UserMenu } from '@/components/shared/user-menu'
import { cn } from '@/lib/utils'
import { useProductStore } from '@/stores/product-store'
const ROLE_LABELS: Record<string, string> = {
PRODUCT_OWNER: 'PO',
SCRUM_MASTER: 'SM',
DEVELOPER: 'Dev',
}
const ROLE_FULL_LABELS: Record<string, string> = {
PRODUCT_OWNER: 'Product Owner',
SCRUM_MASTER: 'Scrum Master',
DEVELOPER: 'Developer',
}
interface NavBarProps {
isDemo: boolean
roles: string[]
userId: string
username: string
bio: string | null
}
export function NavBar({ isDemo, roles }: NavBarProps) {
export function NavBar({ isDemo, roles, userId, username, bio }: NavBarProps) {
const pathname = usePathname()
const currentProduct = useProductStore(s => s.currentProduct)
@ -105,36 +95,9 @@ export function NavBar({ isDemo, roles }: NavBarProps) {
)}
</div>
{/* Rechts: rollen + instellingen + uitloggen */}
{/* Rechts: account-menu */}
<div className="flex items-center gap-2 flex-1 justify-end">
{roles.length > 0 && (
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<span className="text-xs text-muted-foreground px-2 cursor-default" />}>
{roles.map(r => ROLE_LABELS[r]).filter(Boolean).join(' · ')}
</TooltipTrigger>
<TooltipContent>
{roles.map(r => ROLE_FULL_LABELS[r]).filter(Boolean).join(' · ')}
</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
<Link
href="/settings"
className={cn(
'px-3 py-1.5 rounded-md text-sm transition-colors',
pathname.startsWith('/settings')
? 'bg-primary-container text-primary-container-foreground font-medium'
: 'text-muted-foreground hover:text-foreground hover:bg-surface-container'
)}
>
Instellingen
</Link>
<form action={logoutAction}>
<Button variant="ghost" size="sm" type="submit" className="text-muted-foreground hover:text-foreground">
Uitloggen
</Button>
</form>
<UserMenu userId={userId} username={username} bio={bio} roles={roles} />
</div>
</header>
)