Scheduler-Frontend/src/routes/user/+layout.svelte

<script lang="ts">
	import { browser } from "$app/environment";
	import { goto } from "$app/navigation";

    let path: string = "";

    function navBookings() {
        path = "bookings";
        goto("/user/bookings");
    }

    function navEvents() {
        path = "events";
        goto("/user/events");
    }
    
    function navCreator() {
        path = "creator";
        goto("/user/creator");
    }

    $: {
        if (browser) {
            path = window.location.pathname.substring(window.location.pathname.lastIndexOf('/') + 1);
        }
        
    }
</script>

<nav>
    <h5 class="max center-align">Booker</h5>
</nav>

<slot />

<nav class="bottom no-space large">
    <button on:click={navBookings} class="{path === "bookings" ? "" : "border"} left-round max vertical">
        <i>event_note</i>
        <span>Buchungen</span>
    </button>
    <button on:click={navEvents} class="{path === "events" ? "" : "border"} no-round max vertical">
        <i>list</i>
        <span>Termine</span>
    </button>
    <button on:click={navCreator} class="{path === "creator" ? "" : "border"} right-round max vertical">
        <i>library_add</i>
        <span>Neue Termine</span>
    </button>
</nav>