radiant-docs 0.1.68 → 0.1.70

package/template/src/components/MobileNavbarActions.astro

@@ -0,0 +1,410 @@
+---
+import Icon from "./ui/Icon.astro";
+import { getConfig, type ThemeColorByMode } from "../lib/validation";
+import { resolveConfiguredHref } from "../lib/routes";
+import {
+  getDocsBaseColorShade,
+  getThemeForegroundColor,
+} from "../lib/theme-css";
+
+const config = await getConfig();
+
+function getConfiguredColorForMode(
+  value: string | ThemeColorByMode | undefined,
+  mode: "light" | "dark",
+): string | undefined {
+  if (typeof value === "string") return value;
+  return value?.[mode];
+}
+
+function getDefaultButtonColor(mode: "light" | "dark"): string {
+  return getDocsBaseColorShade(
+    config.theme,
+    mode,
+    mode === "light" ? "900" : "100",
+  );
+}
+
+function getButtonForegroundColor(
+  mode: "light" | "dark",
+  color: string,
+): string {
+  return getThemeForegroundColor(
+    color,
+    getDocsBaseColorShade(config.theme, mode, "900"),
+  );
+}
+
+function getNavbarPrimaryThemeColor(mode: "light" | "dark"): string {
+  return (
+    getConfiguredColorForMode(config.navbar?.primary?.color, mode) ??
+    getDefaultButtonColor(mode)
+  );
+}
+
+const navbarPrimaryThemeColors = config.navbar?.primary
+  ? {
+      light: getNavbarPrimaryThemeColor("light"),
+      dark: getNavbarPrimaryThemeColor("dark"),
+    }
+  : null;
+const navbarPrimaryButtonStyle = navbarPrimaryThemeColors
+  ? [
+      `--mobile-navbar-primary-theme-light: ${navbarPrimaryThemeColors.light}`,
+      `--mobile-navbar-primary-theme-dark: ${navbarPrimaryThemeColors.dark}`,
+      `--mobile-navbar-primary-foreground-light: ${getButtonForegroundColor(
+        "light",
+        navbarPrimaryThemeColors.light,
+      )}`,
+      `--mobile-navbar-primary-foreground-dark: ${getButtonForegroundColor(
+        "dark",
+        navbarPrimaryThemeColors.dark,
+      )}`,
+    ].join("; ")
+  : "";
+
+const navbarLinks = config.navbar?.links
+  ? await Promise.all(
+      config.navbar.links.map(async (link) => ({
+        ...link,
+        href: await resolveConfiguredHref(link.href, config),
+      })),
+    )
+  : [];
+const navbarSecondaryHref = config.navbar?.secondary
+  ? await resolveConfiguredHref(config.navbar.secondary.href, config)
+  : "";
+const navbarPrimaryHref = config.navbar?.primary
+  ? await resolveConfiguredHref(config.navbar.primary.href, config)
+  : "";
+const mobileButtonCount =
+  Number(Boolean(config.navbar?.primary)) +
+  Number(Boolean(config.navbar?.secondary));
+const hasMobileNavbarActions = mobileButtonCount > 0 || navbarLinks.length > 0;
+---
+
+{
+  hasMobileNavbarActions && (
+    <div
+      class="relative shrink-0 border-b border-border-light px-4 py-3"
+      data-rd-mobile-navbar-actions
+    >
+      <nav aria-label="Site shortcuts">
+        <div
+          class="flex w-full min-w-0 items-center justify-end gap-3"
+          data-rd-mobile-navbar-row
+        >
+          {navbarLinks.length > 0 && (
+            <div
+              class:list={[
+                "flex shrink-0 items-center gap-1",
+                mobileButtonCount > 0 && "pr-2",
+              ]}
+              data-rd-mobile-navbar-links
+            >
+              {navbarLinks.map((link) => (
+                <a
+                  class="flex items-center gap-1 px-1.5 py-[5px] text-[13px] font-medium text-neutral-600/85 whitespace-nowrap transition-colors hover:text-neutral-600 dark:font-normal dark:text-neutral-200/90 dark:hover:text-neutral-200"
+                  href={link.href}
+                  x-on:click="open = false"
+                >
+                  {link.icon && (
+                    <Icon
+                      class="ml-[3px]"
+                      name={link.icon}
+                      width="14"
+                      height="14"
+                    />
+                  )}
+                  {link.text}
+                </a>
+              ))}
+            </div>
+          )}
+          {navbarLinks.length > 0 && (
+            <div class="shrink-0" data-rd-mobile-navbar-overflow hidden>
+              <button
+                type="button"
+                class="flex size-8 cursor-pointer items-center justify-center rounded-lg text-neutral-600 transition-colors hover:bg-neutral-100/70 hover:text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-500 dark:text-neutral-300 dark:hover:bg-neutral-800/70 dark:hover:text-white dark:focus-visible:outline-neutral-400"
+                aria-label="Show more navbar links"
+                aria-haspopup="true"
+                aria-expanded="false"
+                aria-controls="mobile-navbar-overflow-menu"
+                data-rd-mobile-navbar-overflow-trigger
+              >
+                <Icon
+                  name="lucide:ellipsis-vertical"
+                  class="size-4"
+                  aria-hidden="true"
+                />
+              </button>
+            </div>
+          )}
+          {mobileButtonCount > 0 && (
+            <div
+              class="flex shrink-0 items-center gap-3"
+              data-rd-mobile-navbar-buttons
+            >
+              {config.navbar?.secondary && (
+                <a
+                  class="flex h-[33px] shrink-0 items-center gap-1.5 rounded-lg [corner-shape:superellipse(1.2)] border-[0.5px] border-neutral-900/10 bg-linear-to-br from-neutral-100/70 to-neutral-100/90 px-[11px] text-[13px] font-medium text-neutral-900/85 whitespace-nowrap transition-all hover:text-neutral-600 dark:border-white/5 dark:bg-none dark:bg-neutral-800/80 dark:text-neutral-200/95 dark:hover:text-neutral-200"
+                  href={navbarSecondaryHref}
+                  x-on:click="open = false"
+                >
+                  {config.navbar.secondary.icon && (
+                    <Icon
+                      name={config.navbar.secondary.icon}
+                      width="14"
+                      height="14"
+                      class="-ml-px"
+                    />
+                  )}
+                  {config.navbar.secondary.text}
+                </a>
+              )}
+              {config.navbar?.primary && (
+                <a
+                  class="mobile-navbar-primary-trigger flex h-8 shrink-0 items-center gap-2 rounded-lg [corner-shape:superellipse(1.2)] px-3 text-[13px] font-normal whitespace-nowrap transition-all duration-200 hover:opacity-95 dark:font-medium"
+                  style={navbarPrimaryButtonStyle}
+                  href={navbarPrimaryHref}
+                  x-on:click="open = false"
+                >
+                  {config.navbar.primary.icon && (
+                    <Icon
+                      name={config.navbar.primary.icon}
+                      width="14"
+                      height="14"
+                      class="-ml-px"
+                    />
+                  )}
+                  {config.navbar.primary.text}
+                </a>
+              )}
+            </div>
+          )}
+        </div>
+      </nav>
+      {navbarLinks.length > 0 && (
+        <nav
+          id="mobile-navbar-overflow-menu"
+          aria-label="More navbar links"
+          class="absolute right-4 top-full z-50 mt-2 w-56 max-w-[calc(100vw-2rem)] overflow-y-auto rounded-xl border-[0.5px] border-neutral-200 bg-white p-1 shadow-2xl shadow-neutral-900/12 sm:right-6 dark:border-neutral-800 dark:bg-neutral-800 dark:shadow-black/40"
+          data-rd-mobile-navbar-overflow-menu
+          hidden
+        >
+          {navbarLinks.map((link) => (
+            <a
+              class="flex min-h-9 items-center gap-2 rounded-lg px-2.5 py-2 text-[13px] font-medium text-neutral-700 transition-colors hover:bg-neutral-100/70 hover:text-neutral-950 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-neutral-500 dark:font-normal dark:text-neutral-200 dark:hover:bg-neutral-700/70 dark:hover:text-white dark:focus-visible:outline-neutral-400"
+              href={link.href}
+              x-on:click="open = false"
+              data-rd-mobile-navbar-overflow-link
+            >
+              {link.icon && (
+                <Icon
+                  name={link.icon}
+                  width="14"
+                  height="14"
+                  class="shrink-0"
+                />
+              )}
+              <span class="min-w-0 break-words">{link.text}</span>
+            </a>
+          ))}
+        </nav>
+      )}
+    </div>
+  )
+}
+
+<style>
+  .mobile-navbar-primary-trigger {
+    --mobile-navbar-primary-theme: var(--mobile-navbar-primary-theme-light);
+    --mobile-navbar-primary-foreground: var(
+      --mobile-navbar-primary-foreground-light
+    );
+    background: linear-gradient(
+      to bottom,
+      color-mix(in oklab, var(--mobile-navbar-primary-theme) 88%, white),
+      color-mix(in oklab, var(--mobile-navbar-primary-theme) 90%, black)
+    );
+    color: var(--mobile-navbar-primary-foreground);
+  }
+
+  :global(.dark) .mobile-navbar-primary-trigger {
+    --mobile-navbar-primary-theme: var(--mobile-navbar-primary-theme-dark);
+    --mobile-navbar-primary-foreground: var(
+      --mobile-navbar-primary-foreground-dark
+    );
+  }
+</style>
+
+<script is:inline>
+  (() => {
+    const cleanupKey = "__radiantDocsMobileNavbarFitCleanup";
+    const previousCleanup = window[cleanupKey];
+
+    if (typeof previousCleanup === "function") previousCleanup();
+
+    const root = document.querySelector("[data-rd-mobile-navbar-actions]");
+    const row = root?.querySelector("[data-rd-mobile-navbar-row]");
+    const links = root?.querySelector("[data-rd-mobile-navbar-links]");
+    const buttons = root?.querySelector("[data-rd-mobile-navbar-buttons]");
+    const overflow = root?.querySelector("[data-rd-mobile-navbar-overflow]");
+    const overflowTrigger = root?.querySelector(
+      "[data-rd-mobile-navbar-overflow-trigger]",
+    );
+    const overflowMenu = root?.querySelector(
+      "[data-rd-mobile-navbar-overflow-menu]",
+    );
+
+    if (
+      !(root instanceof HTMLElement) ||
+      !(row instanceof HTMLElement) ||
+      !(links instanceof HTMLElement) ||
+      !(overflow instanceof HTMLElement) ||
+      !(overflowTrigger instanceof HTMLButtonElement) ||
+      !(overflowMenu instanceof HTMLElement)
+    ) {
+      return;
+    }
+
+    const mobileQuery = window.matchMedia("(max-width: 63.999rem)");
+    let linksWidth = 0;
+    let frameId = 0;
+
+    const setOverflowMenuOpen = (nextOpen, focusFirstLink = false) => {
+      const canOpen =
+        nextOpen && mobileQuery.matches && !overflow.hasAttribute("hidden");
+
+      overflowMenu.hidden = !canOpen;
+      overflowTrigger.setAttribute("aria-expanded", String(canOpen));
+
+      if (!canOpen || !focusFirstLink) return;
+
+      const firstLink = overflowMenu.querySelector(
+        "[data-rd-mobile-navbar-overflow-link]",
+      );
+      if (firstLink instanceof HTMLElement) firstLink.focus();
+    };
+
+    const measureLinksWidth = () => {
+      const clone = links.cloneNode(true);
+      if (!(clone instanceof HTMLElement)) return linksWidth;
+
+      clone.removeAttribute("hidden");
+      clone.removeAttribute("data-rd-mobile-navbar-links");
+      clone.setAttribute("aria-hidden", "true");
+      clone.style.position = "fixed";
+      clone.style.inset = "0 auto auto -10000px";
+      clone.style.display = "flex";
+      clone.style.width = "max-content";
+      clone.style.visibility = "hidden";
+      clone.style.pointerEvents = "none";
+      document.body.append(clone);
+
+      const width = clone.getBoundingClientRect().width;
+      clone.remove();
+      return width;
+    };
+
+    const updateLinksVisibility = () => {
+      frameId = 0;
+
+      if (!mobileQuery.matches || row.clientWidth <= 0) {
+        if (!mobileQuery.matches) {
+          links.removeAttribute("hidden");
+          overflow.setAttribute("hidden", "");
+          setOverflowMenuOpen(false);
+        }
+        return;
+      }
+
+      const rowGap = Number.parseFloat(getComputedStyle(row).columnGap) || 0;
+      const buttonsWidth =
+        buttons instanceof HTMLElement
+          ? buttons.getBoundingClientRect().width
+          : 0;
+      const requiredWidth =
+        linksWidth +
+        buttonsWidth +
+        (buttons instanceof HTMLElement ? rowGap : 0);
+      const linksDoNotFit = requiredWidth > row.clientWidth;
+
+      links.toggleAttribute("hidden", linksDoNotFit);
+      overflow.toggleAttribute("hidden", !linksDoNotFit);
+      if (!linksDoNotFit) setOverflowMenuOpen(false);
+    };
+
+    const scheduleUpdate = () => {
+      if (frameId !== 0) return;
+      frameId = requestAnimationFrame(updateLinksVisibility);
+    };
+
+    const onOverflowTriggerClick = () => {
+      setOverflowMenuOpen(overflowMenu.hidden);
+    };
+
+    const onOverflowTriggerKeydown = (event) => {
+      if (event.key !== "ArrowDown") return;
+      event.preventDefault();
+      setOverflowMenuOpen(true, true);
+    };
+
+    const onDocumentPointerDown = (event) => {
+      if (overflowMenu.hidden || !(event.target instanceof Node)) return;
+      if (
+        overflowTrigger.contains(event.target) ||
+        overflowMenu.contains(event.target)
+      ) {
+        return;
+      }
+      setOverflowMenuOpen(false);
+    };
+
+    const onDocumentKeydown = (event) => {
+      if (event.key !== "Escape" || overflowMenu.hidden) return;
+      setOverflowMenuOpen(false);
+      overflowTrigger.focus();
+    };
+
+    const onOverflowMenuClick = (event) => {
+      if (
+        event.target instanceof Element &&
+        event.target.closest("[data-rd-mobile-navbar-overflow-link]")
+      ) {
+        setOverflowMenuOpen(false);
+      }
+    };
+
+    linksWidth = measureLinksWidth();
+    updateLinksVisibility();
+
+    const resizeObserver = new ResizeObserver(scheduleUpdate);
+    resizeObserver.observe(row);
+    if (buttons instanceof HTMLElement) resizeObserver.observe(buttons);
+    mobileQuery.addEventListener("change", scheduleUpdate);
+    overflowTrigger.addEventListener("click", onOverflowTriggerClick);
+    overflowTrigger.addEventListener("keydown", onOverflowTriggerKeydown);
+    overflowMenu.addEventListener("click", onOverflowMenuClick);
+    document.addEventListener("pointerdown", onDocumentPointerDown);
+    document.addEventListener("keydown", onDocumentKeydown);
+
+    document.fonts?.ready.then(() => {
+      if (!root.isConnected) return;
+      linksWidth = measureLinksWidth();
+      scheduleUpdate();
+    });
+
+    window[cleanupKey] = () => {
+      if (frameId !== 0) cancelAnimationFrame(frameId);
+      resizeObserver.disconnect();
+      mobileQuery.removeEventListener("change", scheduleUpdate);
+      overflowTrigger.removeEventListener("click", onOverflowTriggerClick);
+      overflowTrigger.removeEventListener("keydown", onOverflowTriggerKeydown);
+      overflowMenu.removeEventListener("click", onOverflowMenuClick);
+      document.removeEventListener("pointerdown", onDocumentPointerDown);
+      document.removeEventListener("keydown", onDocumentKeydown);
+      overflowMenu.hidden = true;
+    };
+  })();
+</script>

