@vectara/vectara-ui
Version:
Vectara's design system, codified as a React and Sass component library
47 lines (46 loc) • 2.97 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useRef, useState } from "react";
import classNames from "classnames";
import { BiChevronLeft, BiChevronRight } from "react-icons/bi";
import { VuiIconButton } from "../../button/IconButton";
import { VuiIcon } from "../../icon/Icon";
import { buildSections } from "./AppSideNavSections";
import { buildTree } from "./AppSideNavTree";
import { VuiFlexContainer } from "../../flex/FlexContainer";
import { VuiFlexItem } from "../../flex/FlexItem";
export const buildSideNavItems = (items) => {
return isTree(items) ? buildTree(items) : buildSections(items);
};
// Type guard to determine if we have a Tree or Sections.
const isTree = (items) => {
return items.findIndex((item) => item.path) !== -1;
};
export const VuiAppSideNav = ({ items = [], content }) => {
const [isTouched, setIsTouched] = useState(false);
const [isCollapsed, setIsCollapsed] = useState(false);
const collapseButtonRef = useRef(null);
const expandButtonRef = useRef(null);
useEffect(() => {
var _a, _b;
// Prevent the button from being focused when it first renders.
if (isTouched) {
if (isCollapsed) {
(_a = expandButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
}
else {
(_b = collapseButtonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
}
}
}, [isTouched, isCollapsed]);
const classes = classNames("vuiAppSideNav", {
"vuiAppSideNav-isCollapsed": isCollapsed
});
const contentClasses = classNames("vuiAppSideNavContent", {
"vuiAppSideNavContent-isHidden": isCollapsed
});
const navItems = buildSideNavItems(items);
return (_jsx("div", Object.assign({ className: classes }, { children: _jsxs("div", Object.assign({ className: "vuiAppSideNav__inner" }, { children: [isCollapsed ? (_jsx(VuiIconButton, { ref: expandButtonRef, "aria-label": "Show nav", onClick: () => setIsCollapsed(false), className: "vuiAppSideNavExpandButton", color: "neutral", icon: _jsx(VuiIcon, { children: _jsx(BiChevronRight, {}) }) })) : (_jsx(_Fragment, { children: _jsx("button", Object.assign({ ref: collapseButtonRef, className: "vuiAppSideNavCollapseButton", onClick: () => {
setIsTouched(true);
setIsCollapsed(true);
} }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xxs" }, { children: [_jsx(VuiFlexItem, Object.assign({ shrink: false, grow: false }, { children: _jsx(VuiIcon, { children: _jsx(BiChevronLeft, {}) }) })), _jsx(VuiFlexItem, Object.assign({ shrink: false, grow: false }, { children: "Collapse nav" }))] })) })) })), _jsxs("div", Object.assign({ className: contentClasses, inert: isCollapsed ? "" : null }, { children: [navItems, content] }))] })) })));
};