@trail-ui/react
Version:
78 lines (75 loc) • 3.9 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/side-navbar/index.ts
var side_navbar_exports = {};
__export(side_navbar_exports, {
SideNavbar: () => SideNavbar
});
module.exports = __toCommonJS(side_navbar_exports);
// src/side-navbar/side-navbar.tsx
var import_react = require("react");
var import_theme = require("@trail-ui/theme");
var import_icons = require("@trail-ui/icons");
var import_jsx_runtime = require("react/jsx-runtime");
function SideNavbar({ data, classNames }) {
const slots = (0, import_react.useMemo)(() => (0, import_theme.sideNavbar)(), []);
const [isExpanded, setIsExpanded] = (0, import_react.useState)(true);
const [activeButtonIndex, setActiveButtonIndex] = (0, import_react.useState)(0);
const handleSidebar = () => {
setIsExpanded(!isExpanded);
};
return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.MenuCollapsedIcon, { width: 24, height: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.MenuExpandedIcon, { width: 24, height: 24 }) })
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { children: data.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: item.icon }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: `${!isExpanded ? "sr-only" : ""}`, children: item.title }) })
] })
},
index
) }, index)) })
]
}
);
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
SideNavbar
});