Turnpike/frontend/src/components/Nav.svelte

<script>
  import { LayoutDashboard, ClipboardCheck, Heart, Hexagon, Clock, CalendarDays, Upload, Users, Settings, LogOut } from 'lucide-svelte'

  let { session, active, onLogout, open = false } = $props()

  const role = $derived(session?.user?.role ?? '')

  const iconProps = { size: 18, strokeWidth: 1.75 }

  const links = $derived.by(() => {
    if (role === 'ticketing') return [
      { href: '#/attendees', label: 'Attendees', icon: ClipboardCheck },
      { href: '#/import', label: 'Import', icon: Upload },
    ]
    if (role === 'volunteer_lead') return [
      { href: '#/', label: 'Schedule', icon: CalendarDays },
      { href: '#/volunteers', label: 'Volunteers', icon: Heart },
      { href: '#/departments', label: 'Departments', icon: Hexagon },
    ]
    if (role === 'coordinator') return [
      { href: '#/', label: 'Dashboard', icon: LayoutDashboard },
      { href: '#/schedule', label: 'Schedule', icon: CalendarDays },
      { href: '#/volunteers', label: 'Volunteers', icon: Heart },
      { href: '#/departments', label: 'Departments', icon: Hexagon },
      { href: '#/shifts', label: 'Shifts', icon: Clock },
    ]
    return [
      { href: '#/', label: 'Dashboard', icon: LayoutDashboard },
      { href: '#/attendees', label: 'Attendees', icon: ClipboardCheck },
      { href: '#/volunteers', label: 'Volunteers', icon: Heart },
      { href: '#/departments', label: 'Departments', icon: Hexagon },
      { href: '#/shifts', label: 'Shifts', icon: Clock },
      { 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) {
    const p = href.replace(/^#/, '')
    if (p === '/') return active === '/' || active === ''
    return active.startsWith(p)
  }
</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)}>
      <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>