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