recursive-sidebar

const Sidebar = (props) => {
  const { links } = props;
  const [selectedMenus, setSelectedMenus] = useState([]);
    const handleMenuSelection = (label, depth) => {
    setSelectedMenus((selectedMenus) => {
      const newSelectedMenus = [...selectedMenus];
      // trim any menus after the depth
      newSelectedMenus.length = depth;
      if (label !== '') {
        newSelectedMenus[depth] = label;
      }
      return newSelectedMenus;
    });
  };

  return (
    <Sidebar.Wrapper>
      <Sidebar.List onMouseLeave={() => setSelectedMenus([])}>
        {links.map((link) => {
          return (
            <SidebarItem
              link={link}
              handleMenuSelection={handleMenuSelection}
              key={link.label}
              selectedMenus={selectedMenus}
            />
          );
        })}
      </Sidebar.List>
    </Sidebar.Wrapper>
  );
};

const SidebarItem = ({
  link,
  handleMenuSelection,
  selectedMenus,
  depth = 0,
}) => {
  const { label, path, children = [] } = link;
  return (
    <>
      {children.length > 0 ? (
        <SidebarItem.Item>
          <SidebarItem.Label
            onMouseEnter={() => handleMenuSelection(label, depth)}
          >
            {label}
          </SidebarItem.Label>
          {selectedMenus[depth] === label && (
            <SidebarItem.List depth={depth}>
              {children.map((child, i) => {
                const { label } = child;
                const childDepth = depth + 1;
                return (
                  <SidebarItem
                    link={child}
                    handleMenuSelection={handleMenuSelection}
                    key={`child-${label}-${i}`}
                    depth={childDepth}
                    selectedMenus={selectedMenus}
                  />
                );
              })}
            </SidebarItem.List>
          )}
        </SidebarItem.Item>
      ) : (
        <SidebarItem.Item onMouseEnter={() => handleMenuSelection('', depth)}>
          <SidebarItem.Anchor href={path}>{label}</SidebarItem.Anchor>
        </SidebarItem.Item>
      )}
    </>
  );