zudoku 0.0.0-f90a252 → 0.0.0-f9211eb

package/src/lib/components/Layout.tsx

@@ -1,62 +1,50 @@
 import { Helmet } from "@zudoku/react-helmet-async";
-import { PanelLeftIcon } from "lucide-react";
-import { Suspense, useEffect, useRef, useState, type ReactNode } from "react";
-import { Outlet, useLocation, useNavigation } from "react-router";
-import { useSpinDelay } from "spin-delay";
-import { Drawer, DrawerTrigger } from "../ui/Drawer.js";
-import { cn } from "../util/cn.js";
+import { Suspense, useEffect, type ReactNode } from "react";
+import { Outlet, useLocation } from "react-router";
+import { joinUrl } from "../util/joinUrl.js";
 import { useScrollToAnchor } from "../util/useScrollToAnchor.js";
 import { useScrollToTop } from "../util/useScrollToTop.js";
-import { useViewportAnchor } from "./context/ViewportAnchorContext.js";
 import { useZudoku } from "./context/ZudokuContext.js";
+import { Footer } from "./Footer.js";
 import { Header } from "./Header.js";
-import { Sidebar } from "./navigation/Sidebar.js";
+import { Main } from "./Main.js";
 import { Slotlet } from "./SlotletProvider.js";
 import { Spinner } from "./Spinner.js";
 
 const LoadingFallback = () => (
-  <main className="grid h-[calc(100vh-var(--header-height))] place-items-center">
+  <main className="col-span-full row-span-full grid place-items-center">
     <Spinner />
   </main>
 );
 
 export const Layout = ({ children }: { children?: ReactNode }) => {
+  const { meta, authentication, options } = useZudoku();
   const location = useLocation();
-  const { setActiveAnchor } = useViewportAnchor();
-  const { meta, authentication } = useZudoku();
 
   useScrollToAnchor();
   useScrollToTop();
 
-  const previousLocationPath = useRef(location.pathname);
-
   useEffect(() => {
     // Initialize the authentication plugin
     authentication?.onPageLoad?.();
   }, [authentication]);
 
-  useEffect(() => {
-    // always reset on location change
-    if (location.pathname !== previousLocationPath.current) {
-      setActiveAnchor("");
-    }
-    previousLocationPath.current = location.pathname;
-  }, [location.pathname, setActiveAnchor]);
-
-  // Page transition is happening: https://reactrouter.com/start/framework/pending-ui#global-pending-navigation
-  const isNavigating = Boolean(useNavigation().location);
-  const showSpinner = useSpinDelay(isNavigating, {
-    delay: 300,
-    minDuration: 500,
-  });
-  const [isDrawerOpen, setDrawerOpen] = useState(false);
-
   return (
     <>
       {import.meta.env.MODE === "standalone" && (
         <style>{`:root { --top-nav-height: 0px; }`}</style>
       )}
       <Helmet titleTemplate={meta?.title}>
+        {options.canonicalUrlOrigin && (
+          <link
+            rel="canonical"
+            href={joinUrl(
+              options.canonicalUrlOrigin,
+              options.basePath,
+              location.pathname,
+            )}
+          />
+        )}
         {meta?.description && (
           <meta name="description" content={meta.description} />
         )}
@@ -66,45 +54,12 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
       <Header />
       <Slotlet name="layout-after-head" />
 
-      <div className="w-full max-w-screen-2xl mx-auto px-4 lg:px-12 border-l border-r">
-        {showSpinner ? (
-          <LoadingFallback />
-        ) : (
-          <Suspense fallback={<LoadingFallback />}>
-            <Drawer
-              direction="left"
-              open={isDrawerOpen}
-              onOpenChange={(open) => setDrawerOpen(open)}
-            >
-              <Sidebar onRequestClose={() => setDrawerOpen(false)} />
-              <div
-                className={cn(
-                  "lg:hidden -mx-10 px-10 py-2 sticky bg-background/80 backdrop-blur z-10 top-0 left-0 right-0 border-b",
-                  "peer-data-[navigation=false]:hidden",
-                )}
-              >
-                <DrawerTrigger className="flex items-center gap-2">
-                  <PanelLeftIcon size={16} strokeWidth={1.5} />
-                  <span className="text-sm">Menu</span>
-                </DrawerTrigger>
-              </div>
-              <main
-                className={cn(
-                  "h-full dark:border-white/10 translate-x-0",
-                  "lg:overflow-visible",
-                  // This works in tandem with the `SidebarWrapper` component
-                  "lg:peer-data-[navigation=true]:w-[calc(100%-var(--side-nav-width))]",
-                  "lg:peer-data-[navigation=true]:translate-x-[--side-nav-width] lg:peer-data-[navigation=true]:pl-12",
-                )}
-              >
-                <Slotlet name="zudoku-before-content" />
-                {children ?? <Outlet />}
-                <Slotlet name="zudoku-after-content" />
-              </main>
-            </Drawer>
-          </Suspense>
-        )}
+      <div className="grid grid-cols-1 grid-rows-[0_min-content_1fr] lg:grid-rows-[min-content_1fr] lg:grid-cols-[var(--side-nav-width)_1fr] max-w-screen-2xl w-full lg:mx-auto">
+        <Suspense fallback={<LoadingFallback />}>
+          <Main>{children ?? <Outlet />}</Main>
+        </Suspense>
       </div>
+      <Footer />
     </>
   );
 };

