zudoku 0.0.0-f3d517c → 0.0.0-f40ea27

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

@@ -1,11 +1,12 @@
 import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
 import { createContext, useContext } from "react";
 import { matchPath, useLocation } from "react-router";
+import { type NavigationItem } from "../../../config/validators/NavigationSchema.js";
 import { useAuth } from "../../authentication/hook.js";
 import type { ZudokuContext } from "../../core/ZudokuContext.js";
 import { joinUrl } from "../../util/joinUrl.js";
 import { CACHE_KEYS } from "../cache.js";
-import { traverseSidebar } from "../navigation/utils.js";
+import { traverseNavigation } from "../navigation/utils.js";
 
 export const ZudokuReactContext = createContext<ZudokuContext | undefined>(
   undefined,
@@ -30,8 +31,22 @@ 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 item.path;
+    default:
+      return undefined;
+  }
+};
 export const useCurrentNavigation = () => {
-  const { getPluginSidebar, sidebars, topNavigation, options } = useZudoku();
+  const { getPluginNavigation, navigation, options } = useZudoku();
   const location = useLocation();
   const auth = useAuth();
 
@@ -39,44 +54,47 @@ export const useCurrentNavigation = () => {
     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),
-    queryKey: ["plugin-sidebar", location.pathname],
+    queryFn: () => getPluginNavigation(location.pathname),
+    queryKey: ["plugin-navigation", location.pathname],
   });
 
-  const hideSidebar =
+  let topNavItem = navItem;
+  if (!navItem && data.length > 0) {
+    // Extract base paths from plugin navigation items
+    const pluginBasePaths = data.flatMap((item) => {
+      return getItemPath(item)?.split("?").at(0)?.split("#").at(0) ?? [];
+    });
+
+    // Find top-level nav item that matches any plugin base path
+    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;
+  }
+
+  const hasNavigation =
     auth.isAuthEnabled && !auth.isAuthenticated && isProtectedRoute;
 
   return {
-    sidebar: hideSidebar
+    navigation: hasNavigation
       ? []
-      : [...(currentSidebarItem ? currentSidebarItem[1] : []), ...data],
-    topNavItem: currentTopNavItem,
+      : [...(navItem?.type === "category" ? navItem.items : []), ...data],
+    topNavItem,
   };
 };

package/src/lib/components/index.ts

@@ -23,6 +23,7 @@ import { Layout as LayoutImport } from "./Layout.js";
 import { Markdown as MarkdownImport } from "./Markdown.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 Layout = /*@__PURE__*/ LayoutImport;
@@ -41,6 +42,7 @@ export const Button = /*@__PURE__*/ ButtonImport;
 export const Link = /*@__PURE__*/ LinkImport;
 export const BuildCheck = /*@__PURE__*/ BuildCheckImport;
 export const Zudoku = /*@__PURE__*/ ZudokuImport;
+export const Typography = /*@__PURE__*/ TypographyImport;
 
 /** @deprecated Import from `zudoku/hooks` instead */
 export const useMDXComponents = /*@__PURE__*/ useMDXComponentsImport;

package/src/lib/components/navigation/{Sidebar.tsx → Navigation.tsx}

@@ -1,42 +1,44 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
-import type { SidebarItem as SidebarItemType } from "../../../config/validators/SidebarSchema.js";
+import type { NavigationItem as NavigationItemType } from "../../../config/validators/NavigationSchema.js";
 import { DrawerContent, DrawerTitle } from "../../ui/Drawer.js";
 import { Slot } from "../Slot.js";
-import { SidebarItem } from "./SidebarItem.js";
-import { SidebarWrapper } from "./SidebarWrapper.js";
+import { NavigationItem } from "./NavigationItem.js";
+import { NavigationWrapper } from "./NavigationWrapper.js";
 
