chore(docs): fix list and tree links

mlaursen · Apr 22, 2024 · 53c44d2 · 53c44d2
1 parent cb2585c
commit 53c44d2
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 33 deletions.
diff --git a/apps/docs/src/app/(layout-examples)/layout-example/[layout]/ExampleCoreNavigation.tsx b/apps/docs/src/app/(layout-examples)/layout-example/[layout]/ExampleCoreNavigation.tsx
@@ -14,6 +14,8 @@ import { NavigationTypeIcon } from "./NavigationTypeIcon.jsx";
 import { LAYOUT_TYPES, type LayoutType } from "./layouts.js";
 import { NAVIGATION_TYPES } from "./navTypes.js";
 
+const navTypeParam = "?navType=core";
+
 export interface ExampleCoreNavigationProps {
   layout: LayoutType;
 }
@@ -23,7 +25,6 @@ export function ExampleCoreNavigation(
 ): ReactElement {
   const { layout } = props;
 
-  const navTypeParam = "?navType=core";
   const pathname = usePathname();
   const items = useMemo<readonly NavigationItem[]>(
     () => [

diff --git a/apps/docs/src/app/(layout-examples)/layout-example/[layout]/ExampleListNavigation.tsx b/apps/docs/src/app/(layout-examples)/layout-example/[layout]/ExampleListNavigation.tsx
@@ -15,7 +15,8 @@ import { NavigationTypeIcon } from "./NavigationTypeIcon.jsx";
 import { SimpleNavItem } from "./SimpleNavItem.js";
 import { LAYOUT_TYPES, type LayoutType } from "./layouts.js";
 import { NAVIGATION_TYPES } from "./navTypes.js";
-import { useNavType } from "./useNavType.js";
+
+const navTypeParam = `?navType=list`;
 
 export interface ExampleListNavigationProps {
   layout: LayoutType;
@@ -25,25 +26,25 @@ export function ExampleListNavigation(
   props: ExampleListNavigationProps
 ): ReactElement {
   const { layout } = props;
+
   const pathname = usePathname();
-  const currentNavType = useNavType();
 
   return (
     <List className={cssUtils({ textOverflow: "ellipsis" })}>
       <SimpleNavItem
-        href={`/layout-example/${layout}`}
+        href={`/layout-example/${layout}${navTypeParam}`}
         leftAddon={<HomeIcon />}
       >
         Home
       </SimpleNavItem>
       <SimpleNavItem
-        href={`/layout-example/${layout}/page-1`}
+        href={`/layout-example/${layout}/page-1${navTypeParam}`}
         leftAddon={<StarIcon />}
       >
         Page 1
       </SimpleNavItem>
       <SimpleNavItem
-        href={`/layout-example/${layout}/page-2`}
+        href={`/layout-example/${layout}/page-2${navTypeParam}`}
         leftAddon={<FavoriteIcon />}
       >
         Page 2
@@ -54,7 +55,7 @@ export function ExampleListNavigation(
         <SimpleNavItem
           key={layoutType}
           active={layout === layoutType}
-          href={`/layout-example/${layoutType}`}
+          href={`/layout-example/${layoutType}${navTypeParam}`}
           leftAddon={<LayoutIcon layout={layoutType} />}
         >
           {pascalCase(layoutType, " ")}
@@ -66,7 +67,7 @@ export function ExampleListNavigation(
         <SimpleNavItem
           key={navType}
           href={`${pathname}?navType=${navType}`}
-          active={navType === currentNavType}
+          active={navType === "list"}
           leftAddon={<NavigationTypeIcon navType={navType} />}
         >
           {pascalCase(navType, " ")}

diff --git a/apps/docs/src/app/(layout-examples)/layout-example/[layout]/ExampleNavigation.tsx b/apps/docs/src/app/(layout-examples)/layout-example/[layout]/ExampleNavigation.tsx
@@ -1,10 +1,17 @@
 "use client";
+import { useSearchParams } from "next/navigation.js";
 import { type ComponentType, type ReactElement } from "react";
 import { ExampleCoreNavigation } from "./ExampleCoreNavigation.jsx";
 import { ExampleListNavigation } from "./ExampleListNavigation.jsx";
 import { ExampleTreeNavigation } from "./ExampleTreeNavigation.jsx";
 import { type LayoutType } from "./layouts.js";
-import { useNavType } from "./useNavType.js";
+import { type NavigationType } from "./navTypes.js";
+
+function getNavType(navType: string | null): NavigationType {
+  return navType === "core" || navType === "list" || navType === "tree"
+    ? navType
+    : "core";
+}
 
 export interface ExampleNavigationProps {
   layout: LayoutType;
@@ -13,7 +20,8 @@ export interface ExampleNavigationProps {
 export function ExampleNavigation(props: ExampleNavigationProps): ReactElement {
   const { layout } = props;
 
-  const navType = useNavType();
+  const searchParams = useSearchParams();
+  const navType = getNavType(searchParams.get("navType"));
 
   let Navigation: ComponentType<ExampleNavigationProps>;
   switch (navType) {

diff --git a/apps/docs/src/app/(layout-examples)/layout-example/[layout]/ExampleTreeNavigation.tsx b/apps/docs/src/app/(layout-examples)/layout-example/[layout]/ExampleTreeNavigation.tsx
@@ -4,18 +4,19 @@ import { pascalCase } from "@/utils/strings.js";
 import { useLayoutTree } from "@react-md/core/layout/useLayoutTree";
 import { Tree } from "@react-md/core/tree/Tree";
 import { type TreeData } from "@react-md/core/tree/types";
+import ExitToAppIcon from "@react-md/material-icons/ExitToAppIcon";
 import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
 import HomeIcon from "@react-md/material-icons/HomeIcon";
 import StarIcon from "@react-md/material-icons/StarIcon";
 import { cnb } from "cnbuilder";
 import { usePathname } from "next/navigation.js";
 import { useMemo, type ReactElement } from "react";
-import { LAYOUT_TYPES, type LayoutType } from "./layouts.js";
-import { NAVIGATION_TYPES } from "./navTypes.js";
-import { useNavType } from "./useNavType.js";
-import ExitToAppIcon from "@react-md/material-icons/ExitToAppIcon";
 import { LayoutIcon } from "./LayoutIcon.jsx";
 import { NavigationTypeIcon } from "./NavigationTypeIcon.jsx";
+import { LAYOUT_TYPES, type LayoutType } from "./layouts.js";
+import { NAVIGATION_TYPES } from "./navTypes.js";
+
+const navTypeParam = `?navType=tree`;
 
 export interface ExampleTreeNavigationProps {
   layout: LayoutType;
@@ -26,7 +27,6 @@ export function ExampleTreeNavigation(
 ): ReactElement {
   const { layout } = props;
 
-  const navType = useNavType();
   const pathname = usePathname();
 
   const navItems = useMemo<TreeData>(() => {
@@ -39,7 +39,7 @@ export function ExampleTreeNavigation(
       const itemId = `layouts/${layoutType}`;
       layouts[itemId] = {
         itemId,
-        href: `/layout-example/${layoutType}?navType=${navType}`,
+        href: `/layout-example/${layoutType}${navTypeParam}`,
         parentId: "layouts",
         children: pascalCase(layoutType, " "),
         leftAddon: <LayoutIcon layout={layoutType} />,
@@ -57,7 +57,7 @@ export function ExampleTreeNavigation(
         children: pascalCase(type, " "),
         leftAddon: <NavigationTypeIcon navType={type} />,
         contentClassName: cnb(
-          type === navType && "rmd-tree-item__content--selected"
+          type === "tree" && "rmd-tree-item__content--selected"
         ),
       };
     });
@@ -70,21 +70,21 @@ export function ExampleTreeNavigation(
       [homeHref]: {
         itemId: homeHref,
         parentId: "pages",
-        href: `${homeHref}?navType=${navType}`,
+        href: `${homeHref}${navTypeParam}`,
         children: "Home",
         leftAddon: <HomeIcon />,
       },
       [page1Href]: {
         itemId: page1Href,
         parentId: "pages",
-        href: `${page1Href}?navType=${navType}`,
+        href: `${page1Href}${navTypeParam}`,
         children: "Page 1",
         leftAddon: <StarIcon />,
       },
       [page2Href]: {
         itemId: page2Href,
         parentId: "pages",
-        href: `${page2Href}?navType=${navType}`,
+        href: `${page2Href}${navTypeParam}`,
         children: "Page 2",
         leftAddon: <FavoriteIcon />,
       },
@@ -108,7 +108,7 @@ export function ExampleTreeNavigation(
         leftAddon: <ExitToAppIcon />,
       },
     } satisfies TreeData;
-  }, [layout, navType]);
+  }, [layout]);
 
   const tree = useLayoutTree({
     navItems,

diff --git a/apps/docs/src/app/(layout-examples)/layout-example/[layout]/useNavType.ts b/apps/docs/src/app/(layout-examples)/layout-example/[layout]/useNavType.ts