package/src/lib/components/Main.tsx

@@ -0,0 +1,50 @@
+import { PanelLeftIcon } from "lucide-react";
+import { type PropsWithChildren, useState } from "react";
+import { useNavigation } from "react-router";
+import { Drawer, DrawerTrigger } from "zudoku/ui/Drawer.js";
+import { cn } from "../util/cn.js";
+import { useCurrentNavigation } from "./context/ZudokuContext.js";
+import { Sidebar } from "./navigation/Sidebar.js";
+import { Slotlet } from "./SlotletProvider.js";
+
+export const Main = ({ children }: PropsWithChildren) => {
+  const [isDrawerOpen, setDrawerOpen] = useState(false);
+  const { sidebar } = useCurrentNavigation();
+  const hasSidebar = sidebar.length > 0;
+  const isNavigating = useNavigation().state === "loading";
+
+  return (
+    <Drawer
+      direction="left"
+      open={isDrawerOpen}
+      onOpenChange={(open) => setDrawerOpen(open)}
+    >
+      {hasSidebar && (
+        <Sidebar
+          onRequestClose={() => setDrawerOpen(false)}
+          sidebar={sidebar}
+        />
+      )}
+      {hasSidebar && (
+        <div className="lg:hidden -mx-4 px-4 py-2 sticky bg-background/80 backdrop-blur z-10 top-0 left-0 right-0 border-b">
+          <DrawerTrigger className="flex items-center gap-2 px-4">
+            <PanelLeftIcon size={16} strokeWidth={1.5} />
+            <span className="text-sm">Menu</span>
+          </DrawerTrigger>
+        </div>
+      )}
+      <main
+        data-pagefind-body
+        className={cn(
+          "px-4 lg:pe-8 lg:px-8",
+          !hasSidebar && "col-span-full",
+          isNavigating && "animate-pulse",
+        )}
+      >
+        <Slotlet name="zudoku-before-content" />
+        {children}
+        <Slotlet name="zudoku-after-content" />
+      </main>
+    </Drawer>
+  );
+};

package/src/lib/components/MobileTopNavigation.tsx

@@ -9,12 +9,13 @@ import {
   DrawerTrigger,
 } from "../ui/Drawer.js";
 import { useZudoku } from "./context/ZudokuContext.js";
+import { PoweredByZudoku } from "./navigation/PoweredByZudoku.js";
 import { Search } from "./Search.js";
 import { ThemeSwitch } from "./ThemeSwitch.js";