-export const Sidebar = ({
+export const Navigation = ({
   onRequestClose,
-  sidebar,
+  navigation,
 }: {
   onRequestClose?: () => void;
-  sidebar: SidebarItemType[];
+  navigation: NavigationItemType[];
 }) => (
   <>
-    <SidebarWrapper>
+    <NavigationWrapper>
       <Slot.Target name="navigation-before" />
-      {sidebar.map((item) => (
-        <SidebarItem
+      {navigation.map((item) => (
+        <NavigationItem
           key={
-            ("id" in item ? item.id : "") +
-            ("href" in item ? item.href : "") +
-            item.label
+            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" />
-    </SidebarWrapper>
+    </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>Sidebar</DrawerTitle>
+          <DrawerTitle>Navigation</DrawerTitle>
         </VisuallyHidden>
-        {sidebar.map((item) => (
-          <SidebarItem
+        {navigation.map((item) => (
+          <NavigationItem
             key={item.label}
             item={item}
             onRequestClose={onRequestClose}

package/src/lib/components/navigation/{SidebarBadge.tsx → NavigationBadge.tsx}

@@ -22,7 +22,7 @@ export const ColorMapInvert = {
   outline: "",
 };
 
-export const SidebarBadge = ({
+export const NavigationBadge = ({
   color,
   label,
   className,

package/src/lib/components/navigation/{SidebarCategory.tsx → NavigationCategory.tsx}

@@ -4,17 +4,17 @@ 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 { SidebarItemCategory } from "../../../config/validators/SidebarSchema.js";
+import type { NavigationCategory as NavigationCategoryType } from "../../../config/validators/NavigationSchema.js";
 import { cn } from "../../util/cn.js";
 import { joinUrl } from "../../util/joinUrl.js";
-import { SidebarItem } from "./SidebarItem.js";
+import { NavigationItem } from "./NavigationItem.js";
 import { navigationListItem, useIsCategoryOpen } from "./utils.js";
 
-const SidebarCategoryInner = ({
+const NavigationCategoryInner = ({
   category,
   onRequestClose,
 }: {
-  category: SidebarItemCategory;
+  category: NavigationCategoryType;
   onRequestClose?: () => void;
 }) => {
   const isCategoryOpen = useIsCategoryOpen(category);
@@ -27,11 +27,11 @@ const SidebarCategoryInner = ({
     !isCollapsible || !isCollapsed || isCategoryOpen,
   );
   const [open, setOpen] = useState(isDefaultOpen);
-  const isActive = useMatch(category.link?.id ?? "");
+  const isActive = useMatch(category.link?.path ?? "");
 
   useEffect(() => {
-    // this is triggered when an item from the sidebar is clicked
-    // and the sidebar, enclosing this item, is not opened
+    // this is triggered when an item from the navigation is clicked
+    // and the navigation, enclosing this item, is not opened
     if (isCategoryOpen) {
       setOpen(true);
     }
@@ -85,7 +85,7 @@ const SidebarCategoryInner = ({
         {category.link?.type === "doc" ? (
           <NavLink
             to={{
-              pathname: joinUrl(category.link.id),
+              pathname: joinUrl(category.link.path),
               search: location.search,
             }}
             className={styles}
@@ -123,11 +123,13 @@ const SidebarCategoryInner = ({
       >
         <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) => (
-            <SidebarItem
+            <NavigationItem
               key={
-                ("id" in item ? item.id : "") +
-                ("href" in item ? item.href : "") +
-                item.label
+                item.type +
+                (item.label ?? "") +
+                ("path" in item ? item.path : "") +
+                ("file" in item ? item.file : "") +
+                ("to" in item ? item.to : "")
               }
               onRequestClose={onRequestClose}
               item={item}
@@ -139,6 +141,6 @@ const SidebarCategoryInner = ({
   );
 };
 
-export const SidebarCategory = memo(SidebarCategoryInner, deepEqual);
+export const NavigationCategory = memo(NavigationCategoryInner, deepEqual);
 
-SidebarCategory.displayName = "SidebarCategory";
+NavigationCategory.displayName = "NavigationCategory";

package/src/lib/components/navigation/{SidebarItem.tsx → NavigationItem.tsx}

@@ -8,13 +8,13 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "zudoku/ui/Tooltip.js";
-import type { SidebarItem as SidebarItemType } from "../../../config/validators/SidebarSchema.js";
+import type { NavigationItem as NavigationItemType } from "../../../config/validators/NavigationSchema.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 { SidebarBadge } from "./SidebarBadge.js";
-import { SidebarCategory } from "./SidebarCategory.js";
+import { NavigationBadge } from "./NavigationBadge.js";
+import { NavigationCategory } from "./NavigationCategory.js";
 import { navigationListItem } from "./utils.js";
 
 const TruncatedLabel = ({
@@ -65,11 +65,11 @@ const TruncatedLabel = ({
 
 export const DATA_ANCHOR_ATTR = "data-anchor";
 
-export const SidebarItem = ({
+export const NavigationItem = ({
   item,
   onRequestClose,
 }: {
-  item: SidebarItemType;
+  item: NavigationItemType;
   onRequestClose?: () => void;
 }) => {
   const location = useLocation();
@@ -78,23 +78,26 @@ export const SidebarItem = ({
   switch (item.type) {
     case "category":
       return (
-        <SidebarCategory category={item} onRequestClose={onRequestClose} />
+        <NavigationCategory category={item} onRequestClose={onRequestClose} />
       );
     case "doc":
       return (
         <NavLink
+          viewTransition
           className={({ isActive, isPending }) =>
             navigationListItem({ isActive, isPending })
           }
-          to={joinUrl(item.id)}
+          to={joinUrl(item.path)}
           onClick={onRequestClose}
           end
         >
           {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
           {item.badge ? (
             <>
-              <TruncatedLabel label={item.label} className="flex-1" />
-              <SidebarBadge {...item.badge} />
+              {item.label && (
+                <TruncatedLabel label={item.label} className="flex-1" />
+              )}
+              <NavigationBadge {...item.badge} />
             </>
           ) : (
             item.label
@@ -102,24 +105,26 @@ export const SidebarItem = ({
         </NavLink>
       );
     case "link":
-      return !item.href.startsWith("http") ? (
+    case "custom-page": {
+      const href = item.type === "link" ? item.to : item.path;
+      return !href.startsWith("http") ? (
         <AnchorLink
           to={{
-            pathname: item.href.split("#")[0],
-            hash: item.href.split("#")[1],
+            pathname: href.split("#")[0],
+            hash: href.split("#")[1],
             search: location.search,
           }}
-          {...{ [DATA_ANCHOR_ATTR]: item.href.split("#")[1] }}
+          {...{ [DATA_ANCHOR_ATTR]: href.split("#")[1] }}
           className={navigationListItem({
-            isActive: item.href === [location.pathname, activeAnchor].join("#"),
+            isActive: href === [location.pathname, activeAnchor].join("#"),
           })}
           onClick={onRequestClose}
         >
           {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
           {item.badge ? (
             <>
-              <TruncatedLabel label={item.label} />
-              <SidebarBadge {...item.badge} />
+              {item.label && <TruncatedLabel label={item.label} />}
+              <NavigationBadge {...item.badge} />
             </>
           ) : (
             <span className="break-all">{item.label}</span>
@@ -128,7 +133,7 @@ export const SidebarItem = ({
       ) : (
         <a
           className={navigationListItem()}
-          href={item.href}
+          href={href}
           target="_blank"
           rel="noopener noreferrer"
           onClick={onRequestClose}
@@ -141,5 +146,6 @@ export const SidebarItem = ({
           </span>
         </a>
       );
+    }
   }
 };

package/src/lib/components/navigation/{SidebarWrapper.tsx → NavigationWrapper.tsx}

@@ -4,7 +4,7 @@ import { scrollIntoViewIfNeeded } from "../../util/scrollIntoViewIfNeeded.js";
 import { useZudoku } from "../context/ZudokuContext.js";
 import { PoweredByZudoku } from "./PoweredByZudoku.js";
 
-export const SidebarWrapper = ({
+export const NavigationWrapper = ({
   children,
   className,
 }: PropsWithChildren<{
@@ -37,10 +37,10 @@ export const SidebarWrapper = ({
       </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 />}
+        {options.site?.showPoweredBy !== false && <PoweredByZudoku />}
       </div>
     </div>
   );
 };
 
-SidebarWrapper.displayName = "SidebarWrapper";
+NavigationWrapper.displayName = "NavigationWrapper";

package/src/lib/components/navigation/utils.ts

@@ -1,38 +1,38 @@
 import { cva } from "class-variance-authority";
 import { useLocation } from "react-router";
 import type {
-  SidebarItem,
-  SidebarItemCategory,
-} from "../../../config/validators/SidebarSchema.js";
+  NavigationCategory,
+  NavigationItem,
+} from "../../../config/validators/NavigationSchema.js";
 import { joinUrl } from "../../util/joinUrl.js";
 import { useCurrentNavigation } from "../context/ZudokuContext.js";
 
 export type TraverseCallback<T> = (
-  item: SidebarItem,
-  parentCategories: SidebarItem[],
+  item: NavigationItem,
+  parentCategories: NavigationItem[],
 ) => T | void;
 
-export const traverseSidebar = <T>(
-  sidebar: SidebarItem[],
+export const traverseNavigation = <T>(
+  navigation: NavigationItem[],
   callback: TraverseCallback<T>,
 ): T | undefined => {
-  for (const item of sidebar) {
-    const result = traverseSidebarItem(item, callback);
+  for (const item of navigation) {
+    const result = traverseNavigationItem(item, callback);
     if (result !== undefined) return result;
   }
 };
 
-export const traverseSidebarItem = <T>(
-  item: SidebarItem,
+export const traverseNavigationItem = <T>(
+  item: NavigationItem,
   callback: TraverseCallback<T>,
-  parentCategories: SidebarItem[] = [],
+  parentCategories: NavigationItem[] = [],
 ): T | undefined => {
   const result = callback(item, parentCategories);
   if (result !== undefined) return result;
 
   if (item.type === "category") {
     for (const child of item.items) {
-      const childResult = traverseSidebarItem(child, callback, [
+      const childResult = traverseNavigationItem(child, callback, [
         ...parentCategories,
         item,
       ]);
@@ -43,30 +43,28 @@ export const traverseSidebarItem = <T>(
 
 export const useCurrentItem = () => {
   const location = useLocation();
-  const nav = useCurrentNavigation();
+  const { navigation } = useCurrentNavigation();
 
-  const currentSidebar = nav.sidebar;
-
-  return traverseSidebar(currentSidebar, (item) => {
-    if (item.type === "doc" && joinUrl(item.id) === location.pathname) {
+  return traverseNavigation(navigation, (item) => {
+    if (item.type === "doc" && joinUrl(item.path) === location.pathname) {
       return item;
     }
   });
 };
 
-export const useIsCategoryOpen = (category: SidebarItemCategory) => {
+export const useIsCategoryOpen = (category: NavigationCategory) => {
   const location = useLocation();
 
-  return traverseSidebarItem(category, (item) => {
+  return traverseNavigationItem(category, (item) => {
     if (item.type === "category" && item.link) {
-      const categoryLinkPath = joinUrl(item.link.id);
+      const categoryLinkPath = joinUrl(item.link.path);
       if (categoryLinkPath === location.pathname) {
         return true;
       }
     }
 
     if (item.type === "doc") {
-      const docPath = joinUrl(item.id);
+      const docPath = joinUrl(item.path);
       if (docPath === location.pathname) {
         return true;
       }
@@ -79,20 +77,19 @@ export const usePrevNext = (): {
   next?: { label: string; id: string };
 } => {
   const currentId = useLocation().pathname;
-  const nav = useCurrentNavigation();
-  const currentSidebar = nav.sidebar;
+  const { navigation } = useCurrentNavigation();
 
   let prev;
   let next;
 
   let foundCurrent = false;
 
-  traverseSidebar(currentSidebar, (item) => {
+  traverseNavigation(navigation, (item) => {
     const itemId =
       item.type === "doc"
-        ? joinUrl(item.id)
+        ? joinUrl(item.path)
         : item.type === "category" && item.link
-          ? joinUrl(item.link.id)
+          ? joinUrl(item.link.path)
           : undefined;
 
     if (!itemId) return;
@@ -137,8 +134,10 @@ export const navigationListItem = cva(
 
 export const isHiddenItem =
   (isAuthenticated?: boolean) =>
-  (item: { display?: "auth" | "anon" | "always" | "hide" }): boolean => {
+  (item: NavigationItem): boolean => {
     if (item.display === "hide") return false;
+    if (!item.label) return false;
+
     return (
       (item.display === "auth" && isAuthenticated) ||
       (item.display === "anon" && !isAuthenticated) ||

package/src/lib/core/ZudokuContext.ts

@@ -3,17 +3,14 @@ import { createNanoEvents } from "nanoevents";
 import type { ReactNode } from "react";
 import type { Location } from "react-router";
 import type { BundledTheme, HighlighterCore } from "shiki";
-import type { z } from "zod";
-import type { SidebarConfig } from "../../config/validators/SidebarSchema.js";
-import type {
-  FooterSchema,
-  TopNavigationItem,
-} from "../../config/validators/validate.js";
+import type { z } from "zod/v4";
+import type { Navigation } from "../../config/validators/NavigationSchema.js";
+import type { FooterSchema } from "../../config/validators/validate.js";
 import type { AuthenticationPlugin } from "../authentication/authentication.js";
 import { type AuthState, useAuthState } from "../authentication/state.js";
 import type { ComponentsContextType } from "../components/context/ComponentsContext.js";
 import type { SlotType } from "../components/context/SlotProvider.js";
-import { joinPath } from "../util/joinPath.js";
+import { joinUrl } from "../util/joinUrl.js";
 import type { MdxComponentsType } from "../util/MdxComponents.js";
 import { objectEntries } from "../util/objectEntries.js";
 import {
@@ -57,10 +54,10 @@ type Metadata = Partial<{
   publisher: string;
 }>;
 
-type Page = Partial<{
+type Site = Partial<{
   dir?: "ltr" | "rtl";
   showPoweredBy?: boolean;
-  pageTitle?: string;
+  title?: string;
   logo?: {
     src: {
       light: string;
@@ -81,10 +78,9 @@ export type ZudokuContextOptions = {
   basePath?: string;
   canonicalUrlOrigin?: string;
   metadata?: Metadata;
-  page?: Page;
+  site?: Site;
   authentication?: AuthenticationPlugin;
-  topNavigation?: TopNavigationItem[];
-  sidebars?: SidebarConfig;
+  navigation?: Navigation;
   plugins?: ZudokuPlugin[];
   slots?: Record<string, SlotType>;
   /**
@@ -104,10 +100,9 @@ export type ZudokuContextOptions = {
 
 export class ZudokuContext {
   public plugins: NonNullable<ZudokuContextOptions["plugins"]>;
-  public sidebars: SidebarConfig;
-  public topNavigation: NonNullable<ZudokuContextOptions["topNavigation"]>;
+  public navigation: Navigation;
   public meta: ZudokuContextOptions["metadata"];
-  public page: ZudokuContextOptions["page"];
+  public site: ZudokuContextOptions["site"];
   public readonly authentication?: ZudokuContextOptions["authentication"];
   public readonly queryClient: QueryClient;
   public readonly options: ZudokuContextOptions;
@@ -124,12 +119,11 @@ export class ZudokuContext {
     this.queryClient = queryClient;
     this.options = { ...options, protectedRoutes };
     this.plugins = options.plugins ?? [];
-    this.topNavigation = options.topNavigation ?? [];
-    this.sidebars = options.sidebars ?? {};
+    this.navigation = options.navigation ?? [];
     this.navigationPlugins = this.plugins.filter(isNavigationPlugin);
     this.authentication = this.plugins.find(isAuthenticationPlugin);
     this.meta = options.metadata;
-    this.page = options.page;
+    this.site = options.site;
     this.plugins.forEach((plugin) => {
       if (!isEventConsumerPlugin(plugin)) return;
 
@@ -178,10 +172,10 @@ export class ZudokuContext {
     return this.emitter.emit(event, ...data);
   };
 
-  getPluginSidebar = async (path: string) => {
+  getPluginNavigation = async (path: string) => {
     const navigations = await Promise.all(
       this.navigationPlugins.map((plugin) =>
-        plugin.getSidebar?.(joinPath(path), this),
+        plugin.getNavigation?.(joinUrl(path), this),
       ),
     );
 

package/src/lib/core/plugins.ts

@@ -1,7 +1,7 @@
 import type { LucideIcon } from "lucide-react";
 import type { ReactElement } from "react";
 import type { Location, RouteObject } from "react-router";
-import type { Sidebar } from "../../config/validators/SidebarSchema.js";
+import type { Navigation } from "../../config/validators/NavigationSchema.js";
 import type { AuthenticationPlugin } from "../authentication/authentication.js";
 import type { MdxComponentsType } from "../util/MdxComponents.js";
 import type {
@@ -23,7 +23,7 @@ export type { AuthenticationPlugin, RouteObject };
 
 export interface NavigationPlugin {
   getRoutes: () => RouteObject[];
-  getSidebar?: (path: string, context: ZudokuContext) => Promise<Sidebar>;
+  getNavigation?: (path: string, context: ZudokuContext) => Promise<Navigation>;
   getProtectedRoutes?: () => string[];
 }