radiant-docs 0.1.60 → 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
@@ -111,13 +127,29 @@ const formattedBodyDescription = bodyDescription
             />
           )
         }
-        <div class="xl:hidden space-y-6 mt-6">
-          <RequestSnippets
-            api={api}
-            method={route.openApiMethod}
-            path={route.openApiPath}
-          />
-          {responses && <ResponseSnippets responses={responses} />}
+        <div data-inline-snippet-stack class="xl:hidden space-y-6 mt-6">
+          <div
+            data-snippet-slot
+            data-inline-snippet-slot
+            class="min-h-0 min-w-0 overflow-hidden transition-[height,max-height] duration-[360ms] ease-[cubic-bezier(0.22,1,0.36,1)]"
+          >
+            <RequestSnippets
+              api={api}
+              method={route.openApiMethod}
+              path={route.openApiPath}
+            />
+          </div>
+          {
+            responses && (
+              <div
+                data-snippet-slot
+                data-inline-snippet-slot
+                class="min-h-0 min-w-0 overflow-hidden transition-[height,max-height] duration-[360ms] ease-[cubic-bezier(0.22,1,0.36,1)]"
+              >
+                <ResponseSnippets responses={responses} />
+              </div>
+            )
+          }
         </div>
         <div class="mt-10">
           <!-- Request -->
@@ -157,10 +189,9 @@ const formattedBodyDescription = bodyDescription
                     />
                   )}
                   {hasCommonFields && (
-                    <div x-data="{ expanded: false }" class="mt-4">
+                    <div x-data="{ expanded: true }" class="mt-4">
                       <div
-                        class="w-full overflow-hidden rounded-xl border border-neutral-200 bg-white transition-colors duration-200 dark:border-neutral-800 dark:bg-(--rd-code-surface)"
-                        x-bind:class="expanded ? 'border-neutral-300 dark:border-neutral-700' : 'border-neutral-200 dark:border-neutral-800'"
+                        class="w-full overflow-hidden rounded-xl border-[0.5px] border-neutral-900/8 bg-white shadow-[0_.5px_1px_rgba(0,0,0,0.15),0_5px_12px_-6px_rgba(0,0,0,0.08)] transition-colors duration-200 dark:border-white/6 dark:bg-(--rd-code-surface) dark:shadow-[0_-.5px_1px_rgba(255,255,255,0.15),0_5px_12px_-6px_rgba(0,0,0,0.2)]"
                       >
                         <button
                           type="button"
@@ -201,10 +232,9 @@ const formattedBodyDescription = bodyDescription
                             <div class="mb-2 text-xs font-medium text-neutral-600 dark:text-neutral-400">
                               {variant.label}
                             </div>
-                            <div x-data="{ expanded: false }">
+                            <div x-data="{ expanded: true }">
                               <div
-                                class="w-full overflow-hidden rounded-lg border border-neutral-200 bg-white transition-colors duration-200 dark:border-neutral-800 dark:bg-(--rd-code-surface)"
-                                x-bind:class="expanded ? 'border-neutral-300 dark:border-neutral-700' : 'border-neutral-200 dark:border-neutral-800'"
+                                class="w-full overflow-hidden rounded-lg border-[0.5px] border-neutral-900/8 bg-white shadow-[0_.5px_1px_rgba(0,0,0,0.15),0_5px_12px_-6px_rgba(0,0,0,0.08)] transition-colors duration-200 dark:border-white/6 dark:bg-(--rd-code-surface) dark:shadow-[0_-.5px_1px_rgba(255,255,255,0.15),0_5px_12px_-6px_rgba(0,0,0,0.2)]"
                               >
                                 <button
                                   type="button"
@@ -485,4 +515,138 @@ const formattedBodyDescription = bodyDescription
     );
     applySlotHeights();
   }
