platform/frontend-v2/src/lib/components/layout/Navbar.svelte

<script lang="ts">
	import { page } from '$app/state';
	import { toggleTheme, isDark } from '$lib/stores/theme.svelte';
	import { Map, Sun, Moon, User, Search } from '@lucide/svelte';

	interface Props {
		onOpenCommand?: () => void;
		visibleApps?: string[];
	}

	let { onOpenCommand, visibleApps = ['trips', 'fitness', 'inventory', 'budget', 'reader', 'media'] }: Props = $props();

	function showApp(id: string): boolean {
		return visibleApps.includes(id);
	}

	let tripsOpen = $state(false);
	let fitnessOpen = $state(false);

	function isActive(path: string): boolean {
		return page.url.pathname === path || page.url.pathname.startsWith(path + '/');
	}

	function closeDropdowns() {
		tripsOpen = false;
		fitnessOpen = false;
	}
</script>

<svelte:window onclick={closeDropdowns} />

<nav class="navbar">
	<div class="navbar-inner">
		<a href="/" class="navbar-logo">
			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7l6-3 6 3 6-3v13l-6 3-6-3-6 3V7z"/><path d="M9 4v13"/><path d="M15 7v13"/></svg>
			Platform
		</a>

		<div class="navbar-links">
			<a href="/" class="navbar-link" class:active={page.url.pathname === '/'}>Dashboard</a>

			{#if showApp('tasks')}
				<a href="/tasks" class="navbar-link" class:active={isActive('/tasks')}>Tasks</a>
			{/if}

			{#if showApp('trips')}
				<a href="/trips" class="navbar-link" class:active={isActive('/trips')}>Trips</a>
			{/if}

			{#if showApp('fitness')}
				<a href="/fitness" class="navbar-link" class:active={isActive('/fitness')}>Fitness</a>
			{/if}

			{#if showApp('inventory')}
				<a href="/inventory" class="navbar-link" class:active={isActive('/inventory')}>Inventory</a>
			{/if}
			{#if showApp('budget')}
				<a href="/budget" class="navbar-link" class:active={isActive('/budget')}>Budget</a>
			{/if}
			{#if showApp('reader')}
				<a href="/reader" class="navbar-link" class:active={isActive('/reader')}>Reader</a>
			{/if}
			{#if showApp('media')}
				<a href="/media" class="navbar-link" class:active={isActive('/media')}>Media</a>
			{/if}
		</div>

		<button class="search-trigger" onclick={onOpenCommand}>
			<Search size={14} />
			Search...
			<kbd>&#8984;K</kbd>
		</button>

		<div class="navbar-right">
			<button class="navbar-icon" onclick={toggleTheme} title="Toggle theme">
				{#if isDark()}
					<Sun size={18} />
				{:else}
					<Moon size={18} />
				{/if}
			</button>
			<a href="/settings" class="navbar-icon" title="Settings">
				<User size={18} />
			</a>
		</div>
	</div>
</nav>

<style>
	.navbar {
		position: sticky;
		top: 0;
		z-index: 50;
		background: var(--nav-bg);
		border-bottom: 1px solid var(--border);
		backdrop-filter: blur(20px) saturate(1.4);
		-webkit-backdrop-filter: blur(20px) saturate(1.4);
	}
	.navbar-inner {
		max-width: 1280px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		height: 48px;
		padding: 0 var(--sp-6);
		gap: var(--sp-6);
	}
	.navbar-logo {
		font-weight: 700;
		font-size: 14px;
		display: flex;
		align-items: center;
		gap: 7px;
		color: var(--text-1);
		flex-shrink: 0;
		letter-spacing: -0.04em;
	}
	.navbar-logo svg { width: 16px; height: 16px; color: var(--accent); }

	.navbar-links {
		display: flex;
		align-items: center;
		gap: var(--sp-0.5);
		flex: 1;
	}
	.navbar-link {
		padding: 4px 12px;
		border-radius: 6px;
		font-size: 13px;
		font-weight: 500;
		color: var(--text-4);
		transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
		background: none;
		border: none;
		position: relative;
		text-decoration: none;
	}
	.navbar-link:hover { color: var(--text-2); background: rgba(0,0,0,0.03); }
	.navbar-link.active {
		color: var(--accent);
		background: var(--accent-dim);
		font-weight: 600;
	}

	.nav-dropdown { position: relative; }
	.nav-dropdown-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 160px;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: var(--radius-sm);
		box-shadow: var(--card-shadow);
		padding: var(--sp-1);
		z-index: 60;
		margin-top: var(--sp-1);
	}
	.nav-dropdown-item {
		display: block;
		width: 100%;
		padding: var(--sp-2) var(--sp-3);
		border-radius: var(--radius-sm);
		font-size: var(--text-sm);
		font-weight: 500;
		color: var(--text-2);
		background: none;
		border: none;
		text-align: left;
		transition: all var(--transition);
		cursor: pointer;
		text-decoration: none;
	}
	.nav-dropdown-item:hover { background: var(--accent-dim); color: var(--text-1); }

	.navbar-right {
		display: flex;
		align-items: center;
		gap: var(--sp-1);
		margin-left: auto;
	}
	.navbar-icon {
		width: 36px;
		height: 36px;
		border-radius: var(--radius-md);
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: none;
		color: var(--text-3);
		transition: all var(--transition);
	}
	.navbar-icon:hover { color: var(--text-1); background: var(--accent-dim); }

	.search-trigger {
		display: flex;
		align-items: center;
		gap: var(--sp-2);
		padding: 6px var(--sp-3);
		border-radius: var(--radius-md);
		background: var(--surface-secondary);
		border: 1px solid var(--border);
		color: var(--text-3);
		font-size: var(--text-sm);
		cursor: pointer;
		transition: all var(--transition);
		min-width: 200px;
	}
	.search-trigger:hover { border-color: var(--accent); color: var(--text-2); }
	.search-trigger kbd {
		margin-left: auto;
		font-size: var(--text-xs);
		font-family: var(--mono);
		background: var(--canvas);
		padding: 2px 6px;
		border-radius: var(--radius-xs);
		color: var(--text-4);
		border: 1px solid var(--border);
	}

	@media (max-width: 768px) {
		.navbar-links, .search-trigger { display: none !important; }
	}
</style>