@trellixio/roaster-coffee/esm/components/Sidebar/Sidebar.js

Beans' product component library

import * as React from 'react';
import { Section } from './components/Section.js';
import { classNames } from '../../utils/classNames/index.js';
import '@floating-ui/react';
import { Button } from '../Button/Button.js';
import { Menu } from './components/Menu.js';

const Sidebar = React.forwardRef((props, ref) => {
  const [visible, setVisible] = React.useState(false);
  const { mobileHeader, header, footer, activePath, onMenuItemClick, items, className } = props;
  const [activeSubMenu, setActiveSubMenu] = React.useState({
    expanded: true,
    pathname: activePath
  });
  React.useEffect(() => {
    setActiveSubMenu((currentSubMenu) => ({
      expanded: currentSubMenu.expanded,
      pathname: activePath
    }));
  }, [activePath]);
  function handleClick(itemId) {
    onMenuItemClick?.({ itemId });
  }
  function handleSubMenuExpand(item) {
    if (activeSubMenu.expanded) {
      const currentItemOrSubMenuItemIsOpen = (
        // either the parent item is expanded already
        item.pathname === activeSubMenu.pathname || // or one of its expandable children is selected
        item.subMenu && item.subMenu.some((subMenuItem) => subMenuItem.pathname === activeSubMenu.pathname) || false
      );
      setActiveSubMenu({
        expanded: item.subMenu && item.subMenu.length > 0 ? !currentItemOrSubMenuItemIsOpen : false,
        pathname: item.pathname
      });
    } else {
      setActiveSubMenu({
        expanded: !!(item.subMenu && item.subMenu.length > 0),
        pathname: item.pathname
      });
    }
  }
  function getMenuItemsProps(item) {
    const { pathname, subMenu, icon, label, ...rest } = item;
    const isItemSelected = pathname === activeSubMenu.pathname;
    const isExpanded = (
      // item is expanded and
      activeSubMenu.expanded && // either the current expandable section is selected
      (isItemSelected || // or some item in the expandable section of the current item is selected or active
      subMenu && subMenu.some((subMenuItem) => subMenuItem.pathname === activeSubMenu.pathname) || false)
    );
    return { isExpanded, pathname, subMenu, icon, label, otherProps: rest };
  }
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("section", { className: "appnav-opener-mobile" }, /* @__PURE__ */ React.createElement(Button, { variant: "", isIconButton: true, onClick: () => setVisible(!visible) }, /* @__PURE__ */ React.createElement("i", { className: "fa-regular fa-bars" })), mobileHeader), /* @__PURE__ */ React.createElement("aside", { className: classNames("appnav-container", className, { visible }), ref }, /* @__PURE__ */ React.createElement("div", { className: "background-overlay", onClick: () => setVisible(!visible) }), /* @__PURE__ */ React.createElement("nav", { className: "appnav" }, /* @__PURE__ */ React.createElement(Section, { className: "header" }, header), /* @__PURE__ */ React.createElement(Section, null, items.map((item) => {
    if (Array.isArray(item)) {
      return /* @__PURE__ */ React.createElement(Menu, null, item.map((menuItem) => {
        const { isExpanded: isExpanded2, pathname: pathname2, subMenu: subMenu2, icon: icon2, label: label2, otherProps: otherProps2 } = getMenuItemsProps(menuItem);
        return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
          Menu.Item,
          {
            key: label2,
            icon: icon2,
            active: isExpanded2,
            onClick: () => {
              handleClick(pathname2);
              handleSubMenuExpand(menuItem);
            },
            ...otherProps2
          },
          label2
        ), subMenu2 && subMenu2.length > 0 && isExpanded2 && /* @__PURE__ */ React.createElement(Menu.Item, { component: React.Fragment }, /* @__PURE__ */ React.createElement(Menu.SubMenu, { expanded: isExpanded2 }, subMenu2.map((subMenuItem) => {
          const {
            icon: subMenuIcon,
            pathname: subMenuItemPathname,
            label: subMenuItemLabel,
            ...subMenuItemRest
          } = subMenuItem;
          return /* @__PURE__ */ React.createElement(
            Menu.Item,
            {
              icon: subMenuIcon,
              key: subMenuItemPathname,
              onClick: () => handleClick(subMenuItemPathname),
              ...subMenuItemRest
            },
            subMenuItemLabel
          );
        }))));
      }));
    }
    const { isExpanded, pathname, subMenu, icon, label, otherProps } = getMenuItemsProps(item);
    return /* @__PURE__ */ React.createElement(Menu, null, /* @__PURE__ */ React.createElement(
      Menu.Item,
      {
        key: label,
        icon,
        active: isExpanded,
        onClick: () => {
          handleClick(pathname);
          handleSubMenuExpand(item);
        },
        ...otherProps
      },
      label
    ), subMenu && subMenu.length > 0 && isExpanded && /* @__PURE__ */ React.createElement(Menu.Item, { component: React.Fragment }, /* @__PURE__ */ React.createElement(Menu.SubMenu, { expanded: isExpanded }, subMenu.map((subMenuItem) => {
      const {
        icon: subMenuIcon,
        pathname: subMenuItemPathname,
        label: subMenuItemLabel,
        ...subMenuItemRest
      } = subMenuItem;
      return /* @__PURE__ */ React.createElement(
        Menu.Item,
        {
          icon: subMenuIcon,
          key: subMenuItemPathname,
          onClick: () => handleClick(subMenuItemPathname),
          ...subMenuItemRest
        },
        subMenuItemLabel
      );
    }))));
  })), /* @__PURE__ */ React.createElement(Section, { className: "footer" }, footer))));
});
Sidebar.Section = Section;
Sidebar.Menu = Menu;
Sidebar.displayName = "Sidebar";

export { Sidebar };
//# sourceMappingURL=Sidebar.js.map