src/components/Navbar.svelte

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>