package/template/src/components/OpenApiPage.astro

@@ -59,7 +59,7 @@ const snippetStickyClass = hasTopbarNavigationTabs
   : "top-[92px] max-h-[calc(100vh-92px)]";
 ---
 
-<Layout pageTitle={title}>
+<Layout pageTitle={title} hasMarkdownAlternate>
   <article class="mx-auto w-full max-w-7xl">
     <header
       class="mb-8 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between"

package/template/src/components/PageAiActions.astro

@@ -431,24 +431,40 @@ const menuItems: MenuItem[] = [
   }
 </style>
 
-<script is:inline data-astro-rerun>
-  (() => {
-    const script = document.currentScript;
-    let root = script?.previousElementSibling;
-    while (
-      root &&
-      (!(root instanceof HTMLElement) ||
-        !root.hasAttribute("data-rd-page-actions"))
-    ) {
-      root = root.previousElementSibling;
-    }
+<script>
+  const pageActionsSelector = "[data-rd-page-actions]";
+  const pageActionsControlsKey = "__rdPageActionsControls";
+
+  function fallbackCopy(text) {
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    textarea.setAttribute("readonly", "");
+    textarea.style.position = "fixed";
+    textarea.style.opacity = "0";
+    document.body.appendChild(textarea);
+    textarea.select();
+    const copied = document.execCommand("copy");
+    document.body.removeChild(textarea);
+    return copied;
+  }
 
-    if (
-      !(root instanceof HTMLElement) ||
-      root.dataset.pageActionsBound === "true"
-    ) {
-      return;
+  async function copyToClipboard(text) {
+    try {
+      if (navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(text);
+        return true;
+      }
+    } catch {
+      // Fallback below when clipboard API is unavailable or blocked.
     }
+
+    return fallbackCopy(text);
+  }
+
+  function initPageActions(root) {
+    if (!(root instanceof HTMLElement)) return;
+    if (root.dataset.pageActionsBound === "true") return;
+
     root.dataset.pageActionsBound = "true";
 
     const trigger = root.querySelector("[data-rd-page-actions-trigger]");
@@ -463,32 +479,6 @@ const menuItems: MenuItem[] = [
     let mcpMetadataPromise;
     const copyFeedbackTimeouts = new WeakMap();
 
-    function fallbackCopy(text) {
-      const textarea = document.createElement("textarea");
-      textarea.value = text;
-      textarea.setAttribute("readonly", "");
-      textarea.style.position = "fixed";
-      textarea.style.opacity = "0";
-      document.body.appendChild(textarea);
-      textarea.select();
-      const copied = document.execCommand("copy");
-      document.body.removeChild(textarea);
-      return copied;
-    }
-
-    async function copyToClipboard(text) {
-      try {
-        if (navigator.clipboard?.writeText) {
-          await navigator.clipboard.writeText(text);
-          return true;
-        }
-      } catch {
-        // Fallback below when clipboard API is unavailable or blocked.
-      }
-
-      return fallbackCopy(text);
-    }
-
     function setExpanded(nextExpanded) {
       if (!(trigger instanceof HTMLElement)) return;
       trigger.setAttribute("aria-expanded", String(nextExpanded));
@@ -711,5 +701,21 @@ const menuItems: MenuItem[] = [
         closeMenu();
       });
     });
-  })();
+  }
+
+  function initAllPageActions() {
+    document.querySelectorAll(pageActionsSelector).forEach((root) => {
+      initPageActions(root);
+    });
+  }
+
+  window[pageActionsControlsKey] = window[pageActionsControlsKey] || {};
+  window[pageActionsControlsKey].init = initAllPageActions;
+
+  if (!window[pageActionsControlsKey].installed) {
+    window[pageActionsControlsKey].installed = true;
+    document.addEventListener("astro:page-load", initAllPageActions);
+  }
+
+  initAllPageActions();
 </script>

