sidebar-item

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>
      )}
    </>
  );
};