fumadocs-ui
Version:
The Radix UI version of Fumadocs UI
72 lines (71 loc) • 3.21 kB
JavaScript
"use client";
import { cn } from "../../../utils/cn.js";
import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.js";
import { isLayoutTabActive } from "../../../layouts/shared/index.js";
import { useSidebar } from "../base.js";
import Link from "fumadocs-core/link";
import { usePathname } from "fumadocs-core/framework";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { Check, ChevronsUpDown } from "lucide-react";
import { useMemo, useState } from "react";
//#region src/components/sidebar/tabs/dropdown.tsx
function SidebarTabsDropdown({ options, placeholder, ...props }) {
const [open, setOpen] = useState(false);
const { closeOnRedirect } = useSidebar();
const pathname = usePathname();
const selected = useMemo(() => {
return options.findLast((item) => isLayoutTabActive(item, pathname));
}, [options, pathname]);
const onClick = () => {
closeOnRedirect.current = false;
setOpen(false);
};
const item = selected ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
className: "size-9 shrink-0 empty:hidden md:size-5",
children: selected.icon
}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
className: "text-sm font-medium",
children: selected.title
}), /* @__PURE__ */ jsx("p", {
className: "text-sm text-fd-muted-foreground empty:hidden md:hidden",
children: selected.description
})] })] }) : placeholder;
return /* @__PURE__ */ jsxs(Popover, {
open,
onOpenChange: setOpen,
children: [item && /* @__PURE__ */ jsxs(PopoverTrigger, {
...props,
className: cn("flex items-center gap-2 rounded-lg p-2 border bg-fd-secondary/50 text-start text-fd-secondary-foreground transition-colors hover:bg-fd-accent data-[state=open]:bg-fd-accent data-[state=open]:text-fd-accent-foreground", props.className),
children: [item, /* @__PURE__ */ jsx(ChevronsUpDown, { className: "shrink-0 ms-auto size-4 text-fd-muted-foreground" })]
}), /* @__PURE__ */ jsx(PopoverContent, {
className: "flex flex-col gap-1 w-(--radix-popover-trigger-width) p-1 fd-scroll-container",
children: options.map((item) => {
const isActive = selected && item.url === selected.url;
if (!isActive && item.unlisted) return;
return /* @__PURE__ */ jsxs(Link, {
href: item.url,
onClick,
...item.props,
className: cn("flex items-center gap-2 rounded-lg p-1.5 hover:bg-fd-accent hover:text-fd-accent-foreground", item.props?.className),
children: [
/* @__PURE__ */ jsx("div", {
className: "shrink-0 size-9 md:mb-auto md:size-5 empty:hidden",
children: item.icon
}),
/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
className: "text-sm font-medium leading-none",
children: item.title
}), /* @__PURE__ */ jsx("p", {
className: "text-[0.8125rem] text-fd-muted-foreground mt-1 empty:hidden",
children: item.description
})] }),
/* @__PURE__ */ jsx(Check, { className: cn("shrink-0 ms-auto size-3.5 text-fd-primary", !isActive && "invisible") })
]
}, item.url);
})
})]
});
}
const isTabActive = isLayoutTabActive;
//#endregion
export { SidebarTabsDropdown, isTabActive };