zudoku 0.0.0-feda542 → 0.0.0-ff27e7ea

package/src/lib/components/context/ZudokuContext.ts

@@ -1,11 +1,12 @@
 import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useEffect } from "react";
 import { matchPath, useLocation } from "react-router";
-import { useAuth } from "../../authentication/hook.js";
+import type { NavigationItem } from "../../../config/validators/NavigationSchema.js";
+import { useAuthState } from "../../authentication/state.js";
 import type { ZudokuContext } from "../../core/ZudokuContext.js";
 import { joinUrl } from "../../util/joinUrl.js";
-import { CACHE_KEYS, NO_DEHYDRATE } from "../cache.js";
-import { traverseSidebar } from "../navigation/utils.js";
+import { CACHE_KEYS, useCache } from "../cache.js";
+import { traverseNavigation } from "../navigation/utils.js";
 
 export const ZudokuReactContext = createContext<ZudokuContext | undefined>(
   undefined,
@@ -23,6 +24,14 @@ export const useZudoku = () => {
 
 export const useApiIdentities = () => {
   const { getApiIdentities } = useZudoku();
+  const { isAuthenticated } = useAuthState();
+  const { invalidateCache } = useCache();
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      invalidateCache("API_IDENTITIES");
+    }
+  }, [isAuthenticated, invalidateCache]);
 
   return useQuery({
     queryFn: getApiIdentities,
@@ -30,54 +39,78 @@ export const useApiIdentities = () => {
   });
 };
 
+const getItemPath = (item: NavigationItem) => {
+  switch (item.type) {
+    case "doc":
+      return joinUrl(item.path);
+    case "category":
+      return item.link ? joinUrl(item.link.path) : undefined;
+    case "link":
+      return item.to;
+    case "custom-page":
+      return joinUrl(item.path);
+    default:
+      return undefined;
+  }
+};
+
+const extractAllPaths = (items: NavigationItem[]) => {
+  const paths = new Set<string>();
+
+  const collectPaths = (items: NavigationItem[]) => {
+    for (const item of items) {
+      const itemPath = getItemPath(item)?.split("?").at(0)?.split("#").at(0);
+
+      if (itemPath) paths.add(itemPath);
+      if (item.type === "category") {
+        collectPaths(item.items);
+      }
+    }
+  };
+  collectPaths(items);
+
+  return [...paths];
+};
+
 export const useCurrentNavigation = () => {
-  const { getPluginSidebar, sidebars, topNavigation, options } = useZudoku();
+  const { getPluginNavigation, navigation } = useZudoku();
   const location = useLocation();
-  const auth = useAuth();
-
-  const isProtectedRoute = options.protectedRoutes?.some((route) =>
-    matchPath(route, location.pathname),
-  );
-
-  let currentSidebarItem = Object.entries(sidebars).find(([, sidebar]) => {
-    return traverseSidebar(sidebar, (item) => {
-      const itemId =
-        item.type === "doc"
-          ? joinUrl(item.id)
-          : item.type === "category" && item.link
-            ? joinUrl(item.link.id)
-            : undefined;
-
-      if (itemId === location.pathname) {
-        return item;
-      }
-    });
+
+  const navItem = traverseNavigation(navigation, (item, parentCategories) => {
+    if (getItemPath(item) === location.pathname) {
+      return parentCategories.at(0) ?? item;
+    }
   });
-  const currentTopNavItem =
-    topNavigation.find((t) => t.id === currentSidebarItem?.[0]) ??
-    topNavigation.find((item) => matchPath(item.id, location.pathname));
-
-  if (
-    currentTopNavItem &&
-    !currentSidebarItem &&
-    currentTopNavItem.id in sidebars
-  ) {
-    currentSidebarItem = ["", sidebars[currentTopNavItem.id]!];
-  }
 
   const { data } = useSuspenseQuery({
-    queryFn: () => getPluginSidebar(location.pathname),
-    // We just want to suspend here and don't store in SSR dehydrated state
-    queryKey: ["plugin-sidebar", NO_DEHYDRATE, location.pathname],
+    queryFn: () => getPluginNavigation(location.pathname),
+    queryKey: ["plugin-navigation", location.pathname],
   });
 
-  const hideSidebar =
-    auth.isAuthEnabled && !auth.isAuthenticated && isProtectedRoute;
+  let topNavItem = navItem;
+  if (!navItem && data.length > 0) {
+    const pluginBasePaths = extractAllPaths(data);
+
+    topNavItem = navigation
+      .flatMap((item) => {
+        const itemPath = getItemPath(item);
+        return itemPath ? [{ item, path: itemPath }] : [];
+      })
+      .sort((a, b) => b.path.length - a.path.length)
+      .find(({ path }) => {
+        return pluginBasePaths.some(
+          (basePath) =>
+            matchPath({ path, end: false }, basePath) ??
+            matchPath({ path: basePath, end: false }, path),
+        );
+      })?.item;
+  }
 
   return {
-    sidebar: hideSidebar
-      ? []
-      : [...(currentSidebarItem ? currentSidebarItem[1] : []), ...data],
-    topNavItem: currentTopNavItem,
+    navigation: [
+      ...(navItem?.type === "category" ? navItem.items : []),
+      ...data,
+    ],
+    topNavItem,
   };
 };

package/src/lib/components/context/ZudokuProvider.tsx

@@ -1,6 +1,7 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
 import type { PropsWithChildren } from "react";
-import { ZudokuContext } from "../../core/ZudokuContext.js";
+import type { ZudokuContext } from "../../core/ZudokuContext.js";
+import { NO_DEHYDRATE } from "../cache.js";
 import { ZudokuReactContext } from "./ZudokuContext.js";
 
 export const ZudokuProvider = ({
@@ -12,7 +13,7 @@ export const ZudokuProvider = ({
       await context.initialize();
       return true;
     },
-    queryKey: ["zudoku-initialize"],
+    queryKey: ["zudoku-initialize", NO_DEHYDRATE],
   });
 
   return (

package/src/lib/components/index.ts

@@ -3,48 +3,40 @@ import { Helmet } from "@zudoku/react-helmet-async";
 import { useTheme as useThemeImport } from "next-themes";
 import { Link as LinkImport } from "react-router";
 import { useAuth as useAuthImport } from "../authentication/hook.js";
-import { RouteGuard as RouteGuardImport } from "../core/RouteGuard.js";
-import { RouterError as RouterErrorImport } from "../errors/RouterError.js";
-import { ServerError as ServerErrorImport } from "../errors/ServerError.js";
 import { Button as ButtonImport } from "../ui/Button.js";
 import { Callout as CalloutImport } from "../ui/Callout.js";
-import {
-  Bootstrap as BootstrapImport,
-  BootstrapStatic as BootstrapStaticImport,
-} from "./Bootstrap.js";
+import { ClientOnly as ClientOnlyImport } from "./ClientOnly.js";
 import {
   CACHE_KEYS as CACHE_KEYS_IMPORT,
   useCache as useCacheImport,
 } from "./cache.js";
-import { ClientOnly as ClientOnlyImport } from "./ClientOnly.js";
 import { useZudoku as useZudokuImport } from "./context/ZudokuContext.js";
-import { Layout as LayoutImport } from "./Layout.js";
 import { Markdown as MarkdownImport } from "./Markdown.js";
+import { Slot as SlotImport } from "./Slot.js";
 import { Spinner as SpinnerImport } from "./Spinner.js";
-import { StatusPage as StatusPageImport } from "./StatusPage.js";
+import { Typography as TypographyImport } from "./Typography.js";
 import { Zudoku as ZudokuImport } from "./Zudoku.js";
 
-export const useMDXComponents = /*@__PURE__*/ useMDXComponentsImport;
-export const Layout = /*@__PURE__*/ LayoutImport;
-export const RouterError = /*@__PURE__*/ RouterErrorImport;
-export const ServerError = /*@__PURE__*/ ServerErrorImport;
-export const Bootstrap = /*@__PURE__*/ BootstrapImport;
-export const BootstrapStatic = /*@__PURE__*/ BootstrapStaticImport;
-export const RouteGuard = /*@__PURE__*/ RouteGuardImport;
-
 export const Head = /*@__PURE__*/ Helmet;
-
-export const useZudoku = /*@__PURE__*/ useZudokuImport;
-export const useAuth = /*@__PURE__*/ useAuthImport;
-export const useCache = /*@__PURE__*/ useCacheImport;
-export const CACHE_KEYS = /*@__PURE__*/ CACHE_KEYS_IMPORT;
-export const Zudoku = /*@__PURE__*/ ZudokuImport;
-
-export const StatusPage = /*@__PURE__*/ StatusPageImport;
 export const Callout = /*@__PURE__*/ CalloutImport;
 export const Markdown = /*@__PURE__*/ MarkdownImport;
 export const Spinner = /*@__PURE__*/ SpinnerImport;
 export const ClientOnly = /*@__PURE__*/ ClientOnlyImport;
 export const Button = /*@__PURE__*/ ButtonImport;
 export const Link = /*@__PURE__*/ LinkImport;
+export const Zudoku = /*@__PURE__*/ ZudokuImport;
+export const Typography = /*@__PURE__*/ TypographyImport;
+export const Slot = /*@__PURE__*/ SlotImport;
+
+/** @deprecated Import from `zudoku/hooks` instead */
+export const useMDXComponents = /*@__PURE__*/ useMDXComponentsImport;
+/** @deprecated Import from `zudoku/hooks` instead */
+export const useZudoku = /*@__PURE__*/ useZudokuImport;
+/** @deprecated Import from `zudoku/hooks` instead */
+export const useAuth = /*@__PURE__*/ useAuthImport;
+/** @deprecated Import from `zudoku/hooks` instead */
+export const useCache = /*@__PURE__*/ useCacheImport;
+/** @deprecated Import from `zudoku/hooks` instead */
+export const CACHE_KEYS = /*@__PURE__*/ CACHE_KEYS_IMPORT;
+/** @deprecated Import from `zudoku/hooks` instead */
 export const useTheme = /*@__PURE__*/ useThemeImport;

package/src/lib/components/navigation/Navigation.tsx

@@ -0,0 +1,50 @@
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import type { NavigationItem as NavigationItemType } from "../../../config/validators/NavigationSchema.js";
+import { DrawerContent, DrawerTitle } from "../../ui/Drawer.js";
+import { Slot } from "../Slot.js";
+import { NavigationItem } from "./NavigationItem.js";
+import { NavigationWrapper } from "./NavigationWrapper.js";
+
+export const Navigation = ({
+  onRequestClose,
+  navigation,
+}: {
+  onRequestClose?: () => void;
+  navigation: NavigationItemType[];
+}) => (
+  <>
+    <NavigationWrapper>
+      <Slot.Target name="navigation-before" />
+      {navigation.map((item) => (
+        <NavigationItem
+          key={
+            item.type +
+            (item.label ?? "") +
+            ("path" in item ? item.path : "") +
+            ("file" in item ? item.file : "") +
+            ("to" in item ? item.to : "")
+          }
+          item={item}
+        />
+      ))}
+      <Slot.Target name="navigation-after" />
+    </NavigationWrapper>
+    <DrawerContent
+      className="lg:hidden h-[100dvh] start-0 w-[320px] rounded-none"
+      aria-describedby={undefined}
+    >
+      <div className="p-4 overflow-y-auto overscroll-none">
+        <VisuallyHidden>
+          <DrawerTitle>Navigation</DrawerTitle>
+        </VisuallyHidden>
+        {navigation.map((item) => (
+          <NavigationItem
+            key={item.label}
+            item={item}
+            onRequestClose={onRequestClose}
+          />
+        ))}
+      </div>
+    </DrawerContent>
+  </>
+);

package/src/lib/components/navigation/NavigationBadge.tsx

@@ -0,0 +1,48 @@
+import { cn } from "../../util/cn.js";
+
+export const ColorMap = {
+  green: "bg-green-400 dark:bg-green-800",
+  blue: "bg-sky-400 dark:bg-sky-800",
+  yellow: "bg-yellow-400 dark:bg-yellow-800",
+  red: "bg-red-400 dark:bg-red-800",
+  purple: "bg-purple-400 dark:bg-purple-600",
+  indigo: "bg-indigo-400 dark:bg-indigo-600",
+  gray: "bg-gray-400 dark:bg-gray-600",
+  outline: "border border-border rounded-md text-foreground",
+};
+
+export const ColorMapInvert = {
+  green: "text-green-500 dark:text-green-600",
+  blue: "text-sky-400 dark:text-sky-600",
+  yellow: "text-yellow-400 dark:text-yellow-600",
+  red: "text-red-400 dark:text-red-600",
+  purple: "text-purple-400 dark:text-purple-600",
+  indigo: "text-indigo-400 dark:text-indigo-600",
+  gray: "text-gray-400 dark:text-gray-600",
+  outline: "",
+};
+
+export const NavigationBadge = ({
+  color,
+  label,
+  className,
+  invert,
+}: {
+  color: keyof typeof ColorMap;
+  label: string;
+  className?: string;
+  invert?: boolean;
+}) => {
+  return (
+    <span
+      className={cn(
+        "flex items-center duration-200 transition-opacity text-center uppercase text-[0.65rem] leading-5 font-bold rounded-sm text-background dark:text-zinc-50 h-full",
+        color === "outline" ? "px-3" : "mt-0.5 px-1",
+        invert ? ColorMapInvert[color] : ColorMap[color],
+        className,
+      )}
+    >
+      {label}
+    </span>
+  );
+};

package/src/lib/components/navigation/NavigationCategory.tsx

@@ -0,0 +1,153 @@
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { deepEqual } from "fast-equals";
+import { ChevronRightIcon } from "lucide-react";
+import { memo, useEffect, useState } from "react";
+import { NavLink, useLocation, useMatch } from "react-router";
+import { Button } from "zudoku/ui/Button.js";
+import type { NavigationCategory as NavigationCategoryType } from "../../../config/validators/NavigationSchema.js";
+import { cn } from "../../util/cn.js";
+import { joinUrl } from "../../util/joinUrl.js";
+import { NavigationItem } from "./NavigationItem.js";
+import { navigationListItem, useIsCategoryOpen } from "./utils.js";
+
+const NavigationCategoryInner = ({
+  category,
+  onRequestClose,
+}: {
+  category: NavigationCategoryType;
+  onRequestClose?: () => void;
+}) => {
+  const isCategoryOpen = useIsCategoryOpen(category);
+  const [hasInteracted, setHasInteracted] = useState(false);
+  const location = useLocation();
+
+  const isCollapsible = category.collapsible ?? true;
+  const isCollapsed = category.collapsed ?? true;
+  const isDefaultOpen = Boolean(
+    !isCollapsible || !isCollapsed || isCategoryOpen,
+  );
+  const [open, setOpen] = useState(isDefaultOpen);
+  const isActive = useMatch(category.link?.path ?? "");
+
+  useEffect(() => {
+    // this is triggered when an item from the navigation is clicked
+    // and the navigation, enclosing this item, is not opened
+    if (isCategoryOpen) {
+      setOpen(true);
+    }
+  }, [isCategoryOpen]);
+
+  const ToggleButton = isCollapsible && (
+    <Button
+      onClick={(e) => {
+        e.preventDefault();
+        setOpen((prev) => !prev);
+        setHasInteracted(true);
+      }}
+      variant="ghost"
+      size="icon"
+      className="size-6 hover:bg-[hsl(from_var(--accent)_h_s_calc(l+6*var(--dark)))]"
+    >
+      <ChevronRightIcon
+        size={16}
+        className={cn(
+          hasInteracted && "transition",
+          "shrink-0 group-data-[state=open]:rotate-90 rtl:rotate-180",
+        )}
+      />
+    </Button>
+  );
+
+  const icon = category.icon && (
+    <category.icon
+      size={16}
+      className={cn("align-[-0.125em] ", isActive && "text-primary")}
+    />
+  );
+
+  const styles = navigationListItem({
+    className: [
+      "group text-start font-medium",
+      isCollapsible || typeof category.link !== "undefined"
+        ? "cursor-pointer"
+        : "cursor-default hover:bg-transparent",
+    ],
+  });
+
+  return (
+    <Collapsible.Root
+      className="flex flex-col"
+      defaultOpen={isDefaultOpen}
+      open={open}
+      onOpenChange={() => setOpen(true)}
+    >
+      <Collapsible.Trigger className="group" asChild disabled={!isCollapsible}>
+        {category.link?.type === "doc" ? (
+          <NavLink
+            to={{
+              pathname: joinUrl(category.link.path),
+              search: location.search,
+            }}
+            className={styles}
+            onClick={() => {
+              setHasInteracted(true);
+              // if it is the current path and closed then open it because there's no path change to trigger the open
+              if (isActive && !open) {
+                setOpen(true);
+              }
+            }}
+          >
+            {icon}
+            <div className="flex items-center gap-2 justify-between w-full text-foreground/80 group-aria-[current='page']:text-primary">
+              <div className="truncate">{category.label}</div>
+              {ToggleButton}
+            </div>
+          </NavLink>
+        ) : (
+          // biome-ignore lint/a11y/noStaticElementInteractions: This is only to track if the user has interacted
+          <div
+            onClick={() => setHasInteracted(true)}
+            onKeyUp={(e) => {
+              if (e.key === "Enter" || e.key === " ") setHasInteracted(true);
+            }}
+            className={styles}
+          >
+            {icon}
+            <div className="flex items-center justify-between w-full">
+              <div className="flex gap-2 truncate w-full">{category.label}</div>
+              {ToggleButton}
+            </div>
+          </div>
+        )}
+      </Collapsible.Trigger>
+      <Collapsible.Content
+        className={cn(
+          // CollapsibleContent class is used to animate and it should only be applied when the user has triggered the toggle
+          hasInteracted && "CollapsibleContent",
+          category.items.length === 0 && "hidden",
+          "ms-6 my-1",
+        )}
+      >
+        <ul className="relative after:absolute after:-start-(--padding-nav-item) after:translate-x-[1.5px] after:top-0 after:bottom-0 after:w-px after:bg-border">
+          {category.items.map((item) => (
+            <NavigationItem
+              key={
+                item.type +
+                (item.label ?? "") +
+                ("path" in item ? item.path : "") +
+                ("file" in item ? item.file : "") +
+                ("to" in item ? item.to : "")
+              }
+              onRequestClose={onRequestClose}
+              item={item}
+            />
+          ))}
+        </ul>
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
+};
+
+export const NavigationCategory = memo(NavigationCategoryInner, deepEqual);
+
+NavigationCategory.displayName = "NavigationCategory";

package/src/lib/components/navigation/NavigationItem.tsx

@@ -0,0 +1,148 @@
+import { ExternalLinkIcon } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { NavLink, useLocation } from "react-router";
+import { Tooltip, TooltipContent, TooltipTrigger } from "zudoku/ui/Tooltip.js";
+import type { NavigationItem as NavigationItemType } from "../../../config/validators/NavigationSchema.js";
+import { useAuth } from "../../authentication/hook.js";
+import { cn } from "../../util/cn.js";
+import { joinUrl } from "../../util/joinUrl.js";
+import { AnchorLink } from "../AnchorLink.js";
+import { useViewportAnchor } from "../context/ViewportAnchorContext.js";
+import { useZudoku } from "../context/ZudokuContext.js";
+import { NavigationBadge } from "./NavigationBadge.js";
+import { NavigationCategory } from "./NavigationCategory.js";
+import { navigationListItem, shouldShowItem } from "./utils.js";
+
+const TruncatedLabel = ({
+  label,
+  className,
+}: {
+  label: string;
+  className?: string;
+}) => {
+  const ref = useRef<HTMLSpanElement>(null);
+  const [isTruncated, setIsTruncated] = useState(false);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    if (ref.current.offsetWidth < ref.current.scrollWidth) {
+      setIsTruncated(true);
+    }
+  }, []);
+
+  return (
+    <>
+      <span
+        className={cn("truncate flex-1", className)}
+        title={label}
+        ref={ref}
+      >
+        {label}
+      </span>
+      {isTruncated && (
+        <Tooltip disableHoverableContent>
+          <TooltipTrigger className="absolute inset-0 z-10" />
+          <TooltipContent className="max-w-64" side="bottom" align="center">
+            {label}
+          </TooltipContent>
+        </Tooltip>
+      )}
+    </>
+  );
+};
+
+export const DATA_ANCHOR_ATTR = "data-anchor";
+
+export const NavigationItem = ({
+  item,
+  onRequestClose,
+}: {
+  item: NavigationItemType;
+  onRequestClose?: () => void;
+}) => {
+  const location = useLocation();
+  const { activeAnchor } = useViewportAnchor();
+  const auth = useAuth();
+  const context = useZudoku();
+
+  if (!shouldShowItem(auth, context)(item)) {
+    return null;
+  }
+
+  switch (item.type) {
+    case "category":
+      return (
+        <NavigationCategory category={item} onRequestClose={onRequestClose} />
+      );
+    case "doc":
+      return (
+        <NavLink
+          viewTransition
+          className={({ isActive, isPending }) =>
+            navigationListItem({ isActive, isPending })
+          }
+          to={joinUrl(item.path)}
+          onClick={onRequestClose}
+          end
+        >
+          {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
+          {item.badge ? (
+            <>
+              {item.label && (
+                <TruncatedLabel label={item.label} className="flex-1" />
+              )}
+              <NavigationBadge {...item.badge} />
+            </>
+          ) : (
+            item.label
+          )}
+        </NavLink>
+      );
+    case "link":
+    case "custom-page": {
+      const href = item.type === "link" ? item.to : joinUrl(item.path);
+      return !href.startsWith("http") ? (
+        <AnchorLink
+          to={{
+            pathname: href.split("#")[0],
+            hash: href.split("#")[1],
+            search: location.search,
+          }}
+          {...{ [DATA_ANCHOR_ATTR]: href.split("#")[1] }}
+          className={navigationListItem({
+            isActive:
+              href ===
+              [location.pathname, activeAnchor].filter(Boolean).join("#"),
+          })}
+          onClick={onRequestClose}
+        >
+          {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
+          {item.badge ? (
+            <>
+              {item.label && <TruncatedLabel label={item.label} />}
+              <NavigationBadge {...item.badge} />
+            </>
+          ) : (
+            <span className="break-all">{item.label}</span>
+          )}
+        </AnchorLink>
+      ) : (
+        <a
+          className={navigationListItem()}
+          href={href}
+          target={"target" in item ? item.target : "_blank"}
+          rel="noopener noreferrer"
+          onClick={onRequestClose}
+        >
+          {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
+          <span className="whitespace-normal">{item.label}</span>
+          {/* This prevents that the icon would be positioned in its own line if the text fills a line entirely */}
+          <span className="whitespace-nowrap">
+            <ExternalLinkIcon className="inline -translate-y-0.5" size={12} />
+          </span>
+        </a>
+      );
+    }
+  }
+};

package/src/lib/components/navigation/NavigationWrapper.tsx

@@ -0,0 +1,49 @@
+import { type PropsWithChildren, useEffect, useRef } from "react";
+import { cn } from "../../util/cn.js";
+import { scrollIntoViewIfNeeded } from "../../util/scrollIntoViewIfNeeded.js";
+import { useZudoku } from "../context/ZudokuContext.js";
+import { PoweredByZudoku } from "./PoweredByZudoku.js";
+
+export const NavigationWrapper = ({
+  children,
+  className,
+}: PropsWithChildren<{
+  className?: string;
+}>) => {
+  const { options } = useZudoku();
+  const navRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const active = navRef.current?.querySelector('[aria-current="page"]');
+    scrollIntoViewIfNeeded(active ?? null);
+  }, []);
+
+  return (
+    <div
+      className="grid sticky top-(--header-height) lg:h-[calc(100vh-var(--header-height))] grid-rows-[1fr_min-content] border-r"
+      data-pagefind-ignore="all"
+    >
+      <nav
+        ref={navRef}
+        className={cn(
+          "hidden max-w-[calc(var(--side-nav-width)+var(--padding-nav-item))] lg:flex scrollbar flex-col overflow-y-auto shrink-0 text-sm pe-3 ps-4 lg:ps-8",
+          "-mx-(--padding-nav-item) pb-[8vh] pt-(--padding-content-top) scroll-pt-2 gap-1",
+          // Revert the padding/margin on the first child
+          "-mt-2.5",
+          className,
+        )}
+        style={{
+          maskImage: `linear-gradient(180deg, transparent 1%, rgba(0, 0, 0, 1) 20px, rgba(0, 0, 0, 1) 90%, transparent 99%)`,
+        }}
+      >
+        {children}
+      </nav>
+
+      <div className="bg-background border-t p-2 mx-5  gap-2 items-center mt-2 drop-shadow-[0_-3px_1px_rgba(0,0,0,0.015)] hidden lg:[&:has(>_:nth-child(1):last-child)]:flex">
+        {options.site?.showPoweredBy !== false && <PoweredByZudoku />}
+      </div>
+    </div>
+  );
+};
+
+NavigationWrapper.displayName = "NavigationWrapper";