fix: allow mobile sidebar to reopen after closing

src/components/Sidebar.astro

@@ -5,12 +5,12 @@ import SidebarFooter from "./SidebarFooter.astro";
 import SidebarMenu from "./SidebarMenu.astro";
 ---
 
-<div class="fixed inset-y-0 left-0 z-40 md:relative" id="sidebar">
+<div class="pointer-events-none fixed inset-y-0 left-0 z-40 md:pointer-events-auto md:relative" id="sidebar">
   <!-- Hidden overlay for mobile - shown when sidebar is open -->
-  <div class="fixed inset-0 hidden bg-black/50 transition-opacity md:hidden" id="sidebar-overlay"></div>
+  <div class="fixed inset-0 z-10 hidden bg-black/50 transition-opacity md:hidden" id="sidebar-overlay"></div>
 
   <aside
-    class="bg-sidebar flex hidden h-screen w-[15rem] flex-col px-2 pt-2 text-white md:sticky md:top-0 md:flex"
+    class="bg-sidebar relative z-20 flex hidden h-screen w-[15rem] flex-col px-2 pt-2 text-white md:sticky md:top-0 md:flex"
     id="sidebar-panel"
   >
     <div class="mx-auto mt-5 mb-6 w-fit">
@@ -43,6 +43,7 @@ import SidebarMenu from "./SidebarMenu.astro";
 <script is:inline>
   const overlay = document.getElementById("sidebar-overlay");
   const panel = document.getElementById("sidebar-panel");
+  const container = document.getElementById("sidebar");
   const headerEl = document.getElementById("site-header");
   const contentEl = document.getElementById("page-content");
   let previouslyFocused = null;
@@ -56,14 +57,18 @@ import SidebarMenu from "./SidebarMenu.astro";
   }
 
   function toggle() {
-    if (!overlay || !panel) return;
+    if (!overlay || !panel || !container) return;
     const showing = !panel.classList.contains("hidden");
     if (showing) {
       panel.classList.add("hidden");
       overlay.classList.add("hidden");
+      container.classList.remove("pointer-events-auto");
+      container.classList.add("pointer-events-none");
     } else {
       panel.classList.remove("hidden");
       overlay.classList.remove("hidden");
+      container.classList.remove("pointer-events-none");
+      container.classList.add("pointer-events-auto");
     }
     const open = !panel.classList.contains("hidden");
 
@@ -117,8 +122,8 @@ import SidebarMenu from "./SidebarMenu.astro";
       headerEl?.removeAttribute("inert");
       contentEl?.removeAttribute("inert");
       document.body.style.overflow = "";
-      // Return focus to the toggle button if possible
-      if (previouslyFocused && previouslyFocused.focus) {
+      // Return focus on desktop only; mobile Safari requires an extra tap after programmatic focus
+      if (previouslyFocused && previouslyFocused.focus && window.matchMedia("(min-width: 768px)").matches) {
         try {
           previouslyFocused.focus();
         } catch {}

src/pages/posts/[...page].astro

@@ -1,11 +1,13 @@
 ---
 import PostListingLayout from "../../layouts/PostListingLayout.astro";
 import { getCollection } from "astro:content";
+import type { CollectionEntry } from "astro:content";
+import type { PaginateFunction } from "astro";
 
-export async function getStaticPaths({ paginate }) {
-  const posts = await getCollection("posts", ({ data }) => {
+export async function getStaticPaths({ paginate }: { paginate: PaginateFunction }) {
+  const posts = (await getCollection("posts", ({ data }) => {
     return data.draft !== true;
-  });
+  })) as CollectionEntry<"posts">[];
   posts.sort((a, b) => new Date(b.data.pubDate).valueOf() - new Date(a.data.pubDate).valueOf());
   return paginate(posts, { pageSize: 10 });
 }

src/pages/posts/[slug].astro

@@ -1,5 +1,6 @@
 ---
-import { CollectionEntry, getCollection } from "astro:content";
+import { getCollection } from "astro:content";
+import type { CollectionEntry } from "astro:content";
 import type { PostSchema } from "../../content/posts/config";
 import PostLayout from "../../layouts/PostLayout.astro";
 import { readingTime } from "../../lib/readingTime";

src/pages/posts/[tag]/[page].astro

@@ -1,12 +1,14 @@
 ---
 import PostListingLayout from "../../../layouts/PostListingLayout.astro";
 import { getCollection } from "astro:content";
+import type { CollectionEntry } from "astro:content";
+import type { PaginateFunction } from "astro";
 
-export async function getStaticPaths({ paginate }) {
+export async function getStaticPaths({ paginate }: { paginate: PaginateFunction }) {
   const posts = (
-    await getCollection("posts", ({ data }) => {
+    (await getCollection("posts", ({ data }) => {
       return data.draft !== true;
-    })
+    })) as CollectionEntry<"posts">[]
   ).sort((a, b) => new Date(b.data.pubDate).valueOf() - new Date(a.data.pubDate).valueOf());
   const tags = posts.flatMap((post) => post.data.tags).flat();