stocks-fe/src/routes/Header.svelte

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

    let username = null;
    let profileTitle = null;

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

    onMount(() => {
        const storedAuth = localStorage.getItem('auth');
        if (storedAuth) {
            try {
                auth.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 === '/' ? 'page' : undefined}>
                <a href="/">Home</a>
            </li>
            <li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
                <a href="/about">About</a>
            </li>
        </ul>
    </nav>

    <div class="corner">
        <div class="login-message">{username}</div>
        <a href="/login">
            <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; /* Enable flexbox layout */
        align-items: center; /* Center items vertically */
    }

    .login-message {
        margin-right: 8px; /* Add some space between the message and the profile image */
        color: var(--color-text); /* Ensure the text color is set */
    }

    .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; /* Aligns the menu to the left */
    }

    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>