@trail-ui/react
Version:
52 lines (50 loc) • 2.47 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",
"aria-label": "Primary",
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__ */ jsx(
"button",
{
type: "button",
className: slots.heading({ class: classNames == null ? void 0 : classNames.heading }),
"aria-label": isExpanded ? "Icon View" : "Detail View",
onClick: handleSidebar,
children: /* @__PURE__ */ jsx("div", { children: isExpanded ? /* @__PURE__ */ jsx(MenuCollapsedIcon, { width: 24, height: 24 }) : /* @__PURE__ */ jsx(MenuExpandedIcon, { width: 24, height: 24 }) })
}
),
/* @__PURE__ */ jsx("ul", { children: data.map((item, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
"a",
{
href: "#",
className: `w-full cursor-pointer 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),
"aria-current": activeButtonIndex === index ? "page" : void 0,
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 ? "sr-only" : ""}`, children: item.title }) })
] })
},
index
) }, index)) })
]
}
);
}
export {
SideNavbar
};