spartacus-inventur-frontend/src/lib/Navbar.svelte

<!-- svelte-ignore a11y-missing-attribute -->
<!-- svelte-ignore a11y-click-events-have-key-events -->

<script lang="ts">
    import { activeCategory } from "../stores";

    let sparti_logo = "./src/assets/sparti_logo.png";

    const setActiveCategory = (category: string) => {
        $activeCategory = category;
    }
</script>

<main>
    <nav class="navbar is-white is-spaced has-shadow">
        <div class="navbar-brand">
            <a class="navbar-item">
                <img src={sparti_logo} />
            </a>
        </div>
        <div id="navbar-menu">
            <div class="navbar-start">
                <a class="navbar-item" on:click={() => setActiveCategory("beer")}>
                    Bier
                </a>
                <a class="navbar-item" on:click={() => setActiveCategory("fizzyDrink")}>
                    Brause & Wasser
                </a>
                <a class="navbar-item" on:click={() => setActiveCategory("wine")}>
                    Wein & Sekt
                </a>
                <a class="navbar-item" on:click={() => setActiveCategory("spirit")}>
                    Schnaps & Sirup
                </a>
            </div>
        </div>
    </nav>
</main>