-import { isHiddenItem, TopNavItem } from "./TopNavigation.js";
+import { isHiddenItem, PageProgress, TopNavItem } from "./TopNavigation.js";
 
 export const MobileTopNavigation = () => {
-  const { topNavigation } = useZudoku();
+  const { topNavigation, options } = useZudoku();
   const { isAuthenticated } = useAuth();
   const [drawerOpen, setDrawerOpen] = useState(false);
 
@@ -28,28 +29,36 @@ export const MobileTopNavigation = () => {
         <DrawerTrigger className="lg:hidden">
           <MenuIcon size={22} />
         </DrawerTrigger>
+        <PageProgress />
       </div>
       <DrawerContent
         className="lg:hidden h-[100dvh] right-0 left-auto w-[320px] rounded-none"
         aria-describedby={undefined}
       >
-        <div className="p-4 overflow-y-auto overscroll-none">
-          <VisuallyHidden>
-            <DrawerTitle>Navigation</DrawerTitle>
-          </VisuallyHidden>
-          <Search className="flex p-4" />
-          <ul className="flex flex-col items-center gap-4 p-4">
-            <li>
-              <ThemeSwitch />
-            </li>
-            {topNavigation.filter(isHiddenItem(isAuthenticated)).map((item) => (
-              <li key={item.label}>
-                <button onClick={() => setDrawerOpen(false)}>
-                  <TopNavItem {...item} />
-                </button>
+        <div className="p-4 overflow-y-auto overscroll-none h-full flex flex-col justify-between">
+          <div>
+            <VisuallyHidden>
+              <DrawerTitle>Navigation</DrawerTitle>
+            </VisuallyHidden>
+            <Search className="flex p-4" />
+            <ul className="flex flex-col items-center gap-4 p-4">
+              <li>
+                <ThemeSwitch />
               </li>
-            ))}
-          </ul>
+              {topNavigation
+                .filter(isHiddenItem(isAuthenticated))
+                .map((item) => (
+                  <li key={item.label}>
+                    <button type="button" onClick={() => setDrawerOpen(false)}>
+                      <TopNavItem {...item} />
+                    </button>
+                  </li>
+                ))}
+            </ul>
+          </div>
+          {options.page?.showPoweredBy !== false && (
+            <PoweredByZudoku className="flex-grow-0 justify-center gap-1" />
+          )}
         </div>
       </DrawerContent>
     </Drawer>

package/src/lib/components/Pagination.tsx

@@ -0,0 +1,50 @@
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+import { Link } from "react-router";
+import { cn } from "../util/cn.js";
+import { Button } from "./index.js";
+
+export const Pagination = ({
+  prev,
+  next,
+  className,
+}: {
+  prev: { to: string; label: string } | undefined;
+  next: { to: string; label: string } | undefined;
+  className?: string;
+}) => {
+  const linkClass =
+    "group transition-all p-5 space-x-1 transition-all hover:text-foreground";
+
+  return (
+    <div
+      className={cn(
+        "flex -mx-4 text-muted-foreground font-semibold",
+        prev ? "justify-between" : "justify-end",
+        className,
+      )}
+    >
+      {prev && (
+        <Button variant="ghost" asChild>
+          <Link to={prev.to} relative="path" className={linkClass}>
+            <ArrowLeftIcon
+              className="group-hover:motion-safe:animate-bounce-x-start"
+              size={12}
+            />
+            <span className="truncate">{prev.label}</span>
+          </Link>
+        </Button>
+      )}
+      {next && (
+        <Button variant="ghost" asChild>
+          <Link to={next.to} relative="path" className={linkClass}>
+            <span className="truncate ">{next.label}</span>
+            <ArrowRightIcon
+              className="group-hover:motion-safe:animate-bounce-x-end"
+              size={12}
+            />
+          </Link>
+        </Button>
+      )}
+    </div>
+  );
+};

package/src/lib/components/ThemeSwitch.tsx

@@ -22,7 +22,7 @@ export const ThemeSwitch = () => {
         <div
           className={cn(
             "border border-transparent rounded-full p-0.5 [&>svg>circle]:transition-colors [&>svg>path]:transition-transform transition-all [&>svg>path]:duration-200 [&>svg>circle]:duration-500 [&>svg>circle]:fill-transparent",
-            resolvedTheme === "light" && "border-border bg-muted/50",
+            resolvedTheme === "light" && "border-border bg-muted",
             resolvedTheme === "dark" &&
               "group-hover:[&>svg>path]:scale-110 group-hover:[&>svg>path]:-translate-x-[1px] group-hover:[&>svg>path]:-translate-y-[1px] group-hover:rotate-[15deg] ",
           )}

package/src/lib/components/TopNavigation.tsx

@@ -1,16 +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) ||
@@ -19,26 +21,56 @@ 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>
-      <nav className="hidden lg:block text-sm px-12 h-[--top-nav-height]">
-        <ul className="flex flex-row items-center gap-8">
-          {topNavigation.filter(isHiddenItem(isAuthenticated)).map((item) => (
-            <li key={item.id}>
-              <TopNavItem {...item} />
-            </li>
-          ))}
-        </ul>
-      </nav>
+      <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">
+            {filteredItems.map((item) => (
+              <li key={item.id}>
+                <TopNavItem {...item} />
+              </li>
+            ))}
+          </ul>
+        </nav>
+        <Slotlet name="top-navigation-side" />
+      </div>
+      <PageProgress />
     </Suspense>
   );
 };
