53 lines
1.5 KiB
Svelte
53 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import type { SvelteComponent } from 'svelte';
|
|
import { page } from '$app/stores';
|
|
import {
|
|
IconBell,
|
|
IconChartPie,
|
|
IconCog6Tooth,
|
|
IconCpuChip,
|
|
IconExclamationTriangle,
|
|
IconHome,
|
|
IconMap,
|
|
IconUser
|
|
} from './icons';
|
|
|
|
// Define a type for navigation items
|
|
type NavItem = {
|
|
name: string;
|
|
href: string;
|
|
Icon: new (...args: any) => SvelteComponent;
|
|
};
|
|
|
|
// Initialize navigation items
|
|
const navItems: NavItem[] = [
|
|
{ name: 'Dashboard', href: '/', Icon: IconHome },
|
|
{ name: 'Map and Zones', href: '/map', Icon: IconMap },
|
|
{ name: 'Devices', href: '/devices', Icon: IconCpuChip },
|
|
{ name: 'Fault', href: '/fault', Icon: IconExclamationTriangle },
|
|
{ name: 'Notifications', href: '/notifications', Icon: IconBell },
|
|
{ name: 'Admin', href: '/admin', Icon: IconUser },
|
|
{ name: 'Reports', href: '/reports', Icon: IconChartPie },
|
|
{ name: 'Settings', href: '/settings', Icon: IconCog6Tooth }
|
|
];
|
|
const activeClasses = 'bg-gray-800 text-white';
|
|
const inactiveClasses = 'text-gray-400 hover:text-white hover:bg-gray-800';
|
|
const baseClasses = 'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold';
|
|
</script>
|
|
|
|
<nav class="flex flex-1 flex-col">
|
|
<ul role="list" class="flex flex-1 flex-col -mx-2 space-y-1">
|
|
{#each navItems as { name, href, Icon }}
|
|
<li>
|
|
<a
|
|
{href}
|
|
class="{baseClasses} {$page.url.pathname === href ? activeClasses : inactiveClasses}"
|
|
>
|
|
<svelte:component this={Icon} />
|
|
{name}
|
|
</a>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</nav>
|