Function DocNavigation

src/components/mdx/docs-navigation.tsx:9–85

({
  content,
  title,
}: {
  content: DocTableContent;
  title?: string;
})

import { DocTableContent } from "./docs";

export function DocNavigation({
  content,
  title,
}: {
  content: DocTableContent;
  title?: string;
}) {
  "use client";

  const pathname = usePathname();

  const sideMenu = (
    <div className="flex flex-col gap-2 p-4 text-sm">
      {content.map((contentGroup) => {
        return (
          <div key={contentGroup.title}>
            {contentGroup.href ? (
              <div>
                <Link
                  href={contentGroup.href ?? ""}
                  className={pathname === contentGroup.href ? "font-bold" : ""}
                >
                  {contentGroup.title}
                </Link>
              </div>
            ) : (
              <div>{contentGroup.title}</div>
            )}

            {contentGroup.sub && (
              <ul className="my-1">
                {contentGroup.sub.map((content) => {
                  return (
                    <li
                      key={content.title}
                      className={cn(
                        "border-l border-gray-200 pl-4 py-1.5",
                        pathname === content.href ? "font-bold" : ""
                      )}
                    >
                      <Link href={content.href ?? ""}>{content.title}</Link>
                    </li>
                  );
                })}
              </ul>
            )}
          </div>
        );
      })}
    </div>
  );

  return (
    <>
      <div className="hidden md:block fixed left-0 top-0 bottom-0 w-[300px] border-r overflow-y-auto">
        <div className="p-4 border-b">
          <div className="text-sm">
            Outerbase <strong>Studio</strong>