pen/Turnpike
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added Lucide icons

Browse source
This commit is contained in:
Pen Anderson 2026-03-03 16:51:54 -06:00
parent 29a96879a8
commit ace7f11a60
3 changed files with 38 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

48
frontend/src/components/Nav.svelte
View file

@ -1,37 +1,39 @@
<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 ?? '')
// Role-specific nav sets
const iconProps = { size: 18, strokeWidth: 1.75 }
const links = $derived.by(() => {
if (role === 'ticketing') return [
{ href: '#/attendees', label: 'Attendees', icon: '✓' },
{ href: '#/import', label: 'Import', icon: '↑' },
{ href: '#/attendees', label: 'Attendees', icon: ClipboardCheck },
{ href: '#/import', label: 'Import', icon: Upload },
]
if (role === 'volunteer_lead') return [
{ href: '#/', label: 'Schedule', icon: '◷' },
{ href: '#/volunteers', label: 'Volunteers', icon: '◎' },
{ href: '#/departments', label: 'Departments', icon: '⬡' },
{ 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: '⊞' },
{ href: '#/schedule', label: 'Schedule', icon: '◷' },
{ href: '#/volunteers', label: 'Volunteers', icon: '◎' },
{ href: '#/departments', label: 'Departments', icon: '⬡' },
{ href: '#/shifts', label: 'Shifts', icon: '◑' },
{ 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 },
]
// 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: '⚙' },
{ 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 },
]
})
@ -46,12 +48,12 @@
<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.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}>
<span class="icon">→</span> Sign out
<LogOut {...iconProps} /> Sign out
</button>
</nav>