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/drinks";

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

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

<nav class="navbar is-light is-spaced has-shadow is-fixed-top">
    <div class="navbar-brand">
        <a on:click={() => setActiveCategory("")} class="navbar-item">
            <img src={sparti_logo} />
        </a>
    </div>
    <div class="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 class="navbar-end">
            <div class="navbar-item">
                <div class="buttons">
                    <a on:click={() => console.log("TBD")} class="button is-primary">
                        <strong>Abschluss</strong>
                        <!-- Hier sollte dann auch ein Name eingegeben werden -->
                    </a>
                </div>
            </div>
            <div class="navbar-item">
                <div class="buttons">
                    <a on:click={() => console.log("TBD")} class="button is-danger">
                        <strong>Reset</strong>
                    </a>
                </div>
            </div>
        </div>
    </div>
</nav>