made navbar responsive

src/routes/user/+layout.svelte

@@ -1,19 +1,49 @@
+<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 tabbed large">
-    <a href="/user/bookings">
+
+<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>
-    </a>
-    <a href="/user/events">
+    </button>
+    <button on:click={navEvents} class="{path === "events" ? "" : "border"} no-round max vertical">
         <i>list</i>
         <span>Termine</span>
-    </a>
-    <a href="/user/creator">
+    </button>
+    <button on:click={navCreator} class="{path === "creator" ? "" : "border"} right-round max vertical">
         <i>library_add</i>
         <span>Neue Termine</span>
-    </a>
+    </button>
 </nav>