54 lines
2.2 KiB
Svelte
54 lines
2.2 KiB
Svelte
<script>
|
|
import { LayoutDashboard, Heart, Hexagon, CalendarDays, Upload, Users, Settings, LogOut, Ticket } from 'lucide-svelte'
|
|
|
|
let { session, active, onLogout, navigate, open = false } = $props()
|
|
|
|
const roles = $derived(session?.user?.roles ?? [])
|
|
function hasRole(...allowed) { return roles.some(r => allowed.includes(r)) }
|
|
|
|
const iconProps = { size: 18, strokeWidth: 1.75 }
|
|
|
|
const links = $derived.by(() => {
|
|
if (!hasRole('admin') && hasRole('colead') && !hasRole('staffing')) return [
|
|
{ href: '/', label: 'Schedule', icon: CalendarDays },
|
|
{ href: '/volunteers', label: 'Volunteers', icon: Heart },
|
|
{ href: '/departments', label: 'Departments', icon: Hexagon },
|
|
]
|
|
if (!hasRole('admin') && hasRole('staffing')) return [
|
|
{ href: '/', label: 'Dashboard', icon: LayoutDashboard },
|
|
{ href: '/schedule', label: 'Schedule', icon: CalendarDays },
|
|
{ href: '/volunteers', label: 'Volunteers', icon: Heart },
|
|
{ href: '/departments', label: 'Departments', icon: Hexagon },
|
|
]
|
|
return [
|
|
{ href: '/', label: 'Dashboard', icon: LayoutDashboard },
|
|
{ href: '/participants', label: 'Participants', icon: Ticket },
|
|
{ href: '/volunteers', label: 'Volunteers', icon: Heart },
|
|
{ href: '/departments', label: 'Departments', icon: Hexagon },
|
|
{ href: '/schedule', label: 'Schedule', icon: CalendarDays },
|
|
{ href: '/import', label: 'Import', icon: Upload },
|
|
{ href: '/users', label: 'Users', icon: Users },
|
|
{ href: '/settings', label: 'Settings', icon: Settings },
|
|
]
|
|
})
|
|
|
|
function isActive(href) {
|
|
if (href === '/') return active === '/' || active === ''
|
|
return active.startsWith(href)
|
|
}
|
|
</script>
|
|
|
|
<nav class="sidebar" class:open>
|
|
<div class="sidebar-brand">Turn<span>pike</span></div>
|
|
{#each links as link}
|
|
<a href={link.href} class="nav-link" class:active={isActive(link.href)}
|
|
onclick={(e) => { e.preventDefault(); navigate(link.href) }}>
|
|
<link.icon {...iconProps} />
|
|
{link.label}
|
|
</a>
|
|
{/each}
|
|
<div style="flex:1"></div>
|
|
<button class="nav-link btn-ghost" style="border:none;cursor:pointer;width:100%;text-align:left" onclick={onLogout}>
|
|
<LogOut {...iconProps} /> Sign out
|
|
</button>
|
|
</nav>
|