1import * as React from 'react';
2
3import { SidebarNodeProps } from './Sidebar';
4import { SidebarGroup, SidebarCollapsible } from './index';
5
6export const SidebarSection = ({ route, ...rest }: SidebarNodeProps) => {
7  // If the section or group is hidden, or has no content, we should not render it
8  if (route.hidden || !route.children?.length) {
9    return null;
10  }
11
12  return (
13    <SidebarCollapsible key={`section-${route.name}`} info={route}>
14      {route.children.map(group => (
15        <SidebarGroup
16          {...rest}
17          key={`group-${group.name}-${route.name}`}
18          route={group}
19          parentRoute={route}
20        />
21      ))}
22    </SidebarCollapsible>
23  );
24};
25