adding header links to sidebar on mobile

_components/Sidebar.tsx

@@ -1,4 +1,5 @@
 import Searcher from "lume/core/searcher.ts";
+import SidebarTopNav from "./SidebarTopNav.tsx";
 import {
   Sidebar as Sidebar_,
   SidebarCategory as SidebarCategory_,
@@ -20,12 +21,23 @@ export default function Sidebar(
       class="p-2 pt-0 pr-0 overflow-y-auto overflow-x-hidden"
       style={{ scrollbarGutter: "stable", scrollbarWidth: "thin" }}
     >
+      {props.url !== "/" &&
+        (
+          <ul className="xl:hidden">
+            <SidebarTopNav name="Runtime" url="/runtime/" />
+            <SidebarTopNav name="API reference" url="/api/deno" />
+            <SidebarTopNav name="Examples" url="/examples/" />
+            <SidebarTopNav name="Deploy" url="/deploy/" />
+            <SidebarTopNav name="Subhosting" url="/subhosting/" />
+          </ul>
+        )}
       <ul>
         {props.sidebar.map((section) => (
           <SidebarSection
             section={section}
             search={props.search}
             url={props.url}
+            headerPath={props.headerPath}
           />
         ))}
       </ul>
@@ -45,8 +57,8 @@ function SidebarSection(
     str.replaceAll(/[\s_]/g, "-")
       .replaceAll(/[^a-zA-Z0-9-]/g, "")
       .toLowerCase();
-  const slug = slugify(props.section.title ?? "");
-  const categoryTitle = `sidebar-category-${slug}`;
+  const slug = "-" + slugify(props.section.title ?? "");
+  const categoryTitle = `sidebar-category${slug}`;
   const headingLink = props.section.href;
 
   return (
@@ -145,7 +157,7 @@ function SidebarCategory(props: {
     if (typeof item === "string") {
       return item === props.url;
     }
-    return item.id === props.url;
+    return typeof item === "object" && "id" in item && item.id === props.url;
   });
 
   return (
@@ -176,7 +188,21 @@ function SidebarCategory(props: {
         data-accordion-content
       >
         {props.item.items.map((item) => (
-          <SidebarItem item={item} search={props.search} url={props.url} />
+          typeof item === "object" && "items" in item
+            ? (
+              <SidebarCategory
+                item={item}
+                url={props.url}
+                search={props.search}
+              />
+            )
+            : (
+              <SidebarItem
+                item={item}
+                search={props.search}
+                url={props.url}
+              />
+            )
         ))}
       </ul>
     </>

_components/SidebarTopNav.tsx

@@ -0,0 +1,12 @@
+export default function SidebarTopNav(props: { name: string; url: string }) {
+  return (
+    <li class="mx-2">
+      <a
+        class="block px-3 py-1.5 text-[.8125rem] leading-4 font-normal text-foreground-secondary rounded-md ring-1 ring-transparent hover:ring-background-tertiary hover:bg-background-secondary current:bg-background-secondary current:text-blue-500 current:font-semibold transition-colors duration-200 ease-in-out select-none"
+        href={props.url}
+      >
+        {props.name}
+      </a>
+    </li>
+  );
+}

_components/ToTop.tsx

@@ -0,0 +1,12 @@
+export default function ToTop() {
+  return (
+    <a href="#" className="top docs-cta runtime-cta">
+      <span>
+        &#8679;
+      </span>
+      <span>
+        To top
+      </span>
+    </a>
+  );
+}

_includes/raw.tsx

@@ -3,14 +3,6 @@ export const layout = "layout.tsx";
 export default function Raw(props: Lume.Data, helpers: Lume.Helpers) {
   const reference = props.url.startsWith("/api");
 
-  if (reference) {
-    return (
-      <div>
-        {props.children}
-      </div>
-    );
-  }
-
   return (
     <>
       {props.sidebar && (
@@ -55,20 +47,12 @@ export default function Raw(props: Lume.Data, helpers: Lume.Helpers) {
               url={props.url}
             />
           </aside>
-          <div
-            class="absolute inset-0 backdrop-brightness-50 z-40 hidden sidebar-open:block sidebar-open:xl:hidden"
-            id="sidebar-cover"
-            data-open="false"
-          >
-          </div>
         </>
       )}
-      <div
-        class="absolute top-16 bottom-0 left-0 right-0 overflow-y-auto"
-        style={{ scrollbarGutter: "stable" }}
-      >
+      <div style={{ scrollbarGutter: "stable" }}>
         {props.children}
-        <props.comp.Footer />
+        {reference && <props.comp.ToTop />}
+        {!reference && <props.comp.Footer />}
       </div>
     </>
   );

examples/index.tsx

@@ -1,30 +1,5 @@
 export const layout = "raw.tsx";
-export const sidebar = [
-  {
-    items: [
-      {
-        label: "Runtime",
-        id: "/runtime/",
-      },
-      {
-        label: "API Reference",
-        id: "/api/deno/",
-      },
-      {
-        label: "Examples",
-        id: "/examples/",
-      },
-      {
-        label: "Deploy",
-        id: "/deploy/",
-      },
-      {
-        label: "Subhosting",
-        id: "/subhosting/",
-      },
-    ],
-  },
-];
+export const sidebar = [];
 
 export const toc = [];
 

overrides.css

@@ -63,8 +63,8 @@ that are generated by deno_doc, the tool that powers the API reference documenta
   @apply ml-1 !important;
 }
 
-.doc .toc :not(.documentNavigation) > a {
-  @apply text-xl !important;
+.ddoc .z-50 {
+  z-index: 49 !important;
 }
 
 .ddoc .usageContent {
@@ -115,3 +115,29 @@ that are generated by deno_doc, the tool that powers the API reference documenta
 .ddoc .space-y-7 > .section .markdown-body {
   @apply mb-6 !important;
 }
+
+.top {
+  @apply text-xs flex flex-col items-center;
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  animation-name: showToTop;
+  animation-duration: 1ms; /* Firefox requires this to apply the animation */
+  animation-timeline: --showScrollTop;
+}
+
+html {
+  scroll-timeline: --showScrollTop y;
+  /* Firefox supports the older "vertical" syntax */
+  scroll-timeline: --showScrollTop vertical;
+}
+
+@keyframes showToTop {
+  0% {
+    opacity: 0;
+  }
+
+  10% {
+    opacity: 1;
+  }
+}

reference.page.jsx

@@ -4,6 +4,25 @@ import entityList from "@std/html/named-entity-list.json" with { type: "json" };
 
 export const layout = "raw.tsx";
 
+export const sidebar = [
+  {
+    items: [
+      {
+        label: "Deno APIs",
+        id: "/api/deno/",
+      },
+      {
+        label: "Web APIs",
+        id: "/api/web/",
+      },
+      {
+        label: "Node APIs",
+        id: "/api/node/",
+      },
+    ],
+  },
+];
+
 const resetRegexp =
   /<link id="ddocResetStylesheet" rel="stylesheet" href=".*?reset\.css">\s*/;
 const titleRegexp = /<title>(.+?)<\/title>\s*/s;

sidebar.client.ts

@@ -18,6 +18,8 @@ for (const el of document.querySelectorAll("[data-accordion-trigger]")) {
 }
 
 const sidebar = document.getElementById("sidebar");
+console.log(sidebar);
+
 if (sidebar) {
   const sidebarNav = sidebar.querySelector("nav")!;
   const sidebarOpen = document.getElementById("sidebar-open");

styles.css

@@ -53,6 +53,10 @@
   }
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 /* Scrollbar colors that look good on light and dark theme */
 * {
   scrollbar-color: hsla(0deg, 0%, 50%, 0.5) hsla(0deg, 0%, 50%, 0.1) !important;