1import { HamburgerIcon } from '@chakra-ui/icons';
 2import { chakra, Flex } from '@chakra-ui/react'
 3import { pages } from 'stores';
 4import { FC } from 'react';
 5import { Logo } from './logo';
 6import { SidebarGroup } from './sidebar-group';
 7import { SidebarItem } from './sidebar-item';
 8
 9export const SidebarMenuIcon = chakra(HamburgerIcon, {
10  baseStyle: {
11    w: 5,
12    h: 5,
13  },
14});
15
16
17export const Sidebar: FC = () => {
18  return (
19    <aside>
20      <Flex
21        pos="sticky"
22        borderRightWidth="4px"
23        borderRightColor='gray.200'
24        borderRightStyle="solid"
25        flexDir="column"
26        pt={4}
27        h="100vh"
28        bg="gray.50"
29        _dark={{ bg: 'gray.800', borderRightColor: 'gray.700' }}
30      >
31        <Logo />
32        <SidebarGroup titleT={'sidebar.groups.management'}>
33          {Object.entries(pages).map(([pageKey, page]) =>
34            <SidebarItem
35              page={page}
36              key={pageKey}
37            />
38          )}
39        </SidebarGroup>
40      </Flex>
41    </aside>
42  )
43}