Header.svelte

<script lang="ts">
    import { page } from '$app/stores';

    import { m } from '$lib/paraglide/messages.js';

    let currentUrl = $state('');
    let showNav = $state(false);

    page.subscribe(($page) => {
        currentUrl = $page.url.pathname;
    });

    const navItems = [
        {
            href: m['common.nav.0.href'](),
            label: m['common.nav.0.label']()
        },
        {
            href: m['common.nav.1.href'](),
            label: m['common.nav.1.label']()
        },
        {
            href: m['common.nav.2.href'](),
            label: m['common.nav.2.label']()
        },
        {
            href: m['common.nav.3.href'](),
            label: m['common.nav.3.label']()
        },
        {
            href: m['common.nav.4.href'](),
            label: m['common.nav.4.label']()
        },
        {
            href: m['common.nav.5.href'](),
            label: m['common.nav.5.label']()
        },
        {
            href: m['common.nav.6.href'](),
            label: m['common.nav.6.label']()
        },
        {
            href: m['common.nav.7.href'](),
            label: m['common.nav.7.label']()
        }
    ];
</script>

<header data-test="site-header">
    <a href='/' class="logo-link" data-test="site-logo-link">
        <img class="logo" src="/layout/header/logo.min.png" alt="">

        {#if currentUrl === '/'}
            <h1 class="logotype">{m['common.scn']()}</h1>
        {:else}
            <div class="logotype">{m['common.scn']()}</div>
        {/if}
    </a>

    <button class="nav-toggle" onclick={(e) => {
        e.preventDefault();

        showNav = !showNav;
    }}>
        <img src="/layout/nav-hamburger.svg" alt={m['common.toggle_nav']()}>
    </button>
</header>

<nav class="nav" data-test="site-nav">
    <div class="nav-items" class:show-nav={showNav}>
        {#each navItems as {href, label}}
            <a
                href={href}
                class="nav-link"
                class:active={href === currentUrl}
                onclick={() => {
                    showNav = false; // close nav on click
                }}
            >
                <span>{label}</span>
            </a>
        {/each}
    </div>
</nav>

<style>
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5em 2em;
        background-color: var(--color-brand-primary);
    }

    .logo-link {
        display: flex;
        align-items: center;
        gap: 0.5em;

        text-decoration: none;
    }

    .logo {
        width: 4em;
        aspect-ratio: 1;
        object-fit: contain;
    }

    .logotype {
        margin: 0;

        color: white;
        font-size: 1.6em;
        font-weight: 500;

        @media screen and (width >= 1024px) {
            font-size: 2.2em;
        }
    }

    .nav {
        --nav-border: solid 1px var(--color-nav-border);

        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

        @media screen and (width >= 1024px) {
            padding: 0.5em 0;
        }
    }

    .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3em;
        aspect-ratio: 1;
        padding: 0.2em;

        @media screen and (width >= 1024px) {
            display: none;
        }
    }

    .nav-items {
        display: none;
        padding: 1em 0.5em;
        border: var(--nav-border);

        &.show-nav {
            display: flex;
            flex-direction: column;
            position: absolute;
            right: 0;
            z-index: 1; /* stack over carousel */

            background: white;
        }

        @media screen and (width >= 1024px) {
            display: flex;
            justify-content: center;
            width: 100%;
            padding: 0;
            position: unset;
            background: unset;
            border: none;
        }
    }

    .nav-link {
        display: inline-block;

        color: var(--color-nav-text);
        text-decoration: none;

        @media screen and (width >= 1024px) {
            flex-grow: 1;
            text-align: center;
            border-right: var(--nav-border);

            &:last-child {
                border-right: none;
            }
        }

        span {
            display: block;
            padding: 0.5em 1em;
            margin: 0 1em;

            @media screen and (width >= 1024px) {
              transition: margin 200ms, padding 200ms;
            }
        }

        &:hover span {
            text-shadow: 0 0 1px var(--color-nav-text);

            background-color: var(--color-nav-background);

            @media screen and (width >= 1024px) {
              padding: 0.5em 2em;
              margin: 0;
            }
        }

        &.active span {
            background-color: var(--color-nav-background);
        }
    }
</style>