@ducor/react
Version:
admin template ui interface
72 lines (71 loc) • 4.58 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import MenuChildren from "./children";
import { useMenu } from "..";
import { twMerge } from "tailwind-merge";
import { ChevronRightIcon } from "@heroicons/react/24/solid";
var MenuItem = function (_a) {
var item = _a.item, depth = _a.depth;
var _b = useMenu(), activeIds = _b.activeIds, hoverIds = _b.hoverIds, setHoverIds = _b.setHoverIds, sidebar_type = _b.sidebar_type, hoverActive = _b.hoverActive, setHoverActive = _b.setHoverActive;
var hasChildren = typeof item.items === "object" && Array.isArray(item.items);
return (_jsxs("li", { children: [_jsxs("div", { "data-tip": item.label, "data-to": item.path, className: twMerge(
// Base styles
"group relative transition cursor-pointer p-2 text-sm duration-300", "flex justify-between items-center gap-3",
// Styles for root-level items (depth === 0)
depth === 0 &&
"hover:bg-blue-50 active:bg-blue-100 dark:hover:bg-gray-700/40 dark:active:bg-gray-700/50 rounded-md",
// Styles for "mini" and "compact" sidebar types
["mini", "compact"].includes(sidebar_type) &&
"flex-col items-center text-center",
// Active or hover-active styles
activeIds.includes(item.id) ||
(hoverActive && hoverIds.includes(item.id))
? twMerge(depth === 0
? "bg-blue-100"
: sidebar_type === "full" &&
"border-l border-blue-400 dark:border-gray-900", "text-blue-500")
: "text-gray-500 dark:text-gray-400 hover:text-blue-400"), onClick: function (e) {
if (hasChildren) {
e.preventDefault();
if (hoverIds.includes(item.id)) {
if (activeIds.includes(item.id)) {
setHoverIds([]);
setHoverActive(false);
}
else {
if (hoverActive) {
setHoverIds([]);
setHoverActive(false);
}
else {
setHoverIds([item.id]);
setHoverActive(true);
}
}
}
else if (activeIds.includes(item.id)) {
if (hoverActive) {
}
else {
}
setHoverActive(true);
setHoverIds([item.id]);
}
}
else {
// if (hoverIds.includes(item.id)) {
// setHoverActive(!hoverActive);
// } else if (activeIds.includes(item.id)) {
// setHoverIds([item.id]);
// } else {
// setHoverActive(true);
// setHoverIds([item.id]);
// }
}
}, children: [_jsxs("div", { className: twMerge("flex gap-2 items-center", sidebar_type === "compact" && "flex-col"), children: [item.icon && depth === 0 && (_jsx("span", { className: twMerge(["mini", "compact"].includes(sidebar_type)
? "text-2xl"
: "text-base", "hover:text-blue-400 active:text-blue-400", !hoverActive && activeIds.includes(item.id) && "text-blue-500"), children: item.icon })), (sidebar_type !== "mini" || depth !== 0) && item.label] }), hasChildren && sidebar_type === "full" ? (_jsx("span", { className: twMerge("transform transition-transform duration-200 ease-in", "group-hover:text-blue-400 group-active:text-blue-400", !hoverActive &&
activeIds.includes(item.id) &&
"rotate-90 text-blue-500"), children: _jsx(ChevronRightIcon, {}) })) : null] }), hasChildren ? (_jsx(MenuChildren, { items: item.items, parentDepth: depth, isActive: (!hoverActive && activeIds.includes(item.id)) ||
(hoverActive && hoverIds.includes(item.id)) })) : null] }));
};
export default MenuItem;