fix menu not showing active page

src/app/layout/Menu.svelte

@@ -12,11 +12,15 @@
   import { navigate } from 'astro:transitions/client';
   import { onMount } from 'svelte';
 
+  // html bindings
+  let navElem: HTMLDivElement;
+
+  // states
   let navPaths = $state([
     {
       name: 'Startseite',
       sprite: MenuHome.src,
-      href: ``,
+      href: '',
       active: false
     },
     {
@@ -56,20 +60,22 @@
   let isOpen = $state(false);
   let windowHeight = $state(0);
 
+  // lifecycle
   $effect(() => {
     localStorage.setItem('showMenuPermanent', `${showMenuPermanent}`);
   });
 
   onMount(() => {
-    new MutationObserver(() => {
+    updateActiveNavPath();
-      for (let i = 0; i < navPaths.length; i++) {
+    new MutationObserver(updateActiveNavPath).observe(document.head, { childList: true });
-        console.log(navPaths[i].href, window.location.pathname);
-        navPaths[i].active = new URL(navPaths[i].href).pathname === window.location.pathname;
-      }
-    }).observe(document.head, { childList: true });
   });
 
-  let navElem: HTMLDivElement;
+  // functions
+  function updateActiveNavPath() {
+    for (let i = 0; i < navPaths.length; i++) {
+      navPaths[i].active = new URL(document.baseURI).pathname + navPaths[i].href === window.location.pathname;
+    }
+  }
 </script>
 
 <svelte:window bind:innerHeight={windowHeight} />