File size: 2,199 Bytes
8f096b5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
svelte
<script>
import { LucideHome, LucidePieChart, LucideList, LucideSettings, LucideLogIn, LucideUser } from 'lucide-svelte';
import { page } from '$app/stores';
export let session;
</script>
<nav class="bg-white border-b border-slate-100 shadow-sm">
<div class="container mx-auto px-4 py-3 flex items-center justify-between">
<a href="/" class="flex items-center space-x-2">
<span class="text-xl font-bold text-slate-900">ServiceBook</span>
</a>
<div class="flex items-center space-x-6">
<a href="/" class="flex items-center space-x-1 text-slate-600 hover:text-slate-900 transition-colors">
<LucideHome size={18} />
<span class={$page.url.pathname === '/' ? 'font-medium' : ''}>Dashboard</span>
</a>
<a href="/transactions" class="flex items-center space-x-1 text-slate-600 hover:text-slate-900 transition-colors">
<LucideList size={18} />
<span class={$page.url.pathname.startsWith('/transactions') ? 'font-medium' : ''}>Transactions</span>
</a>
<a href="/reports" class="flex items-center space-x-1 text-slate-600 hover:text-slate-900 transition-colors">
<LucidePieChart size={18} />
<span class={$page.url.pathname.startsWith('/reports') ? 'font-medium' : ''}>Reports</span>
</a>
{#if session}
<a href="/settings" class="flex items-center space-x-1 text-slate-600 hover:text-slate-900 transition-colors">
<LucideSettings size={18} />
<span class={$page.url.pathname.startsWith('/settings') ? 'font-medium' : ''}>Settings</span>
</a>
<div class="flex items-center space-x-2">
<div class="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center">
<LucideUser size={16} class="text-slate-600" />
</div>
<span class="text-sm font-medium text-slate-700">{session.user.email}</span>
</div>
{:else}
<a href="/auth/login" class="flex items-center space-x-1 text-slate-600 hover:text-slate-900 transition-colors">
<LucideLogIn size={18} />
<span>Login</span>
</a>
{/if}
</div>
</div>
</nav>
</html> |