fumadocs-ui
Version:
The Radix UI version of Fumadocs UI
179 lines (177 loc) • 7.48 kB
JavaScript
import { buttonVariants } from "../../components/ui/button.js";
import { tree_exports } from "../../contexts/tree.js";
import { SidebarCollapseTrigger, SidebarProvider, SidebarTrigger, SidebarViewport } from "../../components/sidebar/base.js";
import { SidebarTabsDropdown } from "../../components/sidebar/tabs/dropdown.js";
import { LayoutBody, LayoutContextProvider, LayoutHeader, LayoutTabs } from "./client.js";
import { LargeSearchToggle, SearchToggle } from "../shared/search-toggle.js";
import { SidebarContent, SidebarDrawer, SidebarLinkItem, SidebarPageTree } from "./sidebar.js";
import { renderTitleNav, resolveLinkItems } from "../shared/index.js";
import { LanguageToggle, LanguageToggleText } from "../shared/language-toggle.js";
import { ThemeToggle } from "../shared/theme-toggle.js";
import { getSidebarTabs } from "../../components/sidebar/tabs/index.js";
import { cn } from "@fumadocs/ui/cn";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { Languages, Sidebar } from "lucide-react";
import { useMemo } from "react";
import { LinkItem } from "@fumadocs/ui/link-item";
//#region src/layouts/docs/index.tsx
function DocsLayout({ nav: { transparentMode, ...nav } = {}, sidebar: { tabs: sidebarTabs, enabled: sidebarEnabled = true, defaultOpenLevel, prefetch, ...sidebarProps } = {}, searchToggle = {}, themeSwitch = {}, tabMode = "auto", i18n = false, children, tree, ...props }) {
const tabs = useMemo(() => {
if (Array.isArray(sidebarTabs)) return sidebarTabs;
if (typeof sidebarTabs === "object") return getSidebarTabs(tree, sidebarTabs);
if (sidebarTabs !== false) return getSidebarTabs(tree);
return [];
}, [tree, sidebarTabs]);
const links = resolveLinkItems(props);
function sidebar() {
const { footer, banner, collapsible = true, component, components, ...rest } = sidebarProps;
if (component) return component;
const iconLinks = links.filter((item) => item.type === "icon");
const viewport = /* @__PURE__ */ jsxs(SidebarViewport, { children: [links.filter((v) => v.type !== "icon").map((item, i, list) => /* @__PURE__ */ jsx(SidebarLinkItem, {
item,
className: cn(i === list.length - 1 && "mb-4")
}, i)), /* @__PURE__ */ jsx(SidebarPageTree, { ...components })] });
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(SidebarContent, {
...rest,
children: [
/* @__PURE__ */ jsxs("div", {
className: "flex flex-col gap-3 p-4 pb-2",
children: [
/* @__PURE__ */ jsxs("div", {
className: "flex",
children: [
renderTitleNav(nav, { className: "inline-flex text-[0.9375rem] items-center gap-2.5 font-medium me-auto" }),
nav.children,
collapsible && /* @__PURE__ */ jsx(SidebarCollapseTrigger, {
className: cn(buttonVariants({
color: "ghost",
size: "icon-sm",
className: "mb-auto text-fd-muted-foreground"
})),
children: /* @__PURE__ */ jsx(Sidebar, {})
})
]
}),
searchToggle.enabled !== false && (searchToggle.components?.lg ?? /* @__PURE__ */ jsx(LargeSearchToggle, { hideIfDisabled: true })),
tabs.length > 0 && tabMode === "auto" && /* @__PURE__ */ jsx(SidebarTabsDropdown, { options: tabs }),
banner
]
}),
viewport,
(i18n || iconLinks.length > 0 || themeSwitch?.enabled !== false || footer) && /* @__PURE__ */ jsxs("div", {
className: "flex flex-col border-t p-4 pt-2 empty:hidden",
children: [/* @__PURE__ */ jsxs("div", {
className: "flex text-fd-muted-foreground items-center empty:hidden",
children: [
i18n && /* @__PURE__ */ jsx(LanguageToggle, { children: /* @__PURE__ */ jsx(Languages, { className: "size-4.5" }) }),
iconLinks.map((item, i) => /* @__PURE__ */ jsx(LinkItem, {
item,
className: cn(buttonVariants({
size: "icon-sm",
color: "ghost"
})),
"aria-label": item.label,
children: item.icon
}, i)),
themeSwitch.enabled !== false && (themeSwitch.component ?? /* @__PURE__ */ jsx(ThemeToggle, {
className: "ms-auto p-0",
mode: themeSwitch.mode
}))
]
}), footer]
})
]
}), /* @__PURE__ */ jsxs(SidebarDrawer, { children: [
/* @__PURE__ */ jsxs("div", {
className: "flex flex-col gap-3 p-4 pb-2",
children: [
/* @__PURE__ */ jsxs("div", {
className: "flex text-fd-muted-foreground items-center gap-1.5",
children: [
/* @__PURE__ */ jsx("div", {
className: "flex flex-1",
children: iconLinks.map((item, i) => /* @__PURE__ */ jsx(LinkItem, {
item,
className: cn(buttonVariants({
size: "icon-sm",
color: "ghost",
className: "p-2"
})),
"aria-label": item.label,
children: item.icon
}, i))
}),
i18n && /* @__PURE__ */ jsxs(LanguageToggle, { children: [/* @__PURE__ */ jsx(Languages, { className: "size-4.5" }), /* @__PURE__ */ jsx(LanguageToggleText, {})] }),
themeSwitch.enabled !== false && (themeSwitch.component ?? /* @__PURE__ */ jsx(ThemeToggle, {
className: "p-0",
mode: themeSwitch.mode
})),
/* @__PURE__ */ jsx(SidebarTrigger, {
className: cn(buttonVariants({
color: "ghost",
size: "icon-sm",
className: "p-2"
})),
children: /* @__PURE__ */ jsx(Sidebar, {})
})
]
}),
tabs.length > 0 && /* @__PURE__ */ jsx(SidebarTabsDropdown, { options: tabs }),
banner
]
}),
viewport,
/* @__PURE__ */ jsx("div", {
className: "flex flex-col border-t p-4 pt-2 empty:hidden",
children: footer
})
] })] });
}
return /* @__PURE__ */ jsx(tree_exports.TreeContextProvider, {
tree,
children: /* @__PURE__ */ jsx(LayoutContextProvider, {
navTransparentMode: transparentMode,
children: /* @__PURE__ */ jsx(SidebarProvider, {
defaultOpenLevel,
prefetch,
children: /* @__PURE__ */ jsxs(LayoutBody, {
...props.containerProps,
children: [
nav.enabled !== false && (nav.component ?? /* @__PURE__ */ jsxs(LayoutHeader, {
id: "nd-subnav",
className: "[grid-area:header] sticky top-(--fd-docs-row-1) z-30 flex items-center ps-4 pe-2.5 border-b transition-colors backdrop-blur-sm h-(--fd-header-height) md:hidden max-md:layout:[--fd-header-height:--spacing(14)] data-[transparent=false]:bg-fd-background/80",
children: [
renderTitleNav(nav, { className: "inline-flex items-center gap-2.5 font-semibold" }),
/* @__PURE__ */ jsx("div", {
className: "flex-1",
children: nav.children
}),
searchToggle.enabled !== false && (searchToggle.components?.sm ?? /* @__PURE__ */ jsx(SearchToggle, {
className: "p-2",
hideIfDisabled: true
})),
sidebarEnabled && /* @__PURE__ */ jsx(SidebarTrigger, {
className: cn(buttonVariants({
color: "ghost",
size: "icon-sm",
className: "p-2"
})),
children: /* @__PURE__ */ jsx(Sidebar, {})
})
]
})),
sidebarEnabled && sidebar(),
tabMode === "top" && tabs.length > 0 && /* @__PURE__ */ jsx(LayoutTabs, {
options: tabs,
className: "z-10 bg-fd-background border-b px-6 pt-3 xl:px-8 max-md:hidden"
}),
children
]
})
})
})
});
}
//#endregion
export { DocsLayout };
//# sourceMappingURL=index.js.map