[docs] Refactor sidebar to have it pop out on mobile

src/routes/__layout.svelte

@@ -1,14 +1,30 @@
 <script>
+  import { MenuAlt2Icon } from "@rgossiaux/svelte-heroicons/outline";
+
   import "../app.css";
+  import MobileSidebar from "./docs/_MobileSidebar.svelte";
+
+  let sidebarOpen = false;
 </script>
 
+<MobileSidebar bind:sidebarOpen />
 <div
   class="sticky top-0 px-6 text-xl text-stone-500 w-full backdrop-blur border-b z-20"
 >
-  <div class="py-4 pr-4 flex justify-between">
+  <div class="py-4 pr-4 flex justify-between items-center">
+    <div class="flex items-center space-x-4 md:space-x-0">
+      <button
+        type="button"
+        class="pr-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 md:hidden"
+        on:click={() => (sidebarOpen = true)}
+      >
+        <span class="sr-only">Open sidebar</span>
+        <MenuAlt2Icon class="h-6 w-6" aria-hidden="true" />
+      </button>
       <a href="/docs">
         <span class="text-amber-600">Svelte</span> Headless UI
       </a>
+    </div>
     <a
       href="https://github.com/rgossiaux/svelte-headlessui"
       class="hover:text-black"

src/routes/docs/_MobileSidebar.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { Dialog, DialogOverlay, Transition, TransitionChild } from "$lib";
+  import { XIcon } from "@rgossiaux/svelte-heroicons/outline";
+  import Sidebar from "./_Sidebar.svelte";
+  export let sidebarOpen = false;
+</script>
+
+<Transition show={sidebarOpen}>
+  <Dialog
+    class="fixed inset-0 flex z-40 md:hidden"
+    on:close={() => (sidebarOpen = false)}
+  >
+    <TransitionChild
+      enter="transition-opacity ease-linear duration-300"
+      enterFrom="opacity-0"
+      enterTo="opacity-100"
+      leave="transition-opacity ease-linear duration-300"
+      leaveFrom="opacity-100"
+      leaveTo="opacity-0"
+    >
+      <DialogOverlay class="absolute inset-0 bg-gray-600 bg-opacity-75" />
+    </TransitionChild>
+    <TransitionChild
+      enter="transition ease-in-out duration-300 transform"
+      enterFrom="-translate-x-full"
+      enterTo="translate-x-0"
+      leave="transition ease-in-out duration-300 transform"
+      leaveFrom="translate-x-0"
+      leaveTo="-translate-x-full"
+    >
+      <div
+        class="relative flex-1 flex flex-col max-w-xs w-full h-full bg-white"
+      >
+        <TransitionChild
+          enter="ease-in-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in-out duration-300"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div class="absolute top-0 right-0 -mr-12 pt-2">
+            <button
+              type="button"
+              class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
+              on:click={() => (sidebarOpen = false)}
+            >
+              <span class="sr-only">Close sidebar</span>
+              <XIcon class="h-6 w-6 text-white" aria-hidden="true" />
+            </button>
+          </div>
+        </TransitionChild>
+        <div class="mt-5 flex-1 h-0 overflow-y-auto">
+          <Sidebar />
+        </div>
+      </div>
+    </TransitionChild>
+    <div class="flex-shrink-0 w-14" aria-hidden="true">
+      <!-- Dummy element to force sidebar to shrink to fit close icon -->
+    </div>
+  </Dialog>
+</Transition>

src/routes/docs/_Sidebar.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { page } from "$app/stores";
+
+  $: isHome = $page.path.endsWith("docs");
+  $: base = isHome ? "docs/" : "";
+
+  $: pages = [
+    { url: "../docs", text: "Home" },
+    { url: `${base}general-concepts`, text: "General concepts" },
+    { url: `${base}tailwind-ui`, text: "Use with Tailwind UI" },
+    { url: `${base}version-history`, text: "Version history" },
+  ];
+
+  $: components = [
+    { url: `${base}dialog`, text: "Dialog" },
+    { url: `${base}disclosure`, text: "Disclosure" },
+    { url: `${base}listbox`, text: "Listbox" },
+    { url: `${base}menu`, text: "Menu" },
+    { url: `${base}popover`, text: "Popover" },
+    { url: `${base}radio-group`, text: "Radio Group" },
+    { url: `${base}switch`, text: "Switch" },
+    { url: `${base}tabs`, text: "Tabs" },
+    { url: `${base}transition`, text: "Transition" },
+  ];
+</script>
+
+<nav title="Pages" class="flex flex-col px-6">
+  {#each pages as p (p.url)}
+    <a
+      href={p.url}
+      class:font-bold={$page.path.includes(p.url)}
+      class="py-1 hover:decoration-stone-400 hover:underline"
+    >
+      {p.text}
+    </a>
+  {/each}
+  <hr class="w-24 my-4" />
+  {#each components as component (component.url)}
+    <a
+      href={component.url}
+      class:font-bold={$page.path.includes(component.url)}
+      class="py-1 hover:decoration-stone-400 hover:underline"
+    >
+      {component.text}
+    </a>
+  {/each}
+</nav>

src/routes/docs/__layout.svelte

@@ -1,30 +1,9 @@
 <script lang="ts">
   import TableOfContents from "./_TableOfContents.svelte";
   import { page } from "$app/stores";
+  import Sidebar from "./_Sidebar.svelte";
 
   let el: HTMLElement | null = null;
-
-  $: isHome = $page.path.endsWith("docs");
-  $: base = isHome ? "docs/" : "";
-
-  $: pages = [
-    { url: "../docs", text: "Home" },
-    { url: `${base}general-concepts`, text: "General concepts" },
-    { url: `${base}tailwind-ui`, text: "Use with Tailwind UI" },
-    { url: `${base}version-history`, text: "Version history" },
-  ];
-
-  $: components = [
-    { url: `${base}dialog`, text: "Dialog" },
-    { url: `${base}disclosure`, text: "Disclosure" },
-    { url: `${base}listbox`, text: "Listbox" },
-    { url: `${base}menu`, text: "Menu" },
-    { url: `${base}popover`, text: "Popover" },
-    { url: `${base}radio-group`, text: "Radio Group" },
-    { url: `${base}switch`, text: "Switch" },
-    { url: `${base}tabs`, text: "Tabs" },
-    { url: `${base}transition`, text: "Transition" },
-  ];
 </script>
 
 <svelte:head>
@@ -33,25 +12,11 @@
 
 <div class="flex">
   <div class="w-52 min-w-fit hidden md:block flex-shrink-0">
-    <nav title="Pages" class="sticky top-20 ml-6 flex flex-col">
-      {#each pages as p (p.url)}
-        <a
-          href={p.url}
-          class:font-bold={$page.path.includes(p.url)}
-          class="py-1 hover:decoration-stone-400 hover:underline">{p.text}</a
-        >
-      {/each}
-      <hr class="w-24 my-4" />
-      {#each components as component (component.url)}
-        <a
-          href={component.url}
-          class:font-bold={$page.path.includes(component.url)}
-          class="py-1 hover:decoration-stone-400 hover:underline"
-          >{component.text}</a
-        >
-      {/each}
-    </nav>
+    <div class="sticky top-20">
+      <Sidebar />
     </div>
+  </div>
+
   <article class="prose max-w-3xl min-w-0 mt-5 px-6 pb-8" bind:this={el}>
     <slot />
   </article>