feat(docs): adding custom sidebar&NavBar on docs

packages/docs/package.json

@@ -10,6 +10,10 @@
   },
   "dependencies": {
     "@orama/orama": "^3.1.11",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-presence": "^1.1.5",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "class-variance-authority": "^0.7.1",
     "fumadocs-core": "15.5.4",
     "fumadocs-mdx": "11.6.9",
     "fumadocs-ui": "15.5.4",
@@ -20,7 +24,8 @@
     "react": "catalog:",
     "remark": "^15.0.1",
     "remark-gfm": "^4.0.1",
-    "remark-mdx": "^3.1.0"
+    "remark-mdx": "^3.1.0",
+    "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.0.6",

packages/docs/src/app/(docs)/layout.tsx

@@ -1,11 +1,30 @@
-import { DocsLayout } from 'fumadocs-ui/layouts/docs';
-import type { ReactNode } from 'react';
-import { baseOptions } from '@/app/layout.config';
-import { source } from '@/lib/source';
+import { baseOptions } from "@/app/layout.config";
+import { Navbar } from "@/components/navbar";
+import { Sidebar } from "@/components/sidebar";
+import { source } from "@/lib/source";
+import { DocsLayout } from "fumadocs-ui/layouts/docs";
+import type { ReactNode } from "react";
+import "./responsive-layout.css";
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
-    <DocsLayout tree={source.pageTree} {...baseOptions}  sidebar={{ prefetch: false }}
+    <DocsLayout
+      tree={source.pageTree}
+      {...baseOptions}
+      nav={{
+        ...baseOptions.nav,
+        component: <Navbar baseOptions={baseOptions} />,
+      }}
+      sidebar={{
+        prefetch: false,
+        component: (
+          <Sidebar
+            tree={source.pageTree}
+            collapsible={true}
+            baseOptions={baseOptions}
+          />
+        ),
+      }}
     >
       {children}
     </DocsLayout>

packages/docs/src/app/(docs)/responsive-layout.css

@@ -0,0 +1,16 @@
+/* Custom responsive layout overrides for 1280px breakpoint */
+
+/* Set sidebar width for md, lg and xl breakpoints (768px+) */
+@media (min-width: 768px) {
+  #nd-docs-layout {
+    --fd-sidebar-width: 268px !important;
+  }
+}
+
+
+/* Adjust TOC position for custom navbar - only for mobile (below md breakpoint) */
+@media (max-width: 767px) {
+  #nd-tocnav {
+    top: calc(var(--fd-banner-height) + var(--fd-nav-height) + 3.5rem) !important;
+  }
+}

packages/docs/src/app/layout.config.tsx

@@ -1,8 +1,8 @@
-import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared";
-import logo from "../../public/logo512.png";
+import type { ExtendedBaseLayoutProps } from "@/components/sidebar";
 import ExportedImage from "next-image-export-optimizer";
+import logo from "../../public/logo512.png";
 
-const basePath = process.env.__NEXT_ROUTER_BASEPATH
+const basePath = process.env.__NEXT_ROUTER_BASEPATH;
 
 /**
  * Shared layout configurations
@@ -11,19 +11,28 @@ const basePath = process.env.__NEXT_ROUTER_BASEPATH
  * Home Layout: app/(home)/layout.tsx
  * Docs Layout: app/docs/layout.tsx
  */
-export const baseOptions: BaseLayoutProps = {
+export const baseOptions: ExtendedBaseLayoutProps = {
   nav: {
     title: (
       <>
-        <ExportedImage src={logo} alt="Pochi Logo" width={24} height={24} basePath={basePath} />
+        <ExportedImage
+          src={logo}
+          alt="Pochi Logo"
+          width={24}
+          height={24}
+          basePath={basePath}
+        />
         Pochi Docs
       </>
     ),
-
+    transparentMode: "none",
+  },
+  github: {
+    owner: "TabbyML",
+    repo: "pochi",
   },
-  githubUrl: 'https://github.com/TabbyML/pochi',
 };
 
 export function formatTitle(title: string) {
   return `${title} - Pochi`;
-}
+}

packages/docs/src/components/GitHubButton.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useGitHubStars } from "@/hooks/useGitHubStars";
+import { Github, Star } from "lucide-react";
+
+interface GitHubButtonProps {
+  owner: string;
+  repo: string;
+  className?: string;
+}
+
+export function GitHubButton({ owner, repo, className }: GitHubButtonProps) {
+  const { stars, loading } = useGitHubStars(owner, repo);
+
+  const formatStars = (count: number): string => {
+    if (count < 1000) return count.toString();
+    if (count < 100000) {
+      const value = (count / 1000).toFixed(1);
+      return value.endsWith(".0") ? value.slice(0, -2) + "K" : value + "K";
+    }
+    if (count < 1000000) {
+      return `${Math.floor(count / 1000)}K`;
+    }
+    return count.toString();
+  };
+
+  return (
+    <a
+      href={`https://github.com/${owner}/${repo}`}
+      rel="noreferrer noopener"
+      target="_blank"
+      className={`flex items-center gap-2 rounded-lg p-2 text-fd-foreground/80 text-sm transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground ${className || ""}`}
+    >
+      <Github className="size-3.5" />
+      <span>
+        {owner}/{repo}
+      </span>
+      {!loading && stars !== null && (
+        <span className="flex items-center gap-1 text-fd-muted-foreground text-xs">
+          <Star className="size-3" />
+          {formatStars(stars)}
+        </span>
+      )}
+    </a>
+  );
+}

packages/docs/src/components/SearchButton.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { cn } from "@/utils/cn";
+import { useSearchContext } from "fumadocs-ui/contexts/search";
+import { Search } from "lucide-react";
+
+interface SearchButtonProps {
+  className?: string;
+}
+
+export function SearchButton({ className }: SearchButtonProps) {
+  const { setOpenSearch } = useSearchContext();
+
+  return (
+    <button
+      type="button"
+      data-search-full=""
+      onClick={() => setOpenSearch(true)}
+      className={cn(
+        "inline-flex items-center gap-2 rounded-lg border bg-fd-secondary/50 p-1.5 ps-2 text-fd-muted-foreground text-sm transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground max-md:hidden",
+        className,
+      )}
+    >
+      <Search className="size-4" />
+      Search
+      <div className="ms-auto inline-flex gap-0.5">
+        <kbd className="rounded-md border bg-fd-background px-1.5">⌘</kbd>
+        <kbd className="rounded-md border bg-fd-background px-1.5">K</kbd>
+      </div>
+    </button>
+  );
+}

packages/docs/src/components/SidebarFooterContent.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { ThemeToggle } from "fumadocs-ui/components/layout/theme-toggle";
+import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared";
+import { GitHubButton } from "./GitHubButton";
+
+interface ExtendedBaseLayoutProps extends Omit<BaseLayoutProps, "githubUrl"> {
+  githubUrl?: string;
+  github?: {
+    owner: string;
+    repo: string;
+    token?: string;
+  };
+}
+
+interface SidebarFooterContentProps {
+  baseOptions?: ExtendedBaseLayoutProps;
+}
+
+export function SidebarFooterContent({
+  baseOptions,
+}: SidebarFooterContentProps) {
+  return (
+    <div className="flex items-center justify-between">
+      <GitHubButton
+        owner={baseOptions?.github?.owner || "tabbyml"}
+        repo={baseOptions?.github?.repo || "pochi"}
+      />
+      {/* Theme Toggle Button */}
+      <ThemeToggle />
+    </div>
+  );
+}