Add mobile support to v2 docs (#767)

documentation-v2/src/components/Header.astro

@@ -1,18 +1,68 @@
-<header
-    class="w-full py-3 px-8 fixed top-0 border-b bg-white z-30 flex place-items-center gap-x-16"
->
-    <a class="pointer-events-auto flex place-items-center" href="/">
-        <img
-            src="/logo.svg"
-            alt="Lucia logo"
-            width="100"
-            height="100"
-            class="h-5 w-5"
-        />
-        <p class="text-xl font-bold">Lucia</p>
-    </a>
-    <div class="flex gap-x-10 place-items-center text-sm font-medium">
-        <a href="/reference" class="hover:text-main">Reference</a>
-        <a href="/oauth" class="hover:text-main">OAuth</a>
+---
+import MenuIcon from "@icons/MenuIcon.astro";
+import MoreIcon from "@icons/MoreIcon.astro";
+---
+
+<header class="w-full fixed top-0 bg-white z-30">
+    <div
+        class="flex place-items-center place-content-between sm:place-content-start gap-x-16 py-3 border-b px-4 sm:px-8"
+    >
+        <a class="pointer-events-auto flex place-items-center" href="/">
+            <img
+                src="/logo.svg"
+                alt="Lucia logo"
+                width="100"
+                height="100"
+                class="h-5 w-5"
+            />
+            <p class="text-xl font-bold">Lucia</p>
+        </a>
+        <div
+            class="gap-x-10 place-items-center text-sm font-medium hidden sm:flex"
+        >
+            <a href="/reference" class="hover:text-main">Reference</a>
+            <a href="/oauth" class="hover:text-main">OAuth</a>
+        </div>
+        <div class="sm:hidden">
+            <button class="p-1 rounded block hover:bg-indigo-50" id="more-button">
+                <div class="w-5 h-5 fill-current">
+                    <MoreIcon />
+                </div>
+            </button>
+            <div class="absolute right-0 mr-4 bg-white rounded border text-sm font-medium py-2 w-36 shadow hidden sm:hidden" id="more-dropdown">
+                <a href="/reference" class="hover:bg-indigo-50 block px-4 py-1.5">Reference</a>
+                <a href="/oauth" class="hover:bg-indigo-50 block px-4 py-1.5">OAuth</a>
+            </div>
+        </div>
+    </div>
+    <div class="lg:hidden px-4 sm:px-8 py-1.5 border-b">
+        <button class="p-1 rounded block hover:bg-indigo-50" id="menu-button">
+            <div class="w-5 h-5 fill-current">
+                <MenuIcon />
+            </div>
+        </button>
     </div>
 </header>
+<script>
+    import { onMoreToggle, toggleMore , toggleMenu} from "@utils/state";
+    const menuButton = document.getElementById("menu-button");
+    const moreButton = document.getElementById("more-button")
+    if (menuButton instanceof HTMLButtonElement) {
+        menuButton.addEventListener("click", toggleMenu);
+    }
+    if (moreButton instanceof HTMLButtonElement) {
+        moreButton.addEventListener("click", toggleMore);
+    }
+
+    const moreDropdownDiv = document.getElementById("more-dropdown")
+    if (moreDropdownDiv instanceof HTMLDivElement) {
+        onMoreToggle((dropdownOpened) => {
+            if (dropdownOpened) {
+                moreDropdownDiv.classList.remove("hidden");
+            } else {
+                moreDropdownDiv.classList.add("hidden");
+            }
+        });
+    }
+
+</script>

documentation-v2/src/components/Menu.astro

@@ -0,0 +1,113 @@
+---
+import type { SubCollection } from "@content";
+
+type Props = {
+    collectionId: string;
+    subCollections: SubCollection[];
+    title?: string;
+};
+---
+
+<div
+    class="h-screen fixed left-0 top-0 border-r hidden lg:block lg:w-72 bg-white pt-24 lg:pt-16 w-full"
+    id="menu"
+>
+    <input type="hidden" value={Astro.props.collectionId} id="collection-id" />
+    {
+        Astro.props.title && (
+            <p class=" ml-8 font-semibold">{Astro.props.title}</p>
+        )
+    }
+    <div
+        class="overflow-auto h-full overscroll-contain pt-2 text-sm"
+        id="content-nav"
+    >
+        <slot />
+        {
+            Astro.props.subCollections.map((subCollection) => {
+                return (
+                    <div class="mb-6">
+                        <p class="ml-8 text-sm font-medium text-zinc-400">
+                            {subCollection.title}
+                        </p>
+                        <ul class="mt-0.5">
+                            {subCollection.pages
+                                .filter((page) => !page.hidden)
+                                .map((page) => {
+                                    const urlPathname = [
+                                        "",
+                                        ...page.pathname
+                                            .split("/")
+                                            .filter((segment, i) => {
+                                                return (
+                                                    i !== 0 ||
+                                                    segment !== "main"
+                                                );
+                                            })
+                                    ].join("/");
+                                    const selected =
+                                        Astro.url.pathname.split("/").length >=
+                                            page.pathname.split("/").length &&
+                                        Astro.url.pathname.includes(
+                                            urlPathname
+                                        );
+                                    return (
+                                        <li>
+                                            <a
+                                                href={urlPathname}
+                                                class:list={[
+                                                    "w-full py-1 pl-8 hover:bg-indigo-50 block",
+                                                    {
+                                                        "bg-gray-100": selected
+                                                    }
+                                                ]}
+                                                set:html={page.htmlTitle}
+                                            />
+                                        </li>
+                                    );
+                                })}
+                        </ul>
+                    </div>
+                );
+            })
+        }
+    </div>
+</div>
+<script is:inline>
+const contentNavigationElement = document.getElementById("content-nav");
+const collectionIdElement = document.getElementById("collection-id");
+if (
+    contentNavigationElement instanceof HTMLDivElement &&
+    collectionIdElement instanceof HTMLInputElement
+) {
+    const collectionId = collectionIdElement.value;
+    const storedScrollPosition = sessionStorage.getItem("scroll_position");
+    if (storedScrollPosition !== null) {
+        const [prevCollectionId, prevScrollPosition] =
+            storedScrollPosition.split(":");
+        if (prevCollectionId === collectionId) {
+            contentNavigationElement.scrollTop = Number(prevScrollPosition);
+        }
+    }
+    contentNavigationElement.addEventListener("click", () => {
+        sessionStorage.setItem(
+            `scroll_position`,
+            `${collectionId}:${contentNavigationElement.scrollTop.toString()}`
+        );
+    });
+}
+</script>
+<script>
+    import { onMenuToggle } from "@utils/state";
+
+    const menuDiv = document.getElementById("menu");
+    if (menuDiv instanceof HTMLDivElement) {
+        onMenuToggle((menuOpened) => {
+            if (menuOpened) {
+                menuDiv.classList.remove("hidden");
+            } else {
+                menuDiv.classList.add("hidden");
+            }
+        });
+    }
+</script>

documentation-v2/src/icons/MenuIcon.astro

@@ -0,0 +1,7 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 -960 960 960"
+    ><path
+        d="M150-240q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T150-300h660q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T810-240H150Zm0-210q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T150-510h660q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T810-450H150Zm0-210q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T150-720h660q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T810-660H150Z"
+    ></path>
+</svg>

documentation-v2/src/icons/MoreIcon.astro

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
+    <circle cx="20%" cy="50%" r="1.75"></circle>
+    <circle cx="50%" cy="50%" r="1.75"></circle>
+    <circle cx="80%" cy="50%" r="1.75"></circle>
+</svg>

documentation-v2/src/layouts/BaseLayout.astro

@@ -7,8 +7,8 @@ type Props = {
 const { title, description } = Astro.props;
 
 const origin = import.meta.env.DEV
-	? Astro.url.origin
-	: "https://v2.lucia-auth.com";
+    ? Astro.url.origin
+    : "https://v2.lucia-auth.com";
 ---
 
 <html lang="en">

documentation-v2/src/layouts/MainLayout.astro

@@ -1,8 +1,8 @@
 ---
-import DocumentationNav from "@components/ContentNav.astro";
 import Header from "@components/Header.astro";
 import { getSubCollections } from "@content";
 import BaseLayout from "./BaseLayout.astro";
+import Menu from "@components/Menu.astro";
 
 const subCollections = await getSubCollections("main");
 
@@ -16,10 +16,15 @@ const { title, description } = Astro.props;
 
 <BaseLayout title={title} description={description}>
     <Header />
-    <div class="h-screen fixed left-0 top-0 border-r w-80 bg-white pt-16">
-        <DocumentationNav subCollections={subCollections} collectionId="main" />
-    </div>
-    <main class="py-20 px-16 ml-80 overflow-hidden">
+    <Menu subCollections={subCollections} collectionId="main" />
+    <main
+        class="mt-24 lg:mt-20 pb-20 px-4 sm:px-8 md:px-16 lg:ml-72 overflow-hidden"
+    >
         <slot />
     </main>
 </BaseLayout>
+<style>
+    :global(html) {
+        @apply scroll-p-20;
+    }
+</style>

documentation-v2/src/layouts/OAuthLayout.astro

@@ -1,5 +1,5 @@
 ---
-import DocumentationNav from "@components/ContentNav.astro";
+import Menu from "@components/Menu.astro";
 import Header from "@components/Header.astro";
 import { getSubCollections } from "@content";
 import BaseLayout from "./BaseLayout.astro";
@@ -16,20 +16,25 @@ const { title, description } = Astro.props;
 
 <BaseLayout title={title} description={description}>
     <Header />
-    <div class="h-screen fixed left-0 top-0 border-r w-80 bg-white pt-16">
-        <p class="ml-8 font-semibold mb-2">OAuth</p>
+    <Menu subCollections={subCollections} collectionId="oauth" title="OAuth">
         <a
             href="/oauth"
             class:list={[
-                "w-full py-1 pl-8 hover:bg-indigo-50 block text-sm mb-2",
+                "w-full py-1 pl-8 hover:bg-indigo-50 block text-sm mb-4",
                 {
                     "bg-gray-100": Astro.url.pathname === "/oauth"
                 }
             ]}>Overview</a
         >
-        <DocumentationNav subCollections={subCollections}collectionId="oauth"  />
-    </div>
-    <main class="py-20 px-16 ml-80 overflow-hidden">
-        <slot />
-    </main>
+    </Menu>
+    <main
+    class="mt-24 lg:mt-20 pb-20 px-4 sm:px-8 md:px-16 lg:ml-72 overflow-hidden"
+>
+    <slot />
+</main>
 </BaseLayout>
+<style>
+    :global(html) {
+        @apply scroll-p-20;
+    }
+</style>