@intility/bifrost-react
Version:
React library for Intility's design system, Bifrost.
61 lines (60 loc) • 2.5 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import classNames from "classnames";
import { forwardRef } from "react";
import { bfCollapse } from "../../assets/bfCollapse.js";
import useLocale from "../../hooks/useLocale.js";
import Branding from "./Branding.internal.js";
import NavItem from "./Nav.Item.js";
import NavLogo from "./Nav.Logo.js";
import NavLocationProvider from "./NavLocationContext.internal.js";
/**
* Nav sidebar
*/ const NavSide = /*#__PURE__*/ forwardRef(({ children, className, collapsed, onCollapsedChange, logo, hideBranding = false, ...props }, ref)=>{
const locale = useLocale();
const collapseButtonLabel = collapsed ? locale.expand : locale.collapse;
logo = typeof logo === "string" ? /*#__PURE__*/ _jsx(NavLogo, {
children: logo
}) : logo;
return /*#__PURE__*/ _jsx(NavLocationProvider, {
where: "side",
sideExpandedOrMobile: !collapsed,
children: /*#__PURE__*/ _jsxs("nav", {
...props,
className: classNames("bf-nav bf-nav-side", className, {
"bf-nav-side-collapsed": collapsed
}),
ref: ref,
children: [
/*#__PURE__*/ _jsx("div", {
className: "bf-nav-side-logo",
children: logo
}),
/*#__PURE__*/ _jsxs("div", {
className: "bf-nav-side-content-wrapper bf-scrollbar-small",
children: [
/*#__PURE__*/ _jsx("div", {
className: "bf-nav-side-content",
children: children
}),
!hideBranding && /*#__PURE__*/ _jsx(Branding, {})
]
}),
/*#__PURE__*/ _jsx("div", {
className: "bf-nav bf-nav-side-bottom",
children: onCollapsedChange && /*#__PURE__*/ _jsx("button", {
type: "button",
onClick: ()=>onCollapsedChange(!collapsed),
className: "bf-nav-side-collapse-button",
children: /*#__PURE__*/ _jsx(NavItem, {
icon: bfCollapse,
children: collapseButtonLabel
})
})
})
]
})
});
});
NavSide.displayName = "Nav.Side";
export default NavSide;