Sai Kiran Vella
51 lines
1.7 KiB
Svelte
51 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import { page, navigating } from '$app/stores';
|
|
import '../styles/app.scss';
|
|
import Spinner from '$lib/Spinner.svelte';
|
|
import type { Snippet } from 'svelte';
|
|
let { children }: { children: Snippet } = $props();
|
|
|
|
// Resolve active path optimistically — use the destination during navigation
|
|
// so the nav link highlights immediately on click, not after load completes.
|
|
const activePath = $derived($navigating?.to?.url?.pathname ?? $page.url.pathname);
|
|
|
|
const navLabel = $derived(
|
|
activePath === '/portfolio' ? 'Loading portfolio…' :
|
|
activePath?.startsWith('/calls') ? 'Loading market calls…' :
|
|
activePath === '/safe-buys' ? 'Screening safe buys…' :
|
|
'Loading…'
|
|
);
|
|
</script>
|
|
|
|
<div class="shell">
|
|
<nav>
|
|
<span class="brand">📊 Market Screener</span>
|
|
<div class="links">
|
|
<a href="/" class:active={activePath === '/'}>Screener</a>
|
|
<a href="/portfolio" class:active={activePath === '/portfolio'}>Portfolio</a>
|
|
<a href="/calls" class:active={activePath?.startsWith('/calls')}>Market Calls</a>
|
|
<a href="/safe-buys" class:active={activePath === '/safe-buys'}>🛡 Safe Buys</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Thin progress bar at top of screen — always visible even on first nav -->
|
|
{#if $navigating}
|
|
<div class="nav-progress">
|
|
<div class="nav-bar"></div>
|
|
</div>
|
|
{/if}
|
|
|
|
<main>
|
|
{#if $navigating}
|
|
<!-- Replace old page content immediately — old page disappears, spinner takes over -->
|
|
<div class="nav-overlay">
|
|
<Spinner size="lg" label={navLabel} />
|
|
</div>
|
|
{:else}
|
|
{@render children()}
|
|
{/if}
|
|
</main>
|
|
</div>
|
|
|
|
<!-- All layout styles live in src/styles/_layout.css (global) -->
|