render() {
    const {
      children,
      title,
      scroll,
      titleRight,
      emptyState,
      collapsed,
      flex = "auto",
    } = this.props;

    return (
      <>
        {!!title && (
          <>
            <SideBarListTitle collapsed={collapsed}>
              {title}
              {!!titleRight && <Box ml="auto">{titleRight}</Box>}
            </SideBarListTitle>
            <Space of={20} />
          </>
        )}
        {children ? (
          <ListWrapper
            collapsed={collapsed}
            scroll={scroll}
            flow={2}
            px={3}
            fontSize={3}
            flex={flex}
          >
            {children}
          </ListWrapper>
        ) : emptyState ? (
          <Box px={4} ff="Inter|Regular" selectable fontSize={3} color="palette.text.shade60">
            {emptyState}
          </Box>
        ) : null}
      </>
    );
  }
when collapsed =>
Hack to allocate an extension of space on the right for the tooltips
!important to keep track color hidden