@prokodo/ui
Version:
UI components for production-grade Next.js + Headless CMS (Strapi, Contentful, Headless WordPress) websites by prokodo – built for Core Web Vitals & SEO.
63 lines (62 loc) • 2.64 kB
JavaScript
var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import { create } from "../../helpers/bem.js";
import styles from "./SideNav.module.scss.js";
import { Icon } from "../icon/Icon.js";
import { Link } from "../link/Link.js";
const bem = create(styles, "SideNav");
function SideNavView({
items,
collapsed,
collapsedLabel = "Expand menu",
collapsedIcon = "ArrowRight01Icon",
unCollapsedLabel = "Collapse menu",
unCollapsedIcon = "ArrowLeft01Icon",
iconProps,
onToggle,
interactive = true,
ariaLabel = "Main navigation",
className
}) {
const renderItem = /* @__PURE__ */ __name((icon, label) => /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx("div", { className: bem("icon__wrapper"), children: /* @__PURE__ */ jsx(Icon, { size: 25, ...icon, className: bem("icon", void 0, icon == null ? void 0 : icon.className) }) }),
!collapsed && /* @__PURE__ */ jsx("span", { className: bem("label", { collapsed }), children: label })
] }), "renderItem");
return /* @__PURE__ */ jsxs(
"aside",
{
"aria-label": ariaLabel,
className: bem(void 0, { collapsed, interactive }, className),
children: [
/* @__PURE__ */ jsxs(
"button",
{
"aria-controls": "sidenav",
"aria-expanded": !collapsed,
className: bem("toggle"),
type: "button",
onClick: onToggle,
children: [
/* @__PURE__ */ jsx(Icon, { size: "md", ...iconProps, name: collapsed ? collapsedIcon : unCollapsedIcon }),
/* @__PURE__ */ jsx("span", { className: bem("collape__label", { "is-hidden": collapsed }), children: collapsed ? collapsedLabel : unCollapsedLabel })
]
}
),
/* @__PURE__ */ jsx("nav", { id: "sidenav", children: /* @__PURE__ */ jsx("ul", { className: bem("list"), children: items.map(({ label, icon, redirect, active }) => /* @__PURE__ */ jsx("li", { children: (redirect == null ? void 0 : redirect.href) !== void 0 ? /* @__PURE__ */ jsx(
Link,
{
...redirect,
className: bem("link", { collapsed, "is-active": Boolean(active) }, redirect == null ? void 0 : redirect.className),
href: redirect.href,
children: renderItem(icon, label)
}
) : /* @__PURE__ */ jsx(Fragment, { children: renderItem(icon, label) }) }, label)) }) })
]
}
);
}
__name(SideNavView, "SideNavView");
export {
SideNavView as default
};