58 lines
2.1 KiB
Svelte
58 lines
2.1 KiB
Svelte
|
<script>
|
||
|
|
let { session, active, onLogout } = $props()
|
||
|
|
|
||
|
|
const role = $derived(session?.user?.role ?? '')
|
||
|
|
|
||
|
|
// Role-specific nav sets
|
||
|
|
const links = $derived.by(() => {
|
||
|
|
if (role === 'ticketing') return [
|
||
|
|
{ href: '#/attendees', label: 'Attendees', icon: '✓' },
|
||
|
|
{ href: '#/import', label: 'Import', icon: '↑' },
|
||
|
|
]
|
||
|
|
if (role === 'volunteer_lead') return [
|
||
|
|
{ href: '#/', label: 'Schedule', icon: '◷' },
|
||
|
|
{ href: '#/volunteers', label: 'Volunteers', icon: '◎' },
|
||
|
|
{ href: '#/departments', label: 'Departments', icon: '⬡' },
|
||
|
|
]
|
||
|
|
if (role === 'coordinator') return [
|
||
|
|
{ href: '#/', label: 'Dashboard', icon: '⊞' },
|
||
|
|
{ href: '#/schedule', label: 'Schedule', icon: '◷' },
|
||
|
|
{ href: '#/volunteers', label: 'Volunteers', icon: '◎' },
|
||
|
|
{ href: '#/departments', label: 'Departments', icon: '⬡' },
|
||
|
|
{ href: '#/shifts', label: 'Shifts', icon: '◑' },
|
||
|
|
]
|
||
|
|
// admin — all links
|
||
|
|
return [
|
||
|
|
{ href: '#/', label: 'Dashboard', icon: '⊞' },
|
||
|
|
{ href: '#/attendees', label: 'Attendees', icon: '✓' },
|
||
|
|
{ href: '#/volunteers', label: 'Volunteers', icon: '◎' },
|
||
|
|
{ href: '#/departments', label: 'Departments', icon: '⬡' },
|
||
|
|
{ href: '#/shifts', label: 'Shifts', icon: '◑' },
|
||
|
|
{ href: '#/schedule', label: 'Schedule', icon: '◷' },
|
||
|
|
{ href: '#/import', label: 'Import', icon: '↑' },
|
||
|
|
{ href: '#/users', label: 'Users', icon: '⊕' },
|
||
|
|
{ href: '#/settings', label: 'Settings', icon: '⚙' },
|
||
|
|
]
|
||
|
|
})
|
||
|
|
|
||
|
|
function isActive(href) {
|
||
|
|
const p = href.replace(/^#/, '')
|
||
|
|
if (p === '/') return active === '/' || active === ''
|
||
|
|
return active.startsWith(p)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<nav class="sidebar">
|
||
|
|
<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)}>
|
||
|
|
<span class="icon">{link.icon}</span>
|
||
|
|
{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}>
|
||
|
|
<span class="icon">→</span> Sign out
|
||
|
|
</button>
|
||
|
|
</nav>
|