diff --git a/site/components/Layout.tsx b/site/components/Layout.tsx
index 507f45ba..300fa2a5 100644
--- a/site/components/Layout.tsx
+++ b/site/components/Layout.tsx
@@ -5,6 +5,7 @@ import Link from 'next/link';
import { useCallback, useEffect, useState } from 'react';
import Nav from './Nav';
+import { SiteToc } from '@/components/SiteToc';
function useTableOfContents(tableOfContents) {
const [currentSection, setCurrentSection] = useState(tableOfContents[0]?.id);
@@ -53,10 +54,14 @@ export default function Layout({
children,
title,
tableOfContents = [],
+ urlPath,
+ siteMap = []
}: {
children;
title?: string;
tableOfContents?;
+ urlPath?: string;
+ siteMap?: [];
}) {
// const { toc } = children.props;
const { theme, setTheme } = useTheme();
@@ -145,6 +150,12 @@ export default function Layout({
)}
+ {/* LHS NAVIGATION */}
+ {/* {showSidebar && ( */}
+
+
+
+ {/* )} */}
);
}
diff --git a/site/components/SiteToc.tsx b/site/components/SiteToc.tsx
new file mode 100644
index 00000000..9d58c3b3
--- /dev/null
+++ b/site/components/SiteToc.tsx
@@ -0,0 +1,110 @@
+import Link from "next/link.js";
+import clsx from "clsx";
+import { Disclosure, Transition } from "@headlessui/react";
+
+export interface NavItem {
+ name: string;
+ href: string;
+}
+
+export interface NavGroup {
+ name: string;
+ path: string;
+ level: number;
+ children: Array;
+}
+
+interface Props {
+ currentPath: string;
+ nav: Array;
+}
+
+function isNavGroup(item: NavItem | NavGroup): item is NavGroup {
+ return (item as NavGroup).children !== undefined;
+}
+
+function navItemBeforeNavGroup(a, b) {
+ if (isNavGroup(a) === isNavGroup(b)) {
+ return 0;
+ }
+ if (isNavGroup(a) && !isNavGroup(b)) {
+ return 1;
+ }
+ return -1;
+}
+
+function sortNavGroupChildren(items: Array) {
+ return items.sort(
+ (a, b) => navItemBeforeNavGroup(a, b) || a.name.localeCompare(b.name)
+ );
+}
+
+export const SiteToc: React.FC = ({ currentPath, nav }) => {
+ function isActiveItem(item: NavItem) {
+ return item.href === currentPath;
+ }
+
+ return (
+
+ );
+};
+
+const NavComponent: React.FC<{
+ item: NavItem | NavGroup;
+ isActive: boolean;
+}> = ({ item, isActive }) => {
+ return !isNavGroup(item) ? (
+
+ {item.name}
+
+ ) : (
+
+ {({ open }) => (
+
+
+
+ {item.name}
+
+
+
+ {/* {sortNavGroupChildren(item.children).map((subItem) => ( */}
+ {item.children.map((subItem) => (
+
+ ))}
+
+
+