Sidebar

import { Sidebar } from "fromsrc/client";

<Sidebar
  title="docs"
  navigation={navigation}
  github="https://github.com/org/repo"
/>;

const navigation = [
  {
    title: "getting started",
    items: docs.filter((d) => d.slug?.startsWith("getting-started")),
  },
];

const navigation = [
  {
    title: "components",
    items: [
      {
        type: "folder",
        title: "layout",
        items: [
          { type: "item", title: "sidebar", href: "/docs/sidebar" },
          { type: "item", title: "header", href: "/docs/header" },
        ],
      },
      {
        type: "folder",
        title: "content",
        defaultOpen: true,
        items: [
          { type: "item", title: "callout", href: "/docs/callout" },
          { type: "item", title: "steps", href: "/docs/steps" },
        ],
      },
    ],
  },
];

const navigation = [
  {
    title: "guides",
    items: [
      ...docs.filter((d) => d.slug?.startsWith("guide")),
      { type: "item", title: "external", href: "https://example.com" },
      {
        type: "folder",
        title: "advanced",
        items: [{ type: "item", title: "plugins", href: "/docs/plugins" }],
      },
    ],
  },
];

import { Book, Settings, Puzzle } from "lucide-react";

const navigation = [
  {
    title: "guides",
    items: [
      {
        type: "item",
        title: "intro",
        href: "/docs/intro",
        icon: <Book size={16} />,
      },
      {
        type: "folder",
        title: "config",
        icon: <Settings size={16} />,
        items: [
          {
            type: "item",
            title: "plugins",
            href: "/docs/plugins",
            icon: <Puzzle size={16} />,
          },
        ],
      },
    ],
  },
];

<Sidebar title="docs" navigation={navigation} collapsible />

<Sidebar navigation={navigation} defaultOpenLevel={1} />

{
  type: "folder",
  title: "api",
  href: "/docs/api",
  items: [
    { type: "item", title: "hooks", href: "/docs/api/hooks" },
    { type: "item", title: "content", href: "/docs/api/content" },
  ]
}

interface SidebarItem {
  type: "item";
  title: string;
  href: string;
  icon?: ReactNode;
}

interface SidebarFolder {
  type: "folder";
  title: string;
  items: (SidebarItem | SidebarFolder)[];
  defaultOpen?: boolean;
  icon?: ReactNode;
  href?: string;
}

interface SidebarSection {
  title: string;
  items: (SidebarItem | SidebarFolder | DocMeta)[];
}