radiant-docs 0.1.61 → 0.1.62

package/template/src/components/Header.astro

@@ -162,7 +162,12 @@ const navbarPrimaryHref = config.navbar?.primary
       <div
         class="min-w-0 w-full flex items-center justify-end md:justify-between gap-3 px-4 sm:px-6"
       >
-        <div class="flex items-center gap-2 mx-0 md:mx-auto lg:mx-0">
+        <div
+          class:list={[
+            "flex items-center gap-2 mx-0",
+            "md:mx-auto lg:mx-0",
+          ]}
+        >
           <Search />
           {
             showAssistantNavbarButton ? (

package/template/src/components/NavigationTabList.astro

@@ -0,0 +1,65 @@
+---
+import type { NavTabs } from "../lib/validation";
+import Icon from "./ui/Icon.astro";
+
+type NavTabItem = NavTabs["items"][number];
+
+interface Props {
+  items: NavTabItem[];
+  currentIndex: number;
+  hrefs?: string[];
+  mode?: "link" | "button";
+  stateName?: string;
+}
+
+const {
+  items,
+  currentIndex,
+  hrefs = [],
+  mode = "link",
+  stateName = "selectedTabIndex",
+} = Astro.props;
+
+const listClass = [
+  "flex h-full w-max min-w-full gap-6",
+  "items-end px-3 sm:px-4",
+];
+const itemClass = "h-full min-w-max";
+const controlBaseClass =
+  "flex h-full items-center gap-1.5 border-b-2 text-[13px] font-medium transition-colors duration-150 whitespace-nowrap";
+const activeClass = "border-primary text-neutral-950 dark:text-white";
+const inactiveClass =
+  "border-transparent text-neutral-500 hover:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-100";
+---
+
+<ul class:list={listClass}>
+  {
+    items.map((item, index) => (
+      <li class={itemClass}>
+        {mode === "button" ? (
+          <button
+            type="button"
+            class={controlBaseClass}
+            x-bind:class={`${stateName} === ${index} ? '${activeClass}' : '${inactiveClass}'`}
+            x-bind:aria-selected={`${stateName} === ${index}`}
+            x-on:click={`${stateName} = ${index}`}
+          >
+            {item.icon && <Icon class="size-4 shrink-0" name={item.icon} />}
+            <span>{item.label}</span>
+          </button>
+        ) : (
+          <a
+            class:list={[
+              controlBaseClass,
+              index === currentIndex ? activeClass : inactiveClass,
+            ]}
+            href={hrefs[index] ?? "/"}
+          >
+            {item.icon && <Icon class="size-4 shrink-0" name={item.icon} />}
+            <span>{item.label}</span>
+          </a>
+        )}
+      </li>
+    ))
+  }
+</ul>

package/template/src/components/NavigationTabs.astro

@@ -0,0 +1,109 @@
+---
+import { getConfig, type NavTabs } from "../lib/validation";
+import { prependBasePath, stripBasePath } from "../lib/base-path";
+import { getAllRoutes } from "../lib/routes";
+import { slugify } from "../lib/utils";
+import NavigationTabList from "./NavigationTabList.astro";
+
+type TabsPresentation = "topbar" | "sidebar";
+
+interface Props {
+  tabs: NavTabs;
+  presentation?: TabsPresentation;
+}
+
+const { tabs, presentation: presentationOverride } = Astro.props;
+const tabItems = tabs.items ?? [];
+const tabsConfig = tabs as NavTabs & { presentation?: TabsPresentation };
+const presentation =
+  presentationOverride ?? tabsConfig.presentation ?? "topbar";
+const isSidebarPresentation = presentation === "sidebar";
+const pathname = stripBasePath(Astro.url.pathname);
+const config = await getConfig();
+const shouldUseBlurredTopbar =
+  config.navbar?.blur === true && !isSidebarPresentation;
+const routes = (await getAllRoutes()).filter((route) => !route.hidden);
+const normalizedPathParts = pathname
+  .replace(/^\/+/, "")
+  .replace(/\/+$/, "")
+  .split("/")
+  .filter(Boolean);
+
+function getTabSlug(tab: (typeof tabItems)[number]): string {
+  return slugify(tab.slug || tab.label);
+}
+
+function getTabPrefix(tab: (typeof tabItems)[number]): string {
+  return getTabSlug(tab);
+}
+
+let currentTabIndex = tabItems.findIndex(
+  (item) => getTabSlug(item) === normalizedPathParts[0],
+);
+
+if (pathname === "/" && config.home) {
+  const homeRoute = routes.find(
+    (route) => route.type === "mdx" && route.filePath === config.home,
+  );
+
+  if (homeRoute) {
+    const homeTabSegment = homeRoute.slug.split("/").filter(Boolean)[0];
+    const homeTabIndex = tabItems.findIndex(
+      (item) => getTabSlug(item) === homeTabSegment,
+    );
+    if (homeTabIndex !== -1) {
+      currentTabIndex = homeTabIndex;
+    }
+  }
+}
+
+currentTabIndex = currentTabIndex === -1 ? 0 : currentTabIndex;
+
+const firstHrefOfTabs = tabItems.map((item) => {
+  const itemPrefix = getTabPrefix(item);
+  const firstRoute = routes.find(
+    (route) =>
+      route.slug === itemPrefix || route.slug.startsWith(`${itemPrefix}/`),
+  );
+
+  if (firstRoute) {
+    return firstRoute.type === "mdx" &&
+      config.home &&
+      firstRoute.filePath === config.home
+      ? prependBasePath("/")
+      : prependBasePath(`/${firstRoute.slug}`);
+  }
+
+  return prependBasePath("/");
+});
+---
+
+{
+  tabItems.length > 0 ? (
+    <div
+      class:list={[
+        "fixed z-40 top-[68px] hidden h-11 border-x border-b border-border-light bg-background lg:block",
+        shouldUseBlurredTopbar &&
+          "sm:bg-background/85 sm:backdrop-blur-[18px] sm:backdrop-saturate-50 sm:border-b-neutral-100/85 sm:dark:border-neutral-800/85 sm:bg-clip-padding",
+        isSidebarPresentation
+          ? "inset-x-1 lg:left-[5px] lg:right-auto lg:w-[283px]"
+          : "inset-x-1",
+      ]}
+      data-pagefind-ignore
+    >
+      <nav
+        class:list={[
+          "h-full overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+          isSidebarPresentation && "lg:border-r lg:border-r-border-light",
+        ]}
+        aria-label="Documentation sections"
+      >
+        <NavigationTabList
+          items={tabItems}
+          currentIndex={currentTabIndex}
+          hrefs={firstHrefOfTabs}
+        />
+      </nav>
+    </div>
+  ) : null
+}

package/template/src/components/OpenApiPage.astro

@@ -10,6 +10,7 @@ import ResponseFieldTree from "./endpoint/ResponseFieldTree.astro";
 import PlaygroundBar from "./endpoint/PlaygroundBar.astro";
 import PlaygroundForm from "./endpoint/PlaygroundForm.astro";
 import PlaygroundButton from "./endpoint/PlaygroundButton.astro";
+import { getConfig } from "../lib/validation";
 import {
   getOpenApiOperationDoc,
   OPENAPI_REQUEST_SECTION_LABELS,
@@ -21,8 +22,10 @@ interface Props {
 }
 
 type RequestFields = OpenApiRequestFields;
+type TabsPresentation = "topbar" | "sidebar";
 
 const { route } = Astro.props;
+const config = await getConfig();
 const operationDoc = await getOpenApiOperationDoc(route);
 const {
   api,
@@ -42,6 +45,16 @@ const formattedDescription = description
 const formattedBodyDescription = bodyDescription
   ? await renderMarkdown(bodyDescription)
   : null;
+const navigationTabs = config.navigation.tabs as
+  | (typeof config.navigation.tabs & { presentation?: TabsPresentation })
+  | undefined;
+const hasTopbarNavigationTabs =
+  Array.isArray(navigationTabs?.items) &&
+  navigationTabs.items.length > 0 &&
+  (navigationTabs.presentation ?? "topbar") === "topbar";
+const snippetStickyClass = hasTopbarNavigationTabs
+  ? "top-[136px] max-h-[calc(100vh-136px)]"
+  : "top-[92px] max-h-[calc(100vh-92px)]";
 ---
 
 <Layout pageTitle={title}>
@@ -55,7 +68,10 @@ const formattedBodyDescription = bodyDescription
       <aside class="flex-1 min-w-0 hidden xl:block">
         <div
           data-snippet-stack-host
-          class="sticky top-[92px] max-h-[calc(100vh-92px)] w-full min-w-0 overflow-hidden"
+          class:list={[
+            "sticky w-full min-w-0 overflow-hidden",
+            snippetStickyClass,
+          ]}
         >
           <div
             data-snippet-stack

package/template/src/components/Sidebar.astro

@@ -14,13 +14,13 @@ const config: DocsConfig = await getConfig();
 
 <aside class="flex flex-col h-full">
   <nav
-    class="overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+    class="min-h-0 flex-1 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
   >
     <SidebarMenu navigation={config.navigation} />
   </nav>
   <div
     class:list={[
-      "mt-auto bg-background z-10 p-3 border-t border-t-border-light flex gap-1.5 items-center",
+      "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",
       askAiEnabled ? "justify-start" : "justify-end",
     ]}
   >

package/template/src/components/SidebarDropdown.astro

@@ -16,9 +16,15 @@ const { menu, parentSlug = "" } = Astro.props;
 const pathname = stripBasePath(Astro.url.pathname);
 const config = await getConfig();
 const routes = (await getAllRoutes()).filter((route) => !route.hidden);
+const normalizedPathParts = pathname
+  .replace(/^\/+/, "")
+  .replace(/\/+$/, "")
+  .split("/")
+  .filter(Boolean);
+const parentParts = parentSlug.split("/").filter(Boolean);
 
 let currentMenuIndex = menu.items.findIndex(
-  (i) => slugify(i.label) === pathname.split("/")[1],
+  (i) => slugify(i.label) === normalizedPathParts[parentParts.length],
 );
 
 if (pathname === "/" && config.home) {
@@ -27,9 +33,10 @@ if (pathname === "/" && config.home) {
   );
 
   if (homeRoute) {
-    const homeTopLevelSegment = homeRoute.slug.split("/")[0];
+    const homeRouteParts = homeRoute.slug.split("/").filter(Boolean);
+    const homeMenuSegment = homeRouteParts[parentParts.length];
     const homeMenuIndex = menu.items.findIndex(
-      (item) => slugify(item.label) === homeTopLevelSegment,
+      (item) => slugify(item.label) === homeMenuSegment,
     );
     if (homeMenuIndex !== -1) {
       currentMenuIndex = homeMenuIndex;
@@ -39,37 +46,44 @@ if (pathname === "/" && config.home) {
 
 currentMenuIndex = currentMenuIndex === -1 ? 0 : currentMenuIndex;
 
-let firstHrefOfMenuItems: string[] = [];
-
-const seen = new Set();
-
-for (const route of routes) {
-  const slug = route.slug;
+function getMenuItemPrefix(label: string): string {
+  const menuSlug = slugify(label);
+  return parentSlug ? `${parentSlug}/${menuSlug}` : menuSlug;
+}
 
-  const parts = slug.split("/");
-  const topLevel = parts[0];
+let firstHrefOfMenuItems = menu.items.map((item) => {
+  const itemPrefix = getMenuItemPrefix(item.label);
+  const firstRoute = routes.find(
+    (route) => route.slug === itemPrefix || route.slug.startsWith(`${itemPrefix}/`),
+  );
 
-  if (!seen.has(topLevel)) {
-    seen.add(topLevel);
-    const href =
-      route.type === "mdx" && config.home && route.filePath === config.home
-        ? prependBasePath("/")
-        : prependBasePath(`/${slug}`);
-    firstHrefOfMenuItems.push(href);
+  if (firstRoute) {
+    return firstRoute.type === "mdx" &&
+      config.home &&
+      firstRoute.filePath === config.home
+      ? prependBasePath("/")
+      : prependBasePath(`/${firstRoute.slug}`);
   }
-}
+
+  return prependBasePath("/");
+});
 
 // Calculate the parentSlug for the currently selected menu item
 const selectedMenuItem = menu.items[currentMenuIndex];
-const menuItemSlug = slugify(selectedMenuItem.label);
-const currentPrefix = parentSlug
-  ? `${parentSlug}/${menuItemSlug}`
-  : menuItemSlug;
+const currentPrefix = getMenuItemPrefix(selectedMenuItem.label);
+
+const menuItemBaseClass =
+  "items-center px-3 py-2 cursor-pointer text-sm text-neutral-700 dark:text-neutral-300 relative z-0 before:-z-10 before:absolute before:inset-x-1 before:inset-y-px before:rounded-md before:duration-150";
+const activeMenuItemClass =
+  "before:bg-neutral-200/50 dark:before:bg-neutral-700/50 text-neutral-900 dark:text-white";
+const inactiveMenuItemClass =
+  "hover:before:bg-neutral-100/70 dark:hover:before:bg-neutral-700/30";
 ---
 
-<div x-data=`{
-    open: false,
-}`>
+<div
+  x-data={`{ dropdownOpen: false, selectedMenuIndex: ${currentMenuIndex} }`}
+  x-init={`$watch('open', (value) => { if (value) selectedMenuIndex = ${currentMenuIndex} })`}
+>
   <div class="mt-3 mx-2 z-10 relative dark:bg-neutral-900 rounded-lg">
     <div
       class:list={[
@@ -91,22 +105,34 @@ const currentPrefix = parentSlug
             "flex items-center w-full text-sm text-neutral-700 dark:text-neutral-200 bg-white dark:bg-neutral-700/30 border-t border-x border-neutral-200/70 dark:border-neutral-700/40 dark:border-b rounded-lg shadow-xs px-3 py-2 cursor-pointer",
             menu.label ? "" : "border-b",
           ]}
-          x-on:click="open = true"
+          x-on:click="dropdownOpen = true"
           aria-haspopup="menu"
-          aria-expanded
+          x-bind:aria-expanded="dropdownOpen"
         >
           {
-            menu.items[currentMenuIndex].icon && (
-              <Icon
-                class="mr-2 size-4 opacity-80"
-                name={menu.items[currentMenuIndex].icon}
-              />
-            )
+            menu.items.map((item, index) => (
+              <span
+                class="flex min-w-0 items-center"
+                style={index === currentMenuIndex ? undefined : "display: none;"}
+                x-show={`selectedMenuIndex === ${index}`}
+              >
+                {item.icon && (
+                  <Icon
+                    class="mr-2 size-4 opacity-80"
+                    name={item.icon}
+                  />
+                )}
+                <span class="font-medium">{item.label}</span>
+              </span>
+            ))
           }
-          <span class="font-medium">{menu.items[currentMenuIndex].label}</span>
           <Icon class="ml-auto" name="lucide:chevrons-up-down" />
         </button>
-        <div class="fixed inset-0 z-50" x-show="open" x-on:click="open = false">
+        <div
+          class="fixed inset-0 z-50"
+          x-show="dropdownOpen"
+          x-on:click="dropdownOpen = false"
+        >
         </div>
         <ul
           class:list={[
@@ -115,7 +141,7 @@ const currentPrefix = parentSlug
           ]}
           x-init
           role="menu"
-          x-show="open"
+          x-show="dropdownOpen"
           x-transition.origin.top
           x-cloak
         >
@@ -129,11 +155,12 @@ const currentPrefix = parentSlug
                   role="menuitem"
                 >
                   <a
-                    class="flex items-center px-3 py-2 cursor-pointer text-sm text-neutral-700 dark:text-neutral-300 relative z-0 before:-z-10 before:absolute before:inset-x-1 before:inset-y-px before:rounded-md before:duration-150"
                     class:list={[
+                      menuItemBaseClass,
+                      "hidden lg:flex",
                       index === currentMenuIndex
-                        ? "before:bg-neutral-200/50 dark:before:bg-neutral-700/50 text-neutral-900 dark:text-white"
-                        : "hover:before:bg-neutral-100/70 dark:hover:before:bg-neutral-700/30",
+                        ? activeMenuItemClass
+                        : inactiveMenuItemClass,
                     ]}
                     href={firstHrefOfMenuItems[index] ?? prependBasePath("/")}
                   >
@@ -152,6 +179,31 @@ const currentPrefix = parentSlug
                       />
                     )}
                   </a>
+                  <button
+                    type="button"
+                    class:list={[menuItemBaseClass, "flex lg:hidden w-full"]}
+                    x-bind:class={`selectedMenuIndex === ${index} ? '${activeMenuItemClass}' : '${inactiveMenuItemClass}'`}
+                    x-on:click={`selectedMenuIndex = ${index}; dropdownOpen = false`}
+                  >
+                    {menu.items[index].icon && (
+                      <Icon
+                        class="mr-2 size-4 opacity-75"
+                        name={menu.items[index].icon}
+                      />
+                    )}
+                    {label}
+                    <span
+                      class="ml-auto"
+                      style={index === currentMenuIndex ? undefined : "display: none;"}
+                      x-show={`selectedMenuIndex === ${index}`}
+                    >
+                      <Icon
+                        class="text-primary [&_path]:stroke-3"
+                        name="lucide:check"
+                        stroke-width={10}
+                      />
+                    </span>
+                  </button>
                 </li>
               );
             })
@@ -168,9 +220,18 @@ const currentPrefix = parentSlug
         : "h-[calc(100vh-4px-64px-12px-38px-51px+8px)]",
     ]}
   >
-    <SidebarMenu
-      navigation={menu.items[currentMenuIndex].submenu}
-      parentSlug={currentPrefix}
-    />
+    <div class="hidden lg:block">
+      <SidebarMenu navigation={selectedMenuItem} parentSlug={currentPrefix} />
+    </div>
+    <div class="lg:hidden">
+      {menu.items.map((item, index) => (
+        <div x-show={`selectedMenuIndex === ${index}`} x-cloak>
+          <SidebarMenu
+            navigation={item}
+            parentSlug={getMenuItemPrefix(item.label)}
+          />
+        </div>
+      ))}
+    </div>
   </div>
 </div>

package/template/src/components/SidebarMenu.astro

@@ -9,6 +9,7 @@ import SidebarOpenApi from "./sidebar/SidebarOpenApi.astro";
 import SidebarOpenApiPageLink from "./sidebar/SidebarOpenApiPageLink.astro";
 import SidebarDropdown from "./SidebarDropdown.astro";
 import SidebarSegmented from "./SidebarSegmented.astro";
+import SidebarTabs from "./SidebarTabs.astro";
 import SidebarGroup from "./SidebarGroup.astro";
 import SidebarLink from "./SidebarLink.astro";
 
@@ -58,5 +59,7 @@ let { navigation, parentSlug = "" } = Astro.props;
     ) : null
   ) : navigation.openapi ? (
     <SidebarOpenApi openapi={navigation.openapi} parentSlug={parentSlug} />
+  ) : navigation.tabs ? (
+    <SidebarTabs tabs={navigation.tabs} parentSlug={parentSlug} />
   ) : null
 }

package/template/src/components/SidebarSegmented.astro

@@ -16,9 +16,15 @@ const { menu, parentSlug = "" } = Astro.props;
 const pathname = stripBasePath(Astro.url.pathname);
 const config = await getConfig();
 const routes = (await getAllRoutes()).filter((route) => !route.hidden);
+const normalizedPathParts = pathname
+  .replace(/^\/+/, "")
+  .replace(/\/+$/, "")
+  .split("/")
+  .filter(Boolean);
+const parentParts = parentSlug.split("/").filter(Boolean);
 
 let currentMenuIndex = menu.items.findIndex(
-  (i) => slugify(i.label) === pathname.split("/")[1],
+  (i) => slugify(i.label) === normalizedPathParts[parentParts.length],
 );
 
 if (pathname === "/" && config.home) {
@@ -27,9 +33,10 @@ if (pathname === "/" && config.home) {
   );
 
   if (homeRoute) {
-    const homeTopLevelSegment = homeRoute.slug.split("/")[0];
+    const homeRouteParts = homeRoute.slug.split("/").filter(Boolean);
+    const homeMenuSegment = homeRouteParts[parentParts.length];
     const homeMenuIndex = menu.items.findIndex(
-      (item) => slugify(item.label) === homeTopLevelSegment,
+      (item) => slugify(item.label) === homeMenuSegment,
     );
     if (homeMenuIndex !== -1) {
       currentMenuIndex = homeMenuIndex;
@@ -39,62 +46,90 @@ if (pathname === "/" && config.home) {
 
 currentMenuIndex = currentMenuIndex === -1 ? 0 : currentMenuIndex;
 
-let firstHrefOfMenuItems: string[] = [];
-
-const seen = new Set();
-
-for (const route of routes) {
-  const slug = route.slug;
+function getMenuItemPrefix(label: string): string {
+  const menuSlug = slugify(label);
+  return parentSlug ? `${parentSlug}/${menuSlug}` : menuSlug;
+}
 
-  const parts = slug.split("/");
-  const topLevel = parts[0];
+let firstHrefOfMenuItems = menu.items.map((item) => {
+  const itemPrefix = getMenuItemPrefix(item.label);
+  const firstRoute = routes.find(
+    (route) => route.slug === itemPrefix || route.slug.startsWith(`${itemPrefix}/`),
+  );
 
-  if (!seen.has(topLevel)) {
-    seen.add(topLevel);
-    const href =
-      route.type === "mdx" && config.home && route.filePath === config.home
-        ? prependBasePath("/")
-        : prependBasePath(`/${slug}`);
-    firstHrefOfMenuItems.push(href);
+  if (firstRoute) {
+    return firstRoute.type === "mdx" &&
+      config.home &&
+      firstRoute.filePath === config.home
+      ? prependBasePath("/")
+      : prependBasePath(`/${firstRoute.slug}`);
   }
-}
+
+  return prependBasePath("/");
+});
 
 const selectedMenuItem = menu.items[currentMenuIndex];
-const menuItemSlug = slugify(selectedMenuItem.label);
-const currentPrefix = parentSlug
-  ? `${parentSlug}/${menuItemSlug}`
-  : menuItemSlug;
+const currentPrefix = getMenuItemPrefix(selectedMenuItem.label);
+
+const controlBaseClass =
+  "items-center px-3 py-1.5 cursor-pointer text-sm rounded-md border-x border-t transition-colors duration-150";
+const activeControlClass =
+  "bg-white dark:bg-neutral-700/30 border-neutral-200/70 dark:border-neutral-700/40 dark:border-b shadow-sm shadow-neutral-200/80 dark:shadow-neutral-950/20 text-neutral-900 dark:text-white";
+const inactiveControlClass =
+  "text-neutral-600 dark:text-neutral-300 border-transparent hover:text-primary dark:hover:text-primary";
 ---
 
-<div class="mt-3 mx-2 z-10 relative dark:bg-neutral-900 rounded-lg">
-  {
-    menu.label && (
-      <label class="font-semibold text-xs px-2 pb-1 block">{menu.label}</label>
-    )
-  }
-  <ul class="rounded-lg bg-neutral-100 dark:bg-neutral-800/60 p-[3px]">
+<div
+  x-data={`{ selectedMenuIndex: ${currentMenuIndex} }`}
+  x-init={`$watch('open', (value) => { if (value) selectedMenuIndex = ${currentMenuIndex} })`}
+>
+  <div class="mt-3 mx-2 z-10 relative dark:bg-neutral-900 rounded-lg">
     {
-      menu.items.map((item, index) => (
-        <li>
-          <a
-            class="flex items-center px-3 py-1.5 cursor-pointer text-sm rounded-md border-x border-t transition-colors duration-150"
-            class:list={[
-              index === currentMenuIndex
-                ? "bg-white dark:bg-neutral-700/30 border-neutral-200/70 dark:border-neutral-700/40 dark:border-b shadow-sm shadow-neutral-200/80 dark:shadow-neutral-950/20 text-neutral-900 dark:text-white"
-                : "text-neutral-600 dark:text-neutral-300 border-transparent hover:text-primary dark:hover:text-primary",
-            ]}
-            href={firstHrefOfMenuItems[index] ?? prependBasePath("/")}
-          >
-            {item.icon && <Icon class="mr-2 size-4" name={item.icon} />}
-            {item.label}
-          </a>
-        </li>
-      ))
+      menu.label && (
+        <label class="font-semibold text-xs px-2 pb-1 block">{menu.label}</label>
+      )
     }
-  </ul>
-</div>
+    <ul class="rounded-lg bg-neutral-100 dark:bg-neutral-800/60 p-[3px]">
+      {
+        menu.items.map((item, index) => (
+          <li>
+            <a
+              class:list={[
+                controlBaseClass,
+                "hidden lg:flex",
+                index === currentMenuIndex
+                  ? activeControlClass
+                  : inactiveControlClass,
+              ]}
+              href={firstHrefOfMenuItems[index] ?? prependBasePath("/")}
+            >
+              {item.icon && <Icon class="mr-2 size-4" name={item.icon} />}
+              {item.label}
+            </a>
+            <button
+              type="button"
+              class:list={[controlBaseClass, "flex lg:hidden w-full"]}
+              x-bind:class={`selectedMenuIndex === ${index} ? '${activeControlClass}' : '${inactiveControlClass}'`}
+              x-bind:aria-selected={`selectedMenuIndex === ${index}`}
+              x-on:click={`selectedMenuIndex = ${index}`}
+            >
+              {item.icon && <Icon class="mr-2 size-4" name={item.icon} />}
+              {item.label}
+            </button>
+          </li>
+        ))
+      }
+    </ul>
+  </div>
 
-<SidebarMenu
-  navigation={menu.items[currentMenuIndex].submenu}
-  parentSlug={currentPrefix}
-/>
+  <div class="hidden lg:block">
+    <SidebarMenu navigation={selectedMenuItem} parentSlug={currentPrefix} />
+  </div>
+  <div class="lg:hidden">
+    {menu.items.map((item, index) => (
+      <div x-show={`selectedMenuIndex === ${index}`} x-cloak>
+        <SidebarMenu navigation={item} parentSlug={getMenuItemPrefix(item.label)} />
+      </div>
+    ))}
+  </div>
+</div>