stocks-fe/src/components/Header.svelte

<script>
	import { page } from '$app/stores';
	import profile from '$lib/images/profile.png';
	import { authentication } from '../routes/store.js';
	import { onMount } from 'svelte';

	let username = undefined;
	let profileTitle = undefined;

	const unsubscribe = authentication.subscribe((value) => {
		username = value ? value.username : '';
		profileTitle = value ? `You are logged in as ${value.username}` : 'Login';
	});

	onMount(() => {
		const storedAuth = localStorage.getItem('authentication');
		if (storedAuth) {
			try {
				authentication.set(JSON.parse(storedAuth));
			} catch (e) {
				console.error('Failed to parse auth from localStorage', e);
			}
		}

		return () => {
			unsubscribe();
		};
	});
</script>

<header>
	<div class="corner">
		<!-- logo -->
	</div>

	<nav>
		<ul>
			<li aria-current={$page.url.pathname === '/home' ? 'page' : undefined}>
				<a href="/home">Home</a>
			</li>
			{#if username !== ''}
				<li aria-current={$page.url.pathname === '/stocks' ? 'page' : undefined}>
					<a href="/stocks">Stocks</a>
				</li>
				<li aria-current={$page.url.pathname === '/portfolio' ? 'page' : undefined}>
					<a href="/portfolio">Portfolio</a>
				</li>
				<li aria-current={$page.url.pathname === '/insights' ? 'page' : undefined}>
					<a href="/insights">Insights</a>
				</li>
			{/if}
<!--			<li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>-->
<!--				<a href="/about">About</a>-->
<!--			</li>-->
		</ul>
	</nav>

	<div class="corner">
		<a href="/profile">
		<div class="login-message">{username}</div>
			<img src={profile} alt="Profile" style="width: 16px; height: 16px;" title={profileTitle} />
		</a>
	</div>
</header>

<style>
	header {
		display: flex;
		justify-content: space-between;
		background-color: #a5b1c2;
		width: 100%;
	}

	.corner {
		padding-right: 1em;
		height: 3em;
		display: flex;
		align-items: center;
	}

	.login-message {
		margin-right: 8px;
		color: var(--color-text);
	}

	.corner a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	.corner img {
		width: 2em;
		height: 2em;
		object-fit: contain;
	}

	nav {
		flex-grow: 1;
		justify-content: flex-start;
	}

	ul {
		padding: 0;
		margin: 0;
		height: 3em;
		display: flex;
		align-items: center;
		list-style: none;
		background: var(--background);
		background-size: contain;
	}

	li {
		position: relative;
		height: 100%;
	}

	li[aria-current='page']::before {
		--size: 6px;
		content: '';
		width: 0;
		height: 0;
		position: absolute;
		top: 0;
		left: calc(50% - var(--size));
		border: var(--size) solid transparent;
		border-top: var(--size) solid var(--color-theme-1);
	}

	nav a {
		display: flex;
		height: 100%;
		align-items: center;
		padding: 0 0.5rem;
		color: var(--color-text);
		font-weight: 700;
		font-size: 0.8rem;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		text-decoration: none;
		transition: color 0.2s linear;
	}

	a:hover {
		color: var(--color-theme-1);
	}
</style>