@lobehub/ui/es/base-ui/Burger/Burger.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

"use client";
import ActionIcon from "../ActionIcon/ActionIcon.mjs";
import { useTranslation } from "../../i18n/useTranslation.mjs";
import Drawer from "../Drawer/Drawer.mjs";
import List from "../List/List.mjs";
import burger_default from "../../i18n/resources/en/burger.mjs";
import { styles } from "./style.mjs";
import { memo } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import { Menu, X } from "lucide-react";
//#region src/base-ui/Burger/Burger.tsx
const withoutIcons = (items) => items.flatMap((item) => item.type === "divider" ? [] : [{
	...item,
	icon: void 0
}]);
const Burger = memo(({ activeKey, className, footer, fullscreen = false, headerHeight = 64, items, onOpenChange, onSelect, opened, size, style, variant }) => {
	const { t } = useTranslation(burger_default);
	const close = () => onOpenChange(false);
	const toggle = /* @__PURE__ */ jsx(ActionIcon, {
		"aria-expanded": opened,
		"aria-label": opened ? t("burger.close") : t("burger.open"),
		className,
		icon: opened ? X : Menu,
		size,
		style,
		variant,
		onClick: () => onOpenChange(!opened)
	});
	return /* @__PURE__ */ jsxs(Fragment$1, { children: [toggle, /* @__PURE__ */ jsxs(Drawer, {
		noHeader: true,
		classNames: { bodyContent: styles.body },
		height: fullscreen ? "100dvh" : `calc(100dvh - ${headerHeight}px)`,
		open: opened,
		placement: "top",
		styles: fullscreen ? void 0 : { popup: { insetBlockStart: headerHeight } },
		onClose: close,
		children: [
			fullscreen && /* @__PURE__ */ jsx("div", {
				className: styles.fullHeader,
				style: { height: headerHeight },
				children: /* @__PURE__ */ jsx(ActionIcon, {
					"aria-label": t("burger.close"),
					icon: X,
					size,
					onClick: close
				})
			}),
			/* @__PURE__ */ jsx(List, {
				selectable: true,
				activeKey: activeKey ?? null,
				classNames: { item: fullscreen ? styles.largeRow : styles.row },
				items: fullscreen ? withoutIcons(items) : items,
				onClick: ({ key }) => {
					onSelect?.(key);
					close();
				}
			}),
			fullscreen && footer && /* @__PURE__ */ jsx("div", {
				className: styles.footer,
				children: footer
			})
		]
	})] });
});
Burger.displayName = "Burger";
//#endregion
export { Burger as default };

//# sourceMappingURL=Burger.mjs.map