@trail-ui/react
Version:
58 lines (56 loc) • 2.72 kB
JavaScript
// src/side-navbar/side-navbar.tsx
import { useMemo, useState } from "react";
import { sideNavbar } from "@trail-ui/theme";
import { MenuCollapsedIcon, MenuExpandedIcon } from "@trail-ui/icons";
import { jsx, jsxs } from "react/jsx-runtime";
function SideNavbar({ data, classNames }) {
const slots = useMemo(() => sideNavbar(), []);
const [isExpanded, setIsExpanded] = useState(true);
const [activeButtonIndex, setActiveButtonIndex] = useState(0);
const handleSidebar = () => {
setIsExpanded(!isExpanded);
};
return /* @__PURE__ */ jsxs(
"div",
{
role: "navigation",
className: `${slots.base({ class: classNames == null ? void 0 : classNames.base })} ${isExpanded ? slots.expanded({ class: classNames == null ? void 0 : classNames.expanded }) : slots.collapsed({ class: classNames == null ? void 0 : classNames.collapsed })}`,
children: [
/* @__PURE__ */ jsxs(
"button",
{
className: slots.heading({ class: classNames == null ? void 0 : classNames.heading }),
onClick: handleSidebar,
"aria-expanded": isExpanded,
"aria-label": "Menu",
children: [
/* @__PURE__ */ jsx("div", { children: isExpanded ? /* @__PURE__ */ jsx(MenuCollapsedIcon, { width: 24, height: 24 }) : /* @__PURE__ */ jsx(MenuExpandedIcon, { width: 24, height: 24 }) }),
/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("p", { className: `${!isExpanded && slots.hideText({ class: classNames == null ? void 0 : classNames.hideText })}`, children: "Menu" }) })
]
}
),
/* @__PURE__ */ jsx("ul", { children: data.map((item, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
"button",
{
className: `w-full px-2 py-2 pl-4 ${slots.labelElement({ class: classNames == null ? void 0 : classNames.labelElement })} ${activeButtonIndex === index && slots.active({ class: classNames == null ? void 0 : classNames.active })}`,
onClick: () => setActiveButtonIndex(index),
children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsx("div", { children: item.icon }),
/* @__PURE__ */ jsx("div", { className: "flex flex-col", children: /* @__PURE__ */ jsx(
"p",
{
className: `${!isExpanded && slots.hideText({ class: classNames == null ? void 0 : classNames.hideText })}`,
children: item.title
}
) })
] })
},
index
) }, index)) })
]
}
);
}
export {
SideNavbar
};