@@ -62,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,8 +1,8 @@
 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 {
-  Fragment,
   memo,
   type PropsWithChildren,
   useContext,
@@ -11,9 +11,12 @@ 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, ZudokuContextOptions } from "../core/ZudokuContext.js";
+import {
+  ZudokuContext,
+  type ZudokuContextOptions,
+} from "../core/ZudokuContext.js";
 import { TopLevelError } from "../errors/TopLevelError.js";
 import { StaggeredRenderContext } from "../plugins/openapi/StaggeredRender.js";
 import { MdxComponents } from "../util/MdxComponents.js";
@@ -22,10 +25,13 @@ import {
   ComponentsProvider,
   DEFAULT_COMPONENTS,
 } from "./context/ComponentsContext.js";
+import { RouterEventsEmitter } from "./context/RouterEventsEmitter.js";
 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(
@@ -33,6 +39,7 @@ const ZudokoInner = memo(
       [props.overrides],
     );
 
+    const location = useLocation();
     const mdxComponents = useMemo(() => {
       const componentsFromPlugins = (props.plugins ?? [])
         .filter(isMdxProviderPlugin)
@@ -56,6 +63,7 @@ const ZudokoInner = memo(
       [stagger, didNavigate],
     );
     const navigation = useNavigation();
+    const queryClient = useQueryClient();
 
     useEffect(() => {
       if (didNavigate) {
@@ -64,18 +72,23 @@ 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
-      ?.filter(hasHead)
+      ?.flatMap((plugin) =>
+        hasHead(plugin) ? (plugin.getHead?.({ location }) ?? []) : [],
+      )
       // eslint-disable-next-line react/no-array-index-key
-      .map((plugin, i) => <Fragment key={i}>{plugin.getHead?.()}</Fragment>);
+      .map((entry, i) => <Helmet key={i}>{entry}</Helmet>);
 
     return (
       <>
-        <Helmet>{heads}</Helmet>
+        {heads}
         <StaggeredRenderContext.Provider value={staggeredValue}>
           <ZudokuProvider context={zudokuContext}>
+            <RouterEventsEmitter />
             <MDXProvider components={mdxComponents}>
               <ThemeProvider attribute="class" disableTransitionOnChange>
                 <ComponentsProvider value={components}>

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/RouterEventsEmitter.tsx

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from "react";
+import { useLocation, type Location } from "react-router";
+import { useZudoku } from "./ZudokuContext.js";
+
+export const RouterEventsEmitter = () => {
+  const location = useLocation();
+  const zudoku = useZudoku();
+  const previousLocation = useRef<Location | undefined>(undefined);
+
+  useEffect(() => {
+    zudoku.emitEvent("location", {
+      from: previousLocation.current,
+      to: location,
+    });
+    previousLocation.current = location;
+  }, [zudoku, location]);
+
+  return null;
+};

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/index.ts

@@ -1,5 +1,6 @@
 import { useMDXComponents as useMDXComponentsImport } from "@mdx-js/react";
 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";
@@ -46,3 +47,4 @@ export const Spinner = /*@__PURE__*/ SpinnerImport;
 export const ClientOnly = /*@__PURE__*/ ClientOnlyImport;
 export const Button = /*@__PURE__*/ ButtonImport;
 export const Link = /*@__PURE__*/ LinkImport;
+export const useTheme = /*@__PURE__*/ useThemeImport;