fumadocs-ui/dist/layouts/notebook/index.js

The Radix UI version of Fumadocs UI

import { buttonVariants } from "../../components/ui/button.js";
import { tree_exports } from "../../contexts/tree.js";
import { SidebarTabsDropdown } from "../../components/sidebar/tabs/dropdown.js";
import { LayoutBody, LayoutContextProvider, LayoutHeader, LayoutHeaderTabs, NavbarLinkItem } from "./client.js";
import { LargeSearchToggle, SearchToggle } from "../shared/search-toggle.js";
import { renderTitleNav, resolveLinkItems } from "../shared/index.js";
import { LanguageToggle } from "../shared/language-toggle.js";
import { ThemeToggle } from "../shared/theme-toggle.js";
import { getSidebarTabs } from "../../components/sidebar/tabs/index.js";
import { Sidebar as Sidebar$1, SidebarCollapseTrigger, SidebarContent, SidebarDrawer, SidebarLinkItem, SidebarPageTree, SidebarTrigger, SidebarViewport } from "./sidebar.js";
import { cn } from "@fumadocs/ui/cn";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { Languages, Sidebar, X } from "lucide-react";
import { useMemo } from "react";
import { LinkItem } from "@fumadocs/ui/link-item";

//#region src/layouts/notebook/index.tsx
function DocsLayout(props) {
	const { tabMode = "sidebar", nav = {}, sidebar: { tabs: tabOptions, defaultOpenLevel, prefetch, ...sidebarProps } = {}, i18n = false, themeSwitch = {}, tree } = props;
	const navMode = nav.mode ?? "auto";
	const links = resolveLinkItems(props);
	const tabs = useMemo(() => {
		if (Array.isArray(tabOptions)) return tabOptions;
		if (typeof tabOptions === "object") return getSidebarTabs(tree, tabOptions);
		if (tabOptions !== false) return getSidebarTabs(tree);
		return [];
	}, [tabOptions, tree]);
	function sidebar() {
		const { banner, footer, components, collapsible = true, ...rest } = sidebarProps;
		const iconLinks = links.filter((item) => item.type === "icon");
		const Header = typeof banner === "function" ? banner : ({ className, ...props$1 }) => /* @__PURE__ */ jsxs("div", {
			className: cn("flex flex-col gap-3 p-4 pb-2 empty:hidden", className),
			...props$1,
			children: [props$1.children, banner]
		});
		const Footer = typeof footer === "function" ? footer : ({ className, ...props$1 }) => /* @__PURE__ */ jsxs("div", {
			className: cn("hidden flex-row text-fd-muted-foreground items-center border-t p-4 pt-2", iconLinks.length > 0 && "max-lg:flex", className),
			...props$1,
			children: [props$1.children, footer]
		});
		const viewport = /* @__PURE__ */ jsxs(SidebarViewport, { children: [links.filter((item) => item.type !== "icon").map((item, i, arr) => /* @__PURE__ */ jsx(SidebarLinkItem, {
			item,
			className: cn("lg:hidden", i === arr.length - 1 && "mb-4")
		}, i)), /* @__PURE__ */ jsx(SidebarPageTree, { ...components })] });
		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(SidebarContent, {
			...rest,
			children: [
				/* @__PURE__ */ jsxs(Header, { children: [navMode === "auto" && /* @__PURE__ */ jsxs("div", {
					className: "flex justify-between",
					children: [renderTitleNav(nav, { className: "inline-flex items-center gap-2.5 font-medium" }), collapsible && /* @__PURE__ */ jsx(SidebarCollapseTrigger, {
						className: cn(buttonVariants({
							color: "ghost",
							size: "icon-sm",
							className: "mt-px mb-auto text-fd-muted-foreground"
						})),
						children: /* @__PURE__ */ jsx(Sidebar, {})
					})]
				}), tabs.length > 0 && /* @__PURE__ */ jsx(SidebarTabsDropdown, {
					options: tabs,
					className: cn(tabMode === "navbar" && "lg:hidden")
				})] }),
				viewport,
				/* @__PURE__ */ jsx(Footer, { children: iconLinks.map((item, i) => /* @__PURE__ */ jsx(LinkItem, {
					item,
					className: cn(buttonVariants({
						size: "icon-sm",
						color: "ghost",
						className: "lg:hidden"
					})),
					"aria-label": item.label,
					children: item.icon
				}, i)) })
			]
		}), /* @__PURE__ */ jsxs(SidebarDrawer, {
			...rest,
			children: [
				/* @__PURE__ */ jsxs(Header, { children: [/* @__PURE__ */ jsx(SidebarTrigger, {
					className: cn(buttonVariants({
						size: "icon-sm",
						color: "ghost",
						className: "ms-auto text-fd-muted-foreground"
					})),
					children: /* @__PURE__ */ jsx(X, {})
				}), tabs.length > 0 && /* @__PURE__ */ jsx(SidebarTabsDropdown, { options: tabs })] }),
				viewport,
				/* @__PURE__ */ jsxs(Footer, {
					className: cn("hidden flex-row items-center justify-end", (i18n || themeSwitch.enabled !== false) && "flex", iconLinks.length > 0 && "max-lg:flex"),
					children: [
						iconLinks.map((item, i) => /* @__PURE__ */ jsx(LinkItem, {
							item,
							className: cn(buttonVariants({
								size: "icon-sm",
								color: "ghost"
							}), "text-fd-muted-foreground lg:hidden", i === iconLinks.length - 1 && "me-auto"),
							"aria-label": item.label,
							children: item.icon
						}, i)),
						i18n && /* @__PURE__ */ jsx(LanguageToggle, { children: /* @__PURE__ */ jsx(Languages, { className: "size-4.5 text-fd-muted-foreground" }) }),
						themeSwitch.enabled !== false && (themeSwitch.component ?? /* @__PURE__ */ jsx(ThemeToggle, { mode: themeSwitch.mode ?? "light-dark-system" }))
					]
				})
			]
		})] });
	}
	return /* @__PURE__ */ jsx(tree_exports.TreeContextProvider, {
		tree,
		children: /* @__PURE__ */ jsx(LayoutContextProvider, {
			navMode: nav.mode ?? "auto",
			tabMode,
			navTransparentMode: nav.transparentMode,
			children: /* @__PURE__ */ jsx(Sidebar$1, {
				defaultOpenLevel,
				prefetch,
				children: /* @__PURE__ */ jsxs(LayoutBody, {
					...props.containerProps,
					children: [
						sidebar(),
						/* @__PURE__ */ jsx(DocsNavbar, {
							...props,
							links,
							tabs
						}),
						props.children
					]
				})
			})
		})
	});
}
function DocsNavbar({ links, tabs, tabMode = "sidebar", sidebar: { collapsible: sidebarCollapsible = true } = {}, searchToggle = {}, themeSwitch = {}, nav = {}, i18n }) {
	const navMode = nav.mode ?? "auto";
	const showLayoutTabs = tabMode === "navbar" && tabs.length > 0;
	return /* @__PURE__ */ jsxs(LayoutHeader, {
		id: "nd-subnav",
		className: cn("sticky [grid-area:header] flex flex-col top-(--fd-docs-row-1) z-10 backdrop-blur-sm transition-colors data-[transparent=false]:bg-fd-background/80 layout:[--fd-header-height:--spacing(14)]", showLayoutTabs && "lg:layout:[--fd-header-height:--spacing(24)]"),
		children: [/* @__PURE__ */ jsxs("div", {
			"data-header-body": "",
			className: "flex border-b px-4 gap-2 h-14 md:px-6",
			children: [
				/* @__PURE__ */ jsxs("div", {
					className: cn("items-center", navMode === "top" && "flex flex-1", navMode === "auto" && "hidden has-data-[collapsed=true]:md:flex max-md:flex"),
					children: [
						sidebarCollapsible && navMode === "auto" && /* @__PURE__ */ jsx(SidebarCollapseTrigger, {
							className: cn(buttonVariants({
								color: "ghost",
								size: "icon-sm"
							}), "text-fd-muted-foreground data-[collapsed=false]:hidden max-md:hidden"),
							children: /* @__PURE__ */ jsx(Sidebar, {})
						}),
						renderTitleNav(nav, { className: cn("inline-flex items-center gap-2.5 font-semibold", navMode === "auto" && "md:hidden") }),
						nav.children
					]
				}),
				searchToggle.enabled !== false && (searchToggle.components?.lg ? /* @__PURE__ */ jsx("div", {
					className: cn("w-full my-auto max-md:hidden", navMode === "top" ? "rounded-xl max-w-sm" : "max-w-[240px]"),
					children: searchToggle.components.lg
				}) : /* @__PURE__ */ jsx(LargeSearchToggle, {
					hideIfDisabled: true,
					className: cn("w-full my-auto max-md:hidden", navMode === "top" ? "rounded-xl max-w-sm ps-2.5" : "max-w-[240px]")
				})),
				/* @__PURE__ */ jsxs("div", {
					className: "flex flex-1 items-center justify-end md:gap-2",
					children: [
						/* @__PURE__ */ jsx("div", {
							className: "flex items-center gap-6 empty:hidden max-lg:hidden",
							children: links.filter((item) => item.type !== "icon").map((item, i) => /* @__PURE__ */ jsx(NavbarLinkItem, { item }, i))
						}),
						links.filter((item) => item.type === "icon").map((item, i) => /* @__PURE__ */ jsx(LinkItem, {
							item,
							className: cn(buttonVariants({
								size: "icon-sm",
								color: "ghost"
							}), "text-fd-muted-foreground max-lg:hidden"),
							"aria-label": item.label,
							children: item.icon
						}, i)),
						/* @__PURE__ */ jsxs("div", {
							className: "flex items-center md:hidden",
							children: [searchToggle.enabled !== false && (searchToggle.components?.sm ?? /* @__PURE__ */ jsx(SearchToggle, {
								hideIfDisabled: true,
								className: "p-2"
							})), /* @__PURE__ */ jsx(SidebarTrigger, {
								className: cn(buttonVariants({
									color: "ghost",
									size: "icon-sm",
									className: "p-2 -me-1.5"
								})),
								children: /* @__PURE__ */ jsx(Sidebar, {})
							})]
						}),
						/* @__PURE__ */ jsxs("div", {
							className: "flex items-center gap-2 max-md:hidden",
							children: [
								i18n && /* @__PURE__ */ jsx(LanguageToggle, { children: /* @__PURE__ */ jsx(Languages, { className: "size-4.5 text-fd-muted-foreground" }) }),
								themeSwitch.enabled !== false && (themeSwitch.component ?? /* @__PURE__ */ jsx(ThemeToggle, { mode: themeSwitch.mode ?? "light-dark-system" })),
								sidebarCollapsible && navMode === "top" && /* @__PURE__ */ jsx(SidebarCollapseTrigger, {
									className: cn(buttonVariants({
										color: "secondary",
										size: "icon-sm"
									}), "text-fd-muted-foreground rounded-full -me-1.5"),
									children: /* @__PURE__ */ jsx(Sidebar, {})
								})
							]
						})
					]
				})
			]
		}), showLayoutTabs && /* @__PURE__ */ jsx(LayoutHeaderTabs, {
			"data-header-tabs": "",
			className: "overflow-x-auto border-b px-6 h-10 max-lg:hidden",
			options: tabs
		})]
	});
}

//#endregion
export { DocsLayout };
//# sourceMappingURL=index.js.map