Docs: rename sidebar tabs to layout tabs

Author: fuma-nama

apps/docs/content/docs/(framework)/index.mdx

@@ -145,7 +145,7 @@ export const source = loader({
   </Accordion>
 
     <Accordion id='multi-docs' title="How to implement multi-docs?">
-        We recommend to use [Sidebar Tabs](/docs/ui/layouts/docs#sidebar-tabs).
+        We recommend using [Layout Tabs](/docs/ui/layouts/docs#layout-tabs).
     </Accordion>
 
 </Accordions>

apps/docs/content/docs/(framework)/navigation.mdx

@@ -53,8 +53,8 @@ For example:
 </Files>
 
 <Callout title="Good to Know">
-  When grouping with folders, you can display them as tabs [using Sidebar
-  Tabs](/docs/ui/layouts/docs#sidebar-tabs).
+  When grouping with folders, you can display them as tabs [using Layout
+  Tabs](/docs/ui/layouts/docs#layout-tabs).
 </Callout>
 
 ### Full Versioning

apps/docs/content/docs/headless/page-conventions.mdx

@@ -100,7 +100,7 @@ For example, when you are opening root folder `framework`, the other folders (e.
 
 <Callout title='Fumadocs UI'>
 
-Fumadocs UI renders root folders as [Sidebar Tabs](/docs/ui/layouts/docs#sidebar-tabs), which allows user to switch between them.
+Fumadocs UI renders root folders as [Layout Tabs](/docs/ui/layouts/docs#layout-tabs), which allows users to switch between them.
 
 </Callout>
 

apps/docs/content/docs/ui/layouts/docs.mdx

@@ -52,7 +52,7 @@ import { DocsLayout } from 'fumadocs-ui/layouts/docs';
 
 Customise sidebar navigation links.
 
-<div className='flex justify-center items-center *:max-w-[200px] bg-gradient-to-br from-fd-primary/10 rounded-xl border'>
+<div className='flex justify-center items-center *:max-w-[200px] bg-linear-to-br from-fd-primary/10 rounded-xl border'>
 
     ![Sidebar](/docs/sidebar.png)
 
@@ -100,13 +100,13 @@ export default function Layout({ children }: { children: ReactNode }) {
 }
 ```
 
-### Sidebar Tabs (Dropdown) [#sidebar-tabs]
+### Layout Tabs (Dropdown) [#layout-tabs]
 
-Sidebar Tabs are folders with tab-like behaviours, only the content of opened tab will be visible.
+Layout Tabs are folders with tab-like behaviours, only the content of opened tab will be visible.
 
 <div className='flex justify-center items-center *:max-w-[360px] bg-linear-to-br from-fd-primary/10 rounded-xl border'>
 
-    ![Sidebar Tabs](/docs/sidebar-tabs.png)
+    ![Layout Tabs](/docs/sidebar-tabs.png)
 
 </div>
 
@@ -128,19 +128,17 @@ Or specify them explicitly:
 import { DocsLayout } from 'fumadocs-ui/layouts/docs';
 
 <DocsLayout
-  sidebar={{
-    tabs: [
-      {
-        title: 'Components',
-        description: 'Hello World!',
-        // active for `/docs/components` and sub routes like `/docs/components/button`
-        url: '/docs/components',
-
-        // optionally, you can specify a set of urls which activates the item
-        // urls: new Set(['/docs/test', '/docs/components']),
-      },
-    ],
-  }}
+  tabs={[
+    {
+      title: 'Components',
+      description: 'Hello World!',
+      // active for `/docs/components` and sub routes like `/docs/components/button`
+      url: '/docs/components',
+
+      // optionally, you can specify a set of urls which activates the item
+      // urls: new Set(['/docs/test', '/docs/components']),
+    },
+  ]}
 />;
 ```
 
@@ -149,7 +147,7 @@ Set it to `false` to disable:
 ```tsx
 import { DocsLayout } from 'fumadocs-ui/layouts/docs';
 
-<DocsLayout sidebar={{ tabs: false }} />;
+<DocsLayout tabs={false} />;
 ```
 
 <Callout title="Want further customisations?">
@@ -182,19 +180,17 @@ export default function Layout({ children }: { children: ReactNode }) {
 
 #### Decoration
 
-Change the icon/styles of tabs.
+Change the icon/styles of layout tabs.
 
 ```tsx
 import { DocsLayout } from 'fumadocs-ui/layouts/docs';
 
 <DocsLayout
-  sidebar={{
-    tabs: {
-      transform: (option, node) => ({
-        ...option,
-        icon: <MyIcon />,
-      }),
-    },
+  tabs={{
+    transform: (option, node) => ({
+      ...option,
+      icon: <MyIcon />,
+    }),
   }}
 />;
 ```

apps/docs/content/docs/ui/layouts/notebook.mdx

@@ -44,7 +44,7 @@ The options are inherited from [Docs Layout](/docs/ui/layouts/docs), with minor
 
 ### Tab Mode
 
-Configure the style of [Layout Tabs](/docs/ui/layouts/docs#sidebar-tabs).
+Configure the style of [Layout Tabs](/docs/ui/layouts/docs#layout-tabs).
 
 ![Notebook](/docs/notebook-tab-mode.png)
 

packages/base-ui/registry/index.ts

@@ -39,16 +39,6 @@ export const registry: Registry = {
           path: 'components/sidebar/link-item.tsx',
           target: '<dir>/layout/sidebar/link-item.tsx',
         },
-        {
-          type: 'components',
-          path: 'components/sidebar/tabs/index.tsx',
-          target: '<dir>/layout/sidebar/tabs/index.tsx',
-        },
-        {
-          type: 'components',
-          path: 'components/sidebar/tabs/dropdown.tsx',
-          target: '<dir>/layout/sidebar/tabs/dropdown.tsx',
-        },
       ],
     },
     {

packages/base-ui/src/components/sidebar/tabs/dropdown.tsx

@@ -4,14 +4,11 @@ import { type ComponentProps, type ReactNode, useMemo, useState } from 'react';
 import Link from 'fumadocs-core/link';
 import { usePathname } from 'fumadocs-core/framework';
 import { cn } from '@/utils/cn';
-import { normalize, isActive } from '@/utils/urls';
 import { useSidebar } from '@/components/sidebar/base';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import type { SidebarTab } from '.';
+import { isLayoutTabActive, type LayoutTab } from '@/layouts/shared';
 
-export interface SidebarTabWithProps extends SidebarTab {
-  props?: ComponentProps<'a'>;
-}
+export type SidebarTabWithProps = LayoutTab;
 
 export function SidebarTabsDropdown({
   options,
@@ -100,8 +97,4 @@ export function SidebarTabsDropdown({
   );
 }
 
-export function isTabActive(tab: SidebarTab, pathname: string) {
-  if (tab.urls) return tab.urls.has(normalize(pathname));
-
-  return isActive(tab.url, pathname, true);
-}
+export const isTabActive = isLayoutTabActive;

packages/base-ui/src/components/sidebar/tabs/index.tsx

@@ -1,22 +1,7 @@
+import type { LayoutTab } from '@/layouts/shared';
 import type * as PageTree from 'fumadocs-core/page-tree';
-import type { ReactNode } from 'react';
 
-export interface SidebarTab {
-  /**
-   * Redirect URL of the folder, usually the index page
-   */
-  url: string;
-
-  icon?: ReactNode;
-  title: ReactNode;
-  description?: ReactNode;
-
-  /**
-   * Detect from a list of urls
-   */
-  urls?: Set<string>;
-  unlisted?: boolean;
-}
+export type SidebarTab = LayoutTab;
 
 export interface GetSidebarTabsOptions {
   transform?: (option: SidebarTab, node: PageTree.Folder) => SidebarTab | null;

packages/radix-ui/registry/index.ts

@@ -39,16 +39,6 @@ export const registry: Registry = {
           path: 'components/sidebar/link-item.tsx',
           target: '<dir>/layout/sidebar/link-item.tsx',
         },
-        {
-          type: 'components',
-          path: 'components/sidebar/tabs/index.tsx',
-          target: '<dir>/layout/sidebar/tabs/index.tsx',
-        },
-        {
-          type: 'components',
-          path: 'components/sidebar/tabs/dropdown.tsx',
-          target: '<dir>/layout/sidebar/tabs/dropdown.tsx',
-        },
       ],
     },
     {