package/template/src/components/PagePagination.astro

@@ -23,7 +23,7 @@ function buildHref(route: Route): string {
 
 {
   (previousRoute || nextRoute) && (
-    <nav class="w-full pt-16" aria-label="Page pagination">
+    <nav class="w-full" aria-label="Page pagination">
       <div class="flex gap-4 flex-col sm:flex-row">
         {previousRoute && (
           <a

package/template/src/components/Search.astro

@@ -12,9 +12,15 @@ import { Icon } from "astro-icon/components";
   <!-- Search Trigger Button -->
   <button
     x-on:click="open()"
-    class="md:bg-white/90 dark:md:bg-neutral-800 flex items-center gap-2 h-[33px] md:min-w-64 px-3 -mr-3 xs:mr-0 text-xs text-neutral-500/80 dark:text-neutral-400/70 hover:text-neutral-500 dark:hover:text-neutral-400 md:border border-border rounded-lg cursor-pointer md:shadow-xs md:hover:shadow-sm transition"
+    x-bind:data-search-open="isOpen ? 'true' : 'false'"
+    aria-label="Search documentation"
+    class="mobile-search-trigger flex size-10 cursor-pointer items-center justify-center rounded-lg text-xs text-neutral-900 transition-colors hover:bg-neutral-100/70 dark:text-white dark:hover:bg-neutral-800/70 md:h-[33px] md:w-auto md:min-w-60 md:justify-start md:gap-2 md:border md:border-border md:bg-white/90 md:px-3 md:text-neutral-500/80 md:shadow-xs md:transition md:hover:bg-white/90 md:hover:text-neutral-500 md:hover:shadow-sm dark:md:bg-neutral-800 dark:md:text-neutral-400/70 dark:md:hover:bg-neutral-800 dark:md:hover:text-neutral-400 lg:min-w-64"
   >
-    <Icon name="lucide:search" class="size-5 md:size-4" />
+    <Icon
+      name="lucide:search"
+      is:inline
+      class="mobile-search-icon size-4"
+    />
     <span class="hidden md:inline">Search documentation</span>
     <kbd
       class="font-sans tracking-wider hidden md:inline-flex ml-auto items-center gap-0.5 px-1.5 py-px text-[10px] text-neutral-500 dark:text-neutral-400 font-medium bg-white dark:bg-neutral-700 border border-border/80 rounded"
@@ -53,6 +59,7 @@ import { Icon } from "astro-icon/components";
           >
             <Icon
               name="lucide:search"
+              is:inline
               class="size-5 sm:size-[18px] text-neutral-400 dark:text-neutral-500 shrink-0"
             />
             <input
@@ -94,7 +101,8 @@ import { Icon } from "astro-icon/components";
                 class="size-8 mx-auto mb-3 text-neutral-300 dark:text-neutral-600"
               />
               <p class="text-sm">
-                No results found for <strong class="text-neutral-600 dark:text-neutral-300"
+                No results found for <strong
+                  class="text-neutral-600 dark:text-neutral-300"
                   >"<span x-text="query"></span>"</strong
                 >.
               </p>
@@ -172,6 +180,19 @@ import { Icon } from "astro-icon/components";
   </template>
 </div>
 
+<style>
+  @media (max-width: 47.999rem) {
+    .mobile-search-trigger[data-search-open="true"] {
+      background-color: transparent !important;
+      transition: none;
+    }
+
+    .mobile-search-icon :global(g) {
+      stroke-width: 2.75;
+    }
+  }
+</style>
+
 <script>
   import {
     search as pagefindSearch,

package/template/src/components/Sidebar.astro

@@ -1,24 +1,59 @@
 ---
 import { getConfig, type DocsConfig } from "../lib/validation";
+import MobileNavbarActions from "./MobileNavbarActions.astro";
 import ThemeSwitcher from "./ThemeSwitcher.astro";
 import SidebarMenu from "./SidebarMenu.astro";
 
 interface Props {
   askAiEnabled?: boolean;
+  showMobileNavbarActions?: boolean;
 }
 
-const { askAiEnabled = false } = Astro.props as Props;
+const { askAiEnabled = false, showMobileNavbarActions = false } =
+  Astro.props as Props;
 
 const config: DocsConfig = await getConfig();
 ---
 
 <aside class="flex flex-col h-full">
+  {
+    showMobileNavbarActions ? (
+      <MobileNavbarActions />
+    ) : null
+  }
   <nav
     data-rd-sidebar-scroll-container
     class="min-h-0 flex-1 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
   >
     <SidebarMenu navigation={config.navigation} />
   </nav>
+  <script is:inline>
+    (() => {
+      const script = document.currentScript;
+      const sidebar = script?.previousElementSibling;
+
+      if (
+        !(sidebar instanceof HTMLElement) ||
+        !sidebar.hasAttribute("data-rd-sidebar-scroll-container")
+      ) {
+        return;
+      }
+
+      if (document.readyState !== "loading") return;
+
+      try {
+        const value = Number(
+          sessionStorage.getItem("radiant-docs:sidebar-scroll-top"),
+        );
+        if (!Number.isFinite(value) || value <= 0) return;
+
+        sidebar.scrollTop = Math.max(0, Math.round(value));
+        sidebar.dataset.rdSidebarScrollRestored = "true";
+      } catch {
+        // Storage can be unavailable in private browsing or locked-down embeds.
+      }
+    })();
+  </script>
   <div
     class:list={[
       "bg-background z-10 px-3 pt-3 pb-[calc(env(safe-area-inset-bottom)+0.75rem)] border-t border-t-border-light flex gap-1.5 items-center",

package/template/src/components/SidebarTabs.astro

@@ -64,7 +64,9 @@ const selectedTabItem = tabItems[currentTabIndex];
       x-data={`{ selectedTabIndex: ${currentTabIndex} }`}
       x-init={`$watch('open', (value) => { if (value) selectedTabIndex = ${currentTabIndex} })`}
     >
-      <div class="lg:hidden h-11 border-b border-border-light bg-background">
+      <div
+        class="sticky top-0 z-20 h-11 border-b border-border-light bg-background lg:hidden"
+      >
         <nav
           class="h-full overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
           aria-label="Documentation sections"