Switched to path routing. Added data management.

This commit is contained in:
Pen Anderson 2026-03-03 19:55:35 -06:00
parent 8dc5d3ed01
commit 4bba0ed3a0
14 changed files with 256 additions and 46 deletions

View file

@ -1,7 +1,7 @@
<script>
import { LayoutDashboard, ClipboardCheck, Heart, Hexagon, Clock, CalendarDays, Upload, Users, Settings, LogOut } from 'lucide-svelte'
let { session, active, onLogout, open = false } = $props()
let { session, active, onLogout, navigate, open = false } = $props()
const role = $derived(session?.user?.role ?? '')
@ -9,45 +9,45 @@
const links = $derived.by(() => {
if (role === 'ticketing') return [
{ href: '#/attendees', label: 'Attendees', icon: ClipboardCheck },
{ href: '#/import', label: 'Import', icon: Upload },
{ 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 },
{ 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 },
{ 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 },
{ 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)
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)}>
<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>