@wener/console
Version:
Base console UI toolkit
62 lines (61 loc) • 2.9 kB
JavaScript
import React from "react";
import { clsx } from "clsx";
import { Tooltip } from "../../../floating/index.js";
import { cn } from "../../../tw/cn.js";
import { HeaderContentFooterLayout, LeftContentRightLayout, OverlayScrollbar } from "../../components/index.js";
import { AutoNavLink } from "../../links/index.js";
const Layout = ({ className, top, bottom, center, children, ...props }) => {
// bp 为 md
// 小设备使用行显示
/* 48+8+1 - 外层无 padding，因为可能中间会有滚动，外层 padding 后非常窄 */ return /*#__PURE__*/ React.createElement(LeftContentRightLayout, {
className: "h-full flex-col md:flex-row",
left: /*#__PURE__*/ React.createElement(IconMenu, {
top: top,
center: center,
bottom: bottom
})
}, children);
};
const MenuBarItem = ({ item: { title, href, icon, iconActive, className, ...props }, NavLink = AutoNavLink }) => {
// NavLink 使用 useLocation 会每次 rerender
// due to overflow, tooltip not works
return /*#__PURE__*/ React.createElement(Tooltip, {
content: title,
portal: true,
placement: "right",
className: "z-50 hidden md:block"
}, href ? /*#__PURE__*/ React.createElement(NavLink, {
href: href,
className: ({ isActive }) => clsx("btn btn-square btn-ghost btn-sm h-10 w-10 p-0", isActive ? "text-base-content/90" : "opacity-70", className),
...props
}, ({ isActive }) => isActive ? iconActive || icon : icon) : /*#__PURE__*/ React.createElement("button", {
type: "button",
className: clsx("btn btn-square btn-ghost btn-sm h-10 w-10 p-0", "opacity-70", className),
...props
}, icon));
};
export const IconMenu = ({ top, bottom, children, center = children, className, ...props }) => {
return /*#__PURE__*/ React.createElement(HeaderContentFooterLayout, {
as: "aside",
className: cn("order-0 flex flex-row border-base-300", // 手机
"h-[57px] w-full border-b px-2", // 桌面
"md:h-full md:w-[57px] md:flex-col md:border-r md:px-0", //
className),
header: /*#__PURE__*/ React.createElement("div", {
className: "flex items-center justify-center gap-1 border-base-300 py-1 md:border-b"
}, top),
footer: /*#__PURE__*/ React.createElement("div", {
className: "flex items-center justify-center gap-1 border-base-300 py-1 md:border-t"
}, bottom),
...props
}, /*#__PURE__*/ React.createElement(OverlayScrollbar, {
className: "h-full w-full"
}, /*#__PURE__*/ React.createElement("div", {
className: cn(// 8px padding
"flex items-center gap-1 px-1 py-1", "flex-row", "md:flex-col")
}, center)));
};
export const LeftSideMenuBarLayout = Object.assign(Layout, {
MenuBarItem
});
//# sourceMappingURL=LeftSideMenuBarLayout.js.map