1import { css } from '@emotion/react';
2import { spacing } from '@expo/styleguide-base';
3
4import { SidebarNodeProps } from './Sidebar';
5import { SidebarTitle, SidebarLink, SidebarSection } from './index';
6
7import { NavigationRoute } from '~/types/common';
8
9export const SidebarGroup = ({ route, parentRoute }: SidebarNodeProps) => (
10  <div css={[STYLES_SECTION_CATEGORY]}>
11    {!shouldSkipTitle(route, parentRoute) && (
12      <SidebarTitle>{route.sidebarTitle || route.name}</SidebarTitle>
13    )}
14    {(route.children || []).map(child =>
15      child.type === 'page' ? (
16        <SidebarLink key={`${route.name}-${child.name}`} info={child}>
17          {child.sidebarTitle || child.name}
18        </SidebarLink>
19      ) : (
20        <SidebarSection
21          key={`group-${child.name}-${route.name}`}
22          route={child}
23          parentRoute={route}
24        />
25      )
26    )}
27  </div>
28);
29
30const shouldSkipTitle = (info: NavigationRoute, parentGroup?: NavigationRoute) => {
31  if (info.name === parentGroup?.name) {
32    // If the title of the group is Expo SDK and the section within it has the same name
33    // then we shouldn't show the title twice. You might want to organize your group like
34    // so it is collapsable
35    return true;
36  } else if (
37    info.children &&
38    ((info.children[0] || {}).sidebarTitle || (info.children[0] || {}).name) === info.name
39  ) {
40    // If the first child post in the group has the same name as the group, then hide the
41    // group title, lest we be very repetitive
42    return true;
43  }
44
45  return false;
46};
47
48const STYLES_SECTION_CATEGORY = css({
49  marginBottom: spacing[5],
50});
51