feat: polish

src/lib/features/auth/Navbar.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import {
+		Collapse,
+		Dropdown,
+		DropdownItem,
+		DropdownMenu,
+		DropdownToggle,
+		Nav,
+		NavItem,
+		NavLink,
+		Navbar,
+		NavbarBrand,
+		NavbarToggler,
+	} from '@sveltestrap/sveltestrap';
+	import { authStore } from '$auth';
+	import { goto } from '$app/navigation';
+	import { t } from '$i18n';
+
+	// Auth is already refreshed by the root layout before this mounts.
+	let isOpen = $state(false);
+
+	async function handleLogout() {
+		await authStore.logout();
+		goto('/');
+	}
+</script>
+
+<Navbar color="light" light expand="lg" fixed="top" class="custom-navbar border-bottom">
+	<NavbarBrand href="/" class="nav-full-height">
+		<img src="/logo.svg" alt="Logo" height="34" class="d-inline-block align-text-top" />
+	</NavbarBrand>
+	<NavbarToggler on:click={() => (isOpen = !isOpen)} />
+	<Collapse {isOpen} navbar expand="lg">
+		<Nav class="me-auto mb-lg-0" navbar>
+			<NavItem>
+				<NavLink
+					href="/predict"
+					class="nav-full-height border border-top-0"
+					active={$page.url.pathname === '/predict'}>
+					{$t('nav.predict')}
+				</NavLink>
+			</NavItem>
+			<NavItem>
+				<NavLink
+					href="/track"
+					class="nav-full-height border border-top-0"
+					active={$page.url.pathname === '/track'}>
+					{$t('nav.track')}
+				</NavLink>
+			</NavItem>
+		</Nav>
+		<Nav navbar>
+			{#if $authStore.status === 'authenticated' && $authStore.username}
+				<Dropdown nav inNavbar>
+					<DropdownToggle nav caret class="nav-full-height border border-top-0">
+						{$authStore.username}
+					</DropdownToggle>
+					<DropdownMenu end>
+						<DropdownItem href="/user/account">{$t('nav.account')}</DropdownItem>
+						<DropdownItem href="/user/templates">{$t('nav.scenarios')}</DropdownItem>
+						<DropdownItem href="/user/predictions">{$t('nav.predictionHistory')}</DropdownItem>
+						<DropdownItem href="/user/flights">{$t('nav.trackingHistory')}</DropdownItem>
+						<DropdownItem divider />
+						<DropdownItem on:click={handleLogout}>{$t('nav.logout')}</DropdownItem>
+					</DropdownMenu>
+				</Dropdown>
+			{:else if $authStore.status === 'anonymous'}
+				<NavItem>
+					<NavLink
+						href="/login"
+						class="nav-full-height border border-top-0"
+						active={$page.url.pathname === '/login'}>
+						{$t('nav.login')}
+					</NavLink>
+				</NavItem>
+			{/if}
+		</Nav>
+	</Collapse>
+</Navbar>