+
+  const inlineStack = document.querySelector("[data-inline-snippet-stack]");
+
+  if (inlineStack instanceof HTMLElement) {
+    const inlineSlots = Array.from(
+      inlineStack.querySelectorAll("[data-inline-snippet-slot]"),
+    ).filter((slot) => slot instanceof HTMLElement);
+
+    const getInlineViewportHeight = () => {
+      if (window.visualViewport?.height) {
+        return Math.floor(window.visualViewport.height);
+      }
+      return Math.floor(window.innerHeight);
+    };
+
+    const getInlineSlotHeightCap = () => {
+      const viewportCap = Math.floor(getInlineViewportHeight() * 0.7);
+      return Math.max(0, Math.min(448, viewportCap));
+    };
+
+    const inlinePrefersReducedMotion =
+      typeof window.matchMedia === "function" &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const inlineSlotHeightTransitionMs = 360;
+    let isAnimatingInlineSlotHeights = false;
+    let inlineSlotHeightAnimationTimeoutId = null;
+
+    const resetInlineSlotHeights = () => {
+      for (const slot of inlineSlots) {
+        slot.style.height = "";
+        slot.style.maxHeight = "";
+      }
+    };
+
+    const applyInlineSlotHeights = ({ animate = false } = {}) => {
+      if (!inlineSlots.length) return;
+      if (isAnimatingInlineSlotHeights && !animate) return;
+
+      if (window.getComputedStyle(inlineStack).display === "none") {
+        resetInlineSlotHeights();
+        return;
+      }
+
+      const shouldAnimate = animate && !inlinePrefersReducedMotion;
+      const previousHeights = shouldAnimate
+        ? inlineSlots.map((slot) =>
+            Math.ceil(slot.getBoundingClientRect().height),
+          )
+        : [];
+      const previousTransitions = shouldAnimate
+        ? inlineSlots.map((slot) => slot.style.transition)
+        : [];
+      const heightCap = getInlineSlotHeightCap();
+
+      if (shouldAnimate) {
+        for (const slot of inlineSlots) {
+          slot.style.transition = "none";
+        }
+      }
+
+      for (const slot of inlineSlots) {
+        slot.style.height = "auto";
+        slot.style.maxHeight = "none";
+      }
+
+      const targetHeights = inlineSlots.map((slot) => {
+        const naturalHeight = Math.ceil(slot.scrollHeight);
+        return Math.min(naturalHeight, heightCap);
+      });
+
+      const setInlineSlotHeights = () => {
+        for (let i = 0; i < inlineSlots.length; i += 1) {
+          const height = targetHeights[i];
+          inlineSlots[i].style.height = `${height}px`;
+          inlineSlots[i].style.maxHeight = `${height}px`;
+        }
+      };
+
+      if (!shouldAnimate) {
+        setInlineSlotHeights();
+        return;
+      }
+
+      isAnimatingInlineSlotHeights = true;
+      if (inlineSlotHeightAnimationTimeoutId) {
+        window.clearTimeout(inlineSlotHeightAnimationTimeoutId);
+      }
+
+      for (let i = 0; i < inlineSlots.length; i += 1) {
+        const height = previousHeights[i];
+        inlineSlots[i].style.height = `${height}px`;
+        inlineSlots[i].style.maxHeight = `${height}px`;
+      }
+
+      void inlineStack.offsetHeight;
+
+      for (let i = 0; i < inlineSlots.length; i += 1) {
+        inlineSlots[i].style.transition = previousTransitions[i];
+      }
+
+      window.requestAnimationFrame(setInlineSlotHeights);
+
+      inlineSlotHeightAnimationTimeoutId = window.setTimeout(() => {
+        isAnimatingInlineSlotHeights = false;
+        inlineSlotHeightAnimationTimeoutId = null;
+        applyInlineSlotHeights();
+      }, inlineSlotHeightTransitionMs + 80);
+    };
+
+    let inlineSlotAnimationFrameId = null;
+    const scheduleInlineSlotHeights = (options = {}) => {
+      if (inlineSlotAnimationFrameId) {
+        window.cancelAnimationFrame(inlineSlotAnimationFrameId);
+      }
+
+      inlineSlotAnimationFrameId = window.requestAnimationFrame(() => {
+        inlineSlotAnimationFrameId = window.requestAnimationFrame(() => {
+          inlineSlotAnimationFrameId = null;
+          applyInlineSlotHeights(options);
+        });
+      });
+    };
+
+    const inlineResizeObserver = new ResizeObserver(scheduleInlineSlotHeights);
+    inlineResizeObserver.observe(inlineStack);
+
+    window.addEventListener("resize", scheduleInlineSlotHeights);
+    window.visualViewport?.addEventListener("resize", scheduleInlineSlotHeights);
+    window.addEventListener(
+      "rd:snippet-content-change",
+      () => scheduleInlineSlotHeights({ animate: true }),
+    );
+    scheduleInlineSlotHeights();
+  }
 </script>

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>