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