fix: nav panel is not blurred on chromium

Author: aster-void

src/islands/svelte/hamburger-button.svelte

@@ -12,24 +12,26 @@
     </div>
   </Popover.Trigger>
 
-  <Popover.Content align="end" side="bottom" strategy="fixed">
-    <div
-      transition:fade|global={{ duration: 70 }}
-      class="absolute right-0 w-[100vw] bg-gray-50/70 lg:hidden"
-    >
-      <ul>
-        {#each links as link}
-          <li class="hover:bg-gray-100">
-            <a
-              href={link.href}
-              class="block px-8 py-2"
-              data-astro-prefetch="viewport"
-            >
-              {link.title}
-            </a>
-          </li>
-        {/each}
-      </ul>
-    </div>
-  </Popover.Content>
+  <Popover.Portal>
+    <Popover.Content align="end" side="bottom">
+      <div
+        transition:fade|global={{ duration: 70 }}
+        class="absolute right-0 w-[100vw] bg-gray-50/70 backdrop-blur-lg lg:hidden"
+      >
+        <ul>
+          {#each links as link}
+            <li class="hover:bg-gray-100">
+              <a
+                href={link.href}
+                class="block px-8 py-2"
+                data-astro-prefetch="viewport"
+              >
+                {link.title}
+              </a>
+            </li>
+          {/each}
+        </ul>
+      </div>
+    </Popover.Content>
+  </Popover.Portal>
 </Popover.Root>