147 lines
4 KiB
Svelte
147 lines
4 KiB
Svelte
<script lang="ts">
|
|
import { page } from '$app/stores';
|
|
import { authStore } from '$auth';
|
|
import { goto } from '$app/navigation';
|
|
import { t } from '$i18n';
|
|
|
|
let isNavOpen = $state(false);
|
|
let isDropdownOpen = $state(false);
|
|
|
|
async function handleLogout() {
|
|
await authStore.logout();
|
|
await goto('/');
|
|
}
|
|
|
|
function closeAll() {
|
|
isNavOpen = false;
|
|
isDropdownOpen = false;
|
|
}
|
|
</script>
|
|
|
|
<svelte:window onclick={() => { if (isDropdownOpen) isDropdownOpen = false; }} />
|
|
|
|
<style>
|
|
/* Stretch the container chain so every nav item reaches the full navbar height */
|
|
.container-fluid {
|
|
height: 100%;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.navbar-collapse {
|
|
align-self: stretch;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.navbar-nav {
|
|
align-self: stretch;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: stretch;
|
|
}
|
|
|
|
/* Normalize <button> to match <a> nav-links exactly */
|
|
button.nav-link {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
border-radius: 0;
|
|
font-size: inherit;
|
|
font-family: inherit;
|
|
background-color: white;
|
|
}
|
|
|
|
button.nav-link:hover {
|
|
color: white !important;
|
|
background-color: var(--bs-primary);
|
|
}
|
|
|
|
/* Keep dropdown within viewport — clip vertically, guard horizontal edge */
|
|
.dropdown-menu {
|
|
max-height: calc(100vh - var(--navbar-height) - 4px);
|
|
overflow-y: auto;
|
|
right: 0;
|
|
left: auto;
|
|
max-width: calc(100vw - 1.5rem);
|
|
}
|
|
</style>
|
|
|
|
<nav class="navbar navbar-expand-lg navbar-light fixed-top custom-navbar border-bottom">
|
|
<div class="container-fluid px-3">
|
|
<a class="navbar-brand nav-full-height" href="/">
|
|
<img src="/logo.svg" alt="Logo" height="34" class="d-inline-block align-text-top" />
|
|
</a>
|
|
|
|
<button
|
|
type="button"
|
|
class="navbar-toggler"
|
|
aria-controls="mainNav"
|
|
aria-expanded={isNavOpen}
|
|
aria-label="Toggle navigation"
|
|
onclick={() => (isNavOpen = !isNavOpen)}>
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" class:show={isNavOpen} id="mainNav">
|
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
|
<li class="nav-item">
|
|
<a
|
|
href="/predict"
|
|
class="nav-link nav-full-height border border-top-0"
|
|
class:active={$page.url.pathname === '/predict'}
|
|
onclick={closeAll}>
|
|
{$t('nav.predict')}
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
href="/track"
|
|
class="nav-link nav-full-height border border-top-0"
|
|
class:active={$page.url.pathname === '/track'}
|
|
onclick={closeAll}>
|
|
{$t('nav.track')}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul class="navbar-nav">
|
|
{#if $authStore.status === 'authenticated' && $authStore.username}
|
|
<li class="nav-item dropdown" class:show={isDropdownOpen}>
|
|
<button
|
|
type="button"
|
|
class="nav-link nav-full-height border border-top-0 dropdown-toggle"
|
|
aria-expanded={isDropdownOpen}
|
|
onclick={(e) => { e.stopPropagation(); isDropdownOpen = !isDropdownOpen; }}>
|
|
{$authStore.username}
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end" class:show={isDropdownOpen}>
|
|
<li><a class="dropdown-item" href="/user/account" onclick={closeAll}>{$t('nav.account')}</a></li>
|
|
<li><a class="dropdown-item" href="/user/templates" onclick={closeAll}>{$t('nav.scenarios')}</a></li>
|
|
<li><a class="dropdown-item" href="/user/predictions" onclick={closeAll}>{$t('nav.predictionHistory')}</a></li>
|
|
<li><a class="dropdown-item" href="/user/flights" onclick={closeAll}>{$t('nav.trackingHistory')}</a></li>
|
|
<li><hr class="dropdown-divider" /></li>
|
|
<li>
|
|
<button type="button" class="dropdown-item" onclick={handleLogout}>
|
|
{$t('nav.logout')}
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
{:else if $authStore.status === 'anonymous'}
|
|
<li class="nav-item">
|
|
<a
|
|
href="/login"
|
|
class="nav-link nav-full-height border border-top-0"
|
|
class:active={$page.url.pathname === '/login'}
|
|
onclick={closeAll}>
|
|
{$t('nav.login')}
|
|
</a>
|
|
</li>
|
|
{/if}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|