UI: improve layout

.changeset/eighty-hornets-guess.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Improve layout

apps/docs/content/docs/ui/components/root-toggle.mdx

@@ -1,35 +0,0 @@
----
-title: Root Toggle
-description: Switch between page trees
-preview: rootToggle
----
-
-## Usages
-
-Add this component to your sidebar or other places you want.
-
-```tsx
-import { DocsLayout } from 'fumadocs-ui/layouts/docs';
-import { RootToggle } from 'fumadocs-ui/components/layout/root-toggle';
-
-<DocsLayout
-  sidebar={{
-    banner: (
-      <RootToggle
-        options={[
-          {
-            title: 'Folder 1',
-            description: 'Pages in folder 1',
-            url: '/path/to/page-tree-1',
-          },
-          {
-            title: 'Folder 2',
-            description: 'Pages in folder 2',
-            url: '/path/to/page-tree-2',
-          },
-        ]}
-      />
-    ),
-  }}
-/>;
-```

apps/docs/content/docs/ui/navigation/sidebar.mdx

@@ -104,8 +104,28 @@ import { DocsLayout } from 'fumadocs-ui/layouts/docs';
 ```
 
 <Callout title="Want further customisations?">
-  You can specify more props to the [Docs Layout](/docs/ui/layouts/docs)
-  component.
+
+You can specify a `banner` to the [Docs Layout](/docs/ui/layouts/docs) component.
+
+```tsx
+import { DocsLayout, type DocsLayoutProps } from 'fumadocs-ui/layouts/docs';
+import type { ReactNode } from 'react';
+import { baseOptions } from '@/app/layout.config';
+import { source } from '@/lib/source';
+
+const docsOptions: DocsLayoutProps = {
+  ...baseOptions,
+  tree: source.pageTree,
+  sidebar: {
+    banner: <div>Hello World</div>,
+  },
+};
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return <DocsLayout {...docsOptions}>{children}</DocsLayout>;
+}
+```
+
 </Callout>
 
 #### Decoration

examples/python/README.md

@@ -0,0 +1,2 @@
+1. Use `pnpm python:generate` to generate JSON file locally using Python.
+2. Use `pnpm build:docs` to generate docs

packages/ui/src/components/layout/root-toggle.tsx

@@ -61,7 +61,7 @@ export function RootToggle({
         <PopoverTrigger
           {...props}
           className={cn(
-            'flex flex-row items-center gap-2.5 rounded-lg ps-2 pe-4 py-1.5 hover:text-fd-accent-foreground',
+            'flex items-center gap-2.5 rounded-lg pe-2 hover:text-fd-accent-foreground',
             props.className,
           )}
         >

packages/ui/src/components/layout/sidebar.tsx

@@ -184,7 +184,7 @@ export function SidebarHeader(props: HTMLAttributes<HTMLDivElement>) {
   return (
     <div
       {...props}
-      className={cn('flex flex-col gap-2 px-4 empty:hidden', props.className)}
+      className={cn('flex flex-col gap-3 px-4 empty:hidden', props.className)}
     >
       {props.children}
     </div>

packages/ui/src/layouts/docs.tsx

@@ -1,22 +1,22 @@
 import type { PageTree } from 'fumadocs-core/server';
-import { type ReactNode, type HTMLAttributes, useMemo } from 'react';
+import { type HTMLAttributes, type ReactNode, useMemo } from 'react';
 import { Languages, SidebarIcon } from 'lucide-react';
 import { cn } from '@/utils/cn';
 import { buttonVariants } from '@/components/ui/button';
 import {
   CollapsibleSidebar,
   Sidebar,
+  SidebarCollapseTrigger,
   SidebarFooter,
   SidebarHeader,
-  SidebarCollapseTrigger,
-  SidebarViewport,
   SidebarPageTree,
+  SidebarViewport,
 } from '@/components/layout/sidebar';
 import { slot, slots } from '@/layouts/shared';
 import {
-  type LinkItemType,
   BaseLinkItem,
   type IconItemType,
+  type LinkItemType,
 } from '@/layouts/links';
 import { RootToggle } from '@/components/layout/root-toggle';
 import { type BaseLayoutProps, getLinks } from './shared';
@@ -42,9 +42,9 @@ import {
   type SidebarOptions,
 } from '@/layouts/docs/shared';
 import {
+  NavProvider,
   type PageStyles,
   StylesProvider,
-  NavProvider,
 } from '@/contexts/layout';
 import Link from 'fumadocs-core/link';
 
@@ -140,9 +140,7 @@ export function DocsLayout({
               }
               banner={
                 <>
-                  {tabs.length > 0 ? (
-                    <RootToggle options={tabs} className="-mx-2" />
-                  ) : null}
+                  {tabs.length > 0 ? <RootToggle options={tabs} /> : null}
                   {slots(
                     'lg',
                     searchToggle,
@@ -195,7 +193,7 @@ export function DocsLayoutSidebar({
         className={cn('md:ps-(--fd-layout-offset)', props.className)}
       >
         <SidebarHeader>
-          <div className="flex flex-row pt-1 max-md:hidden">
+          <div className="flex flex-row py-1.5 max-md:hidden">
             {nav}
             {collapsible && (
               <SidebarCollapseTrigger
@@ -204,7 +202,7 @@ export function DocsLayoutSidebar({
                     color: 'ghost',
                     size: 'icon-sm',
                   }),
-                  'ms-auto mb-auto text-fd-muted-foreground max-md:hidden',
+                  'ms-auto mb-auto -my-1.5 text-fd-muted-foreground max-md:hidden',
                 )}
               >
                 <SidebarIcon />

packages/ui/src/layouts/notebook.tsx

@@ -6,8 +6,8 @@ import {
   SidebarCollapseTrigger,
   SidebarFooter,
   SidebarHeader,
-  SidebarViewport,
   SidebarPageTree,
+  SidebarViewport,
 } from '@/components/layout/sidebar';
 import { TreeContextProvider } from '@/contexts/tree';
 import { cn } from '@/utils/cn';
@@ -36,9 +36,9 @@ import {
   SidebarLayoutTab,
 } from './notebook-client';
 import {
+  NavProvider,
   type PageStyles,
   StylesProvider,
-  NavProvider,
 } from '@/contexts/layout';
 import { type Option, RootToggle } from '@/components/layout/root-toggle';
 import Link from 'fumadocs-core/link';
@@ -154,7 +154,7 @@ export function DocsLayout({
               {nav.children}
               {sidebarBanner}
               {tabMode === 'sidebar' && tabs.length > 0 ? (
-                <RootToggle options={tabs} className="-mx-2" />
+                <RootToggle options={tabs} />
               ) : null}
             </SidebarHeader>
             <SidebarViewport>
@@ -306,7 +306,7 @@ function DocsNavbar({
             searchToggle,
             <SearchToggle hideIfDisabled className="md:hidden" />,
           )}
-          <NavbarSidebarTrigger className="md:hidden" />
+          <NavbarSidebarTrigger className="-me-1.5 md:hidden" />
           {links
             .filter((item) => item.type === 'icon')
             .map((item, i) => (