1import { css } from '@emotion/react';
2import { spacing } from '@expo/styleguide';
3
4import { SidebarNodeProps } from './Sidebar';
5import { SidebarGroup, SidebarCollapsible, SidebarLink } from './index';
6
7export const SidebarSection = ({ route, ...rest }: SidebarNodeProps) => {
8  // If the section or group is hidden, or has no content, we should not render it
9  if (route.hidden || !route.children?.length) {
10    return null;
11  }
12
13  return (
14    <SidebarCollapsible key={`section-${route.name}`} info={route}>
15      <div css={contentWrapperStyle}>
16        {route.children.map(child =>
17          child.type === 'page' ? (
18            <SidebarLink key={`${route.name}-${child.name}`} info={child}>
19              {child.sidebarTitle || child.name}
20            </SidebarLink>
21          ) : (
22            <SidebarGroup
23              {...rest}
24              key={`group-${child.name}-${route.name}`}
25              route={child}
26              parentRoute={route}
27            />
28          )
29        )}
30      </div>
31    </SidebarCollapsible>
32  );
33};
34
35const contentWrapperStyle = css({
36  marginBottom: spacing[4] + spacing[0.5],
37  marginTop: spacing[1],
38});
39