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

<script lang="ts">
	import { browser } from "$app/environment";
	import { goto } from "$app/navigation";
    import { t } from '$lib/translations';
	import { onMount } from "svelte";

    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);
        }
    }

    onMount(() => {
        console.log($t("common.bookings"));
    })
</script>

<nav>
    <h5 class="max center-align">{$t("common.app-title")}</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>{$t("common.bookings")}</span>
    </button>
    <button on:click={navEvents} class="{path === "events" ? "" : "border"} no-round max vertical">
        <i>list</i>
        <span>{$t("common.appointments")}</span>
    </button>
    <button on:click={navCreator} class="{path === "creator" ? "" : "border"} right-round max vertical">
        <i>library_add</i>
        <span>{$t("common.create-appointment")}</span>
    </button>
</nav>