mikhailov.aa/leaflet_svelte
1
Fork 0
Code Issues 10 Pull requests 2 Projects 1 Releases Activity

feat: polish #13

Open
a.antonov wants to merge 8 commits from polish into components
pull from: polish
merge into: mikhailov.aa:components
Conversation 0 Commits 8 Files changed 170 +135 -68
1 changed files with 135 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 7a2278a42e - Show all commits

203
src/lib/features/auth/Navbar.svelte
View file

@ -1,80 +1,147 @@
<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);
let isNavOpen = $state(false);
let isDropdownOpen = $state(false);
async function handleLogout() {
await authStore.logout();
goto('/');
await goto('/');
}
function closeAll() {
isNavOpen = false;
isDropdownOpen = false;
}
</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>
<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>