zudoku 0.0.0-e614aaa → 0.0.0-e6d1d34

package/src/lib/components/TopNavigation.tsx

@@ -1,17 +1,18 @@
+import { useNProgress } from "@tanem/react-nprogress";
 import { cx } from "class-variance-authority";
-import { Suspense } from "react";
+import { Suspense, useEffect, useState } from "react";
 import { NavLink, useNavigation } from "react-router";
-import { TopNavigationItem } from "../../config/validators/common.js";
+import type { TopNavigationItem } from "../../config/validators/common.js";
 import { useAuth } from "../authentication/hook.js";
-import { ZudokuError } from "../util/invariant.js";
-import { joinPath } from "../util/joinPath.js";
+import { joinUrl } from "../util/joinUrl.js";
 import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
 import { traverseSidebar } from "./navigation/utils.js";
 import { Slotlet } from "./SlotletProvider.js";
 
 export const isHiddenItem =
   (isAuthenticated?: boolean) =>
-  (item: { display?: "auth" | "anon" | "always" }) => {
+  (item: { display?: "auth" | "anon" | "always" | "hide" }): boolean => {
+    if (item.display === "hide") return false;
     return (
       (item.display === "auth" && isAuthenticated) ||
       (item.display === "anon" && !isAuthenticated) ||
@@ -20,21 +21,47 @@ export const isHiddenItem =
     );
   };
 
+export const PageProgress = () => {
+  const navigation = useNavigation();
+  const isNavigating = navigation.state === "loading";
+  // delay the animation to avoid flickering
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setIsAnimating(isNavigating), 100);
+
+    return () => clearTimeout(timer);
+  }, [isNavigating]);
+
+  const { isFinished, progress } = useNProgress({ isAnimating });
+
+  return (
+    <div
+      className="absolute w-0 left-0 right-0 bottom-[-1px] h-[2px] bg-primary transition-all duration-300 ease-in-out"
+      style={{
+        opacity: isFinished ? 0 : 1,
+        width: isFinished ? 0 : `${progress * 100}%`,
+      }}
+    />
+  );
+};
+
 export const TopNavigation = () => {
   const { topNavigation } = useZudoku();
   const { isAuthenticated } = useAuth();
 
-  // Hide top nav if there is only one item
-  if (topNavigation.length <= 1) {
+  const filteredItems = topNavigation.filter(isHiddenItem(isAuthenticated));
+
+  if (filteredItems.length === 0) {
     return <style>{`:root { --top-nav-height: 0px; }`}</style>;
   }
 
   return (
     <Suspense>
-      <div className=" items-center justify-between px-8 h-[--top-nav-height] hidden lg:flex text-sm">
+      <div className="items-center justify-between px-8 h-[--top-nav-height] hidden lg:flex text-sm relative">
         <nav className="text-sm">
           <ul className="flex flex-row items-center gap-8">
-            {topNavigation.filter(isHiddenItem(isAuthenticated)).map((item) => (
+            {filteredItems.map((item) => (
               <li key={item.id}>
                 <TopNavItem {...item} />
               </li>
@@ -43,6 +70,7 @@ export const TopNavigation = () => {
         </nav>
         <Slotlet name="top-navigation-side" />
       </div>
+      <PageProgress />
     </Suspense>
   );
 };
@@ -66,15 +94,10 @@ export const TopNavItem = ({
     defaultLink ??
     (currentSidebar
       ? traverseSidebar(currentSidebar, (item) => {
-          if (item.type === "doc") return joinPath(item.id);
+          if (item.type === "doc") return joinUrl(item.id);
         })
-      : joinPath(id));
-
-  if (!first) {
-    throw new ZudokuError("Page not found.", {
-      developerHint: `No links found in top navigation for '${id}'. Check that the sidebar isn't empty or that a default link is set.`,
-    });
-  }
+      : joinUrl(id)) ??
+    joinUrl(id);
 
   return (
     // We don't use isActive here because it has to be inside the sidebar,

package/src/lib/components/Zudoku.tsx

@@ -1,4 +1,5 @@
 import { MDXProvider } from "@mdx-js/react";
+import { useQueryClient } from "@tanstack/react-query";
 import { Helmet } from "@zudoku/react-helmet-async";
 import { ThemeProvider } from "next-themes";
 import {
@@ -10,7 +11,7 @@ import {
   useState,
 } from "react";
 import { ErrorBoundary } from "react-error-boundary";
-import { Outlet, useNavigation } from "react-router";
+import { Outlet, useLocation, useNavigation } from "react-router";
 import { hasHead, isMdxProviderPlugin } from "../core/plugins.js";
 import {
   ZudokuContext,
@@ -29,6 +30,8 @@ import { ViewportAnchorProvider } from "./context/ViewportAnchorContext.js";
 import { ZudokuProvider } from "./context/ZudokuProvider.js";
 import { SlotletProvider } from "./SlotletProvider.js";
 
+let zudokuContext: ZudokuContext | undefined;
+
 const ZudokoInner = memo(
   ({ children, ...props }: PropsWithChildren<ZudokuContextOptions>) => {
     const components = useMemo(
@@ -36,6 +39,7 @@ const ZudokoInner = memo(
       [props.overrides],
     );
 
+    const location = useLocation();
     const mdxComponents = useMemo(() => {
       const componentsFromPlugins = (props.plugins ?? [])
         .filter(isMdxProviderPlugin)
@@ -59,6 +63,7 @@ const ZudokoInner = memo(
       [stagger, didNavigate],
     );
     const navigation = useNavigation();
+    const queryClient = useQueryClient();
 
     useEffect(() => {
       if (didNavigate) {
@@ -67,10 +72,14 @@ const ZudokoInner = memo(
       setDidNavigate(true);
     }, [didNavigate, navigation.location]);
 
-    const [zudokuContext] = useState(() => new ZudokuContext(props));
+    if (!zudokuContext) {
+      zudokuContext = new ZudokuContext(props, queryClient);
+    }
 
     const heads = props.plugins
-      ?.flatMap((plugin) => (hasHead(plugin) ? (plugin.getHead?.() ?? []) : []))
+      ?.flatMap((plugin) =>
+        hasHead(plugin) ? (plugin.getHead?.({ location }) ?? []) : [],
+      )
       // eslint-disable-next-line react/no-array-index-key
       .map((entry, i) => <Helmet key={i}>{entry}</Helmet>);
 

package/src/lib/components/cache.ts

@@ -13,3 +13,11 @@ export const useCache = () => {
     },
   };
 };
+
+/**
+ * If a query has this key in its queryKey, it will not put its result in the dehydrated state in the SSR.
+ *
+ * This is useful if the query should only be suspended and not included in the initial HTML response.
+ * (e.g. too large in size, or not needed for the initial page load)
+ */
+export const NO_DEHYDRATE = "no-dehydrate";

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

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const BypassProtectedRoutesContext = createContext(false);

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

@@ -1,5 +1,4 @@
 import {
-  type ReactNode,
   createContext,
   useCallback,
   useContext,
@@ -7,6 +6,7 @@ import {
   useMemo,
   useRef,
   useState,
+  type PropsWithChildren,
 } from "react";
 
 type AnchorContextType = {
@@ -55,11 +55,7 @@ export const useRegisterAnchorElement = () => {
   return { ref: setRef };
 };
 
-export const ViewportAnchorProvider = ({
-  children,
-}: {
-  children: ReactNode;
-}) => {
+export const ViewportAnchorProvider = ({ children }: PropsWithChildren) => {
   const [activeAnchor, setActiveAnchor] = useState("");
   const observerRef = useRef<IntersectionObserver | null>(null);
   const registeredElements = useRef(new Set<HTMLElement>());
@@ -75,9 +71,7 @@ export const ViewportAnchorProvider = ({
         }
       },
       {
-        // 115px is the height of the sticky header
-        // see --header-height in `main.css`
-        rootMargin: "115px 0px -80% 0px",
+        rootMargin: "0px 0px -80% 0px",
         threshold: 0.75,
       },
     );
@@ -100,14 +94,11 @@ export const ViewportAnchorProvider = ({
         window.innerHeight + window.scrollY >= document.body.scrollHeight;
 
       if (hasReachedTop) {
-        // reset the active anchor when we reach the top
         setActiveAnchor("");
       } else if (hasReachedBottom) {
-        requestIdleCallback(() => {
-          // set the last anchor when we reach the bottom
-          const lastItem = Array.from(elements).pop();
-          setActiveAnchor(lastItem?.id ?? "");
-        });
+        const lastItem = Array.from(elements).pop();
+        const lastId = lastItem?.id ?? "";
+        setActiveAnchor(lastId);
       }
     };
 

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

@@ -2,9 +2,9 @@ import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
 import { createContext, useContext } from "react";
 import { matchPath, useLocation } from "react-router";
 import { useAuth } from "../../authentication/hook.js";
-import { ZudokuContext } from "../../core/ZudokuContext.js";
-import { joinPath } from "../../util/joinPath.js";
-import { CACHE_KEYS } from "../cache.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";
 
 export const ZudokuReactContext = createContext<ZudokuContext | undefined>(
@@ -26,7 +26,7 @@ export const useApiIdentities = () => {
 
   return useQuery({
     queryFn: getApiIdentities,
-    queryKey: [CACHE_KEYS.API_IDENTITIES],
+    queryKey: CACHE_KEYS.API_IDENTITIES,
   });
 };
 
@@ -39,13 +39,13 @@ export const useCurrentNavigation = () => {
     matchPath(route, location.pathname),
   );
 
-  const currentSidebarItem = Object.entries(sidebars).find(([, sidebar]) => {
+  let currentSidebarItem = Object.entries(sidebars).find(([, sidebar]) => {
     return traverseSidebar(sidebar, (item) => {
       const itemId =
         item.type === "doc"
-          ? joinPath(item.id)
+          ? joinUrl(item.id)
           : item.type === "category" && item.link
-            ? joinPath(item.link.id)
+            ? joinUrl(item.link.id)
             : undefined;
 
       if (itemId === location.pathname) {
@@ -57,9 +57,18 @@ export const useCurrentNavigation = () => {
     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),
-    queryKey: ["plugin-sidebar", location.pathname],
+    // We just want to suspend here and don't store in SSR dehydrated state
+    queryKey: ["plugin-sidebar", NO_DEHYDRATE, location.pathname],
   });
 
   const hideSidebar =

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

@@ -0,0 +1,23 @@
+import { ChevronRightIcon } from "lucide-react";
+import { cn } from "../../util/cn.js";
+import ZudokuLogo from "./ZudokuLogo.js";
+
+export const PoweredByZudoku = ({ className }: { className?: string }) => (
+  <a
+    href="https://zudoku.dev"
+    target="_blank"
+    rel="noopener noreferrer"
+    className={cn(
+      "flex justify-between items-center w-full border border-transparent hover:border-border rounded-full hover:shadow-sm h-7 px-3 text-nowrap hover:bg-muted/80 transition-all",
+      className,
+    )}
+  >
+    <div className="opacity-70 hover:opacity-100 transition-opacity gap-1.5 text-[11px] font-medium rounded-full h-7 flex items-center text-nowrap">
+      <ZudokuLogo className="w-3.5 h-3.5 dark:fill-white" />
+      powered by Zudoku
+    </div>
+    <div className="text-xs font-medium opacity-70 hover:text-foreground transition-colors cursor-pointer">
+      <ChevronRightIcon size={12} absoluteStrokeWidth strokeWidth={1.5} />
+    </div>
+  </a>
+);

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

@@ -1,55 +1,41 @@
-import { useEffect, useRef } from "react";
-
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import type { SidebarItem as SidebarItemType } from "../../../config/validators/SidebarSchema.js";
 import { DrawerContent, DrawerTitle } from "../../ui/Drawer.js";
-import { scrollIntoViewIfNeeded } from "../../util/scrollIntoViewIfNeeded.js";
-import { useCurrentNavigation } from "../context/ZudokuContext.js";
 import { Slotlet } from "../SlotletProvider.js";
 import { SidebarItem } from "./SidebarItem.js";
 import { SidebarWrapper } from "./SidebarWrapper.js";
 
 export const Sidebar = ({
   onRequestClose,
+  sidebar,
 }: {
   onRequestClose?: () => void;
-}) => {
-  const navRef = useRef<HTMLDivElement | null>(null);
-  const navigation = useCurrentNavigation();
-
-  useEffect(() => {
-    const active = navRef.current?.querySelector('[aria-current="page"]');
-    scrollIntoViewIfNeeded(active ?? null);
-  }, []);
-
-  return (
-    <>
-      <SidebarWrapper
-        ref={navRef}
-        pushMainContent={navigation.sidebar.length > 0}
-      >
-        <Slotlet name="zudoku-before-navigation" />
-        {navigation.sidebar.map((item) => (
-          <SidebarItem key={item.label} item={item} />
+  sidebar: SidebarItemType[];
+}) => (
+  <>
+    <SidebarWrapper>
+      <Slotlet name="zudoku-before-navigation" />
+      {sidebar.map((item) => (
+        <SidebarItem key={item.label} item={item} />
+      ))}
+      <Slotlet name="zudoku-after-navigation" />
+    </SidebarWrapper>
+    <DrawerContent
+      className="lg:hidden h-[100dvh] left-0 w-[320px] rounded-none"
+      aria-describedby={undefined}
+    >
+      <div className="p-4 overflow-y-auto overscroll-none">
+        <VisuallyHidden>
+          <DrawerTitle>Sidebar</DrawerTitle>
+        </VisuallyHidden>
+        {sidebar.map((item) => (
+          <SidebarItem
+            key={item.label}
+            item={item}
+            onRequestClose={onRequestClose}
+          />
         ))}
-        <Slotlet name="zudoku-after-navigation" />
-      </SidebarWrapper>
-      <DrawerContent
-        className="lg:hidden h-[100dvh] left-0 w-[320px] rounded-none"
-        aria-describedby={undefined}
-      >
-        <div className="p-4 overflow-y-auto overscroll-none">
-          <VisuallyHidden>
-            <DrawerTitle>Sidebar</DrawerTitle>
-          </VisuallyHidden>
-          {navigation.sidebar.map((item) => (
-            <SidebarItem
-              key={item.label}
-              item={item}
-              onRequestClose={onRequestClose}
-            />
-          ))}
-        </div>
-      </DrawerContent>
-    </>
-  );
-};
+      </div>
+    </DrawerContent>
+  </>
+);

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

@@ -1,14 +1,16 @@
 import * as Collapsible from "@radix-ui/react-collapsible";
+import { deepEqual } from "fast-equals";
 import { ChevronRightIcon } from "lucide-react";
-import { useEffect, useState } from "react";
+import { memo, useEffect, useState } from "react";
 import { NavLink, useMatch } from "react-router";
+import { Button } from "zudoku/ui/Button.js";
 import type { SidebarItemCategory } from "../../../config/validators/SidebarSchema.js";
 import { cn } from "../../util/cn.js";
 import { joinPath } from "../../util/joinPath.js";
 import { navigationListItem, SidebarItem } from "./SidebarItem.js";
 import { useIsCategoryOpen } from "./utils.js";
 
-export const SidebarCategory = ({
+const SidebarCategoryInner = ({
   category,
   onRequestClose,
 }: {
@@ -35,13 +37,15 @@ export const SidebarCategory = ({
   }, [isCategoryOpen]);
 
   const ToggleButton = isCollapsible && (
-    <button
-      type="button"
+    <Button
       onClick={(e) => {
         e.preventDefault();
         setOpen((prev) => !prev);
         setHasInteracted(true);
       }}
+      variant="ghost"
+      size="icon"
+      className="size-6 hover:bg-[hsl(from_hsl(var(--accent))_h_s_calc(l-5))] hover:dark:bg-[hsl(from_hsl(var(--accent))_h_s_calc(l+5))]"
     >
       <ChevronRightIcon
         size={16}
@@ -50,7 +54,7 @@ export const SidebarCategory = ({
           "shrink-0 group-data-[state=open]:rotate-90",
         )}
       />
-    </button>
+    </Button>
   );
 
   const icon = category.icon && (
@@ -62,7 +66,7 @@ export const SidebarCategory = ({
 
   const styles = navigationListItem({
     className: [
-      "text-start font-medium",
+      "group text-start font-medium",
       isCollapsible || typeof category.link !== "undefined"
         ? "cursor-pointer"
         : "cursor-default hover:bg-transparent",
@@ -90,12 +94,7 @@ export const SidebarCategory = ({
             }}
           >
             {icon}
-            <div
-              className={cn(
-                "flex items-center gap-2 justify-between w-full",
-                isActive ? "text-primary" : "text-foreground/80",
-              )}
-            >
+            <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>
@@ -135,3 +134,7 @@ export const SidebarCategory = ({
     </Collapsible.Root>
   );
 };
+
+export const SidebarCategory = memo(SidebarCategoryInner, deepEqual);
+
+SidebarCategory.displayName = "SidebarCategory";

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

@@ -1,26 +1,30 @@
 import { cva } from "class-variance-authority";
 import { ExternalLinkIcon } from "lucide-react";
-import { NavLink, useSearchParams } from "react-router";
+import { NavLink, useLocation, useSearchParams } from "react-router";
 
 import type { SidebarItem as SidebarItemType } from "../../../config/validators/SidebarSchema.js";
-import { joinPath } from "../../util/joinPath.js";
+import { joinUrl } from "../../util/joinUrl.js";
 import { AnchorLink } from "../AnchorLink.js";
 import { useViewportAnchor } from "../context/ViewportAnchorContext.js";
 import { SidebarBadge } from "./SidebarBadge.js";
 import { SidebarCategory } from "./SidebarCategory.js";
 
 export const navigationListItem = cva(
-  "flex items-center gap-2 px-[--padding-nav-item] py-1.5 rounded-lg hover:bg-accent",
+  "flex items-center gap-2 px-[--padding-nav-item] my-0.5 py-1.5 rounded-lg hover:bg-accent tabular-nums",
   {
     variants: {
       isActive: {
-        true: "text-primary font-medium",
+        true: "bg-accent font-medium",
         false: "text-foreground/80",
       },
       isMuted: {
         true: "text-foreground/30",
         false: "",
       },
+      isPending: {
+        true: "bg-accent animate-pulse",
+        false: "",
+      },
     },
     defaultVariants: {
       isActive: false,
@@ -37,6 +41,7 @@ export const SidebarItem = ({
   item: SidebarItemType;
   onRequestClose?: () => void;
 }) => {
+  const location = useLocation();
   const { activeAnchor } = useViewportAnchor();
   const [searchParams] = useSearchParams();
 
@@ -48,8 +53,10 @@ export const SidebarItem = ({
     case "doc":
       return (
         <NavLink
-          className={({ isActive }) => navigationListItem({ isActive })}
-          to={joinPath(item.id)}
+          className={({ isActive, isPending }) =>
+            navigationListItem({ isActive, isPending })
+          }
+          to={joinUrl(item.id)}
           onClick={onRequestClose}
           end
         >
@@ -67,12 +74,16 @@ export const SidebarItem = ({
         </NavLink>
       );
     case "link":
-      return item.href.startsWith("#") ? (
+      return !item.href.startsWith("http") ? (
         <AnchorLink
-          to={{ hash: item.href, search: searchParams.toString() }}
-          {...{ [DATA_ANCHOR_ATTR]: item.href.slice(1) }}
+          to={{
+            pathname: item.href.split("#")[0],
+            hash: item.href.split("#")[1],
+            search: searchParams.toString(),
+          }}
+          {...{ [DATA_ANCHOR_ATTR]: item.href.split("#")[1] }}
           className={navigationListItem({
-            isActive: item.href.slice(1) === activeAnchor,
+            isActive: item.href === [location.pathname, activeAnchor].join("#"),
             className: item.badge?.placement !== "start" && "justify-between",
           })}
           onClick={onRequestClose}
@@ -88,25 +99,6 @@ export const SidebarItem = ({
             <span className="break-all">{item.label}</span>
           )}
         </AnchorLink>
-      ) : !item.href.startsWith("http") ? (
-        <NavLink
-          className={navigationListItem({
-            isActive: item.href.split("#")[1] === activeAnchor,
-            className: item.badge?.placement !== "start" && "justify-between",
-          })}
-          to={item.href}
-        >
-          {item.badge ? (
-            <>
-              <span className="truncate" title={item.label}>
-                {item.label}
-              </span>
-              <SidebarBadge {...item.badge} />
-            </>
-          ) : (
-            <span className="break-all">{item.label}</span>
-          )}
-        </NavLink>
       ) : (
         <a
           className={navigationListItem()}

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

@@ -1,27 +1,46 @@
-import { forwardRef, type PropsWithChildren } from "react";
+import { useEffect, useRef, type PropsWithChildren } 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 SidebarWrapper = forwardRef<
-  HTMLDivElement,
-  PropsWithChildren<{ pushMainContent?: boolean; className?: string }>
->(({ children, className, pushMainContent }, ref) => (
-  <nav
-    // this data attribute is used in `Layout.tsx` to determine if side navigation
-    // is present for the current page so the main content is pushed to the right
-    // it's also important to set `peer` class here.
-    // maybe this could be simplified by adjusting the layout
-    data-navigation={String(pushMainContent)}
-    className={cn(
-      "scrollbar peer hidden lg:flex flex-col fixed text-sm overflow-y-auto shrink-0 border-r pr-6",
-      "-mx-[--padding-nav-item] pb-20 pt-[--padding-content-top]",
-      "w-[--side-nav-width] h-[calc(100%-var(--header-height))] scroll-pt-2 gap-2",
-      !pushMainContent && "border-r-0",
-      className,
-    )}
-    ref={ref}
-  >
-    {children}
-  </nav>
-));
+export const SidebarWrapper = ({
+  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">
+      <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-3 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.page?.showPoweredBy !== false && <PoweredByZudoku />}
+      </div>
+    </div>
+  );
+};
 
 SidebarWrapper.displayName = "SidebarWrapper";