-
Notifications
You must be signed in to change notification settings - Fork 643
/
sidebar.tsx
72 lines (62 loc) · 1.83 KB
/
sidebar.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import React from 'react'
import styled from 'styled-components'
import { useSelector } from 'react-redux'
import { Box, cssClass, themeGet } from '@admin-bro/design-system'
import { BrandingOptions } from 'src/admin-bro-options.interface'
import { ResourceJSON, PageJSON } from 'src/frontend/interfaces'
import SidebarBranding from './sidebar-branding'
import SidebarPages from './sidebar-pages'
import { ReduxState } from '../../../store/store'
import SidebarFooter from './sidebar-footer'
import SidebarResourceSection from './sidebar-resource-section'
import allowOverride from '../../../hoc/allow-override'
type Props = {
isVisible: boolean;
};
const StyledSidebar = styled(Box)`
transition: left 0.3s;
top: 0;
bottom: 0;
flex-shrink: 0;
overflow-y: auto;
&.hidden {
left: -${themeGet('sizes', 'sidebarWidth')};
}
&.visible {
left: 0;
}
`
StyledSidebar.defaultProps = {
position: ['absolute', 'absolute', 'absolute', 'absolute', 'inherit'],
width: 'sidebarWidth',
borderRight: 'default',
display: 'flex',
flexDirection: 'column',
zIndex: 50,
bg: 'white',
}
const SidebarOriginal: React.FC<Props> = (props) => {
const { isVisible } = props
const [branding, resources, pages]: [
BrandingOptions,
ResourceJSON[],
PageJSON[]
] = useSelector((state: ReduxState) => [
state.branding,
state.resources,
state.pages,
])
return (
<StyledSidebar className={isVisible ? 'visible' : 'hidden'}>
<SidebarBranding branding={branding} />
<Box flexGrow={1} className={cssClass('Resources')}>
<SidebarResourceSection resources={resources} />
</Box>
<SidebarPages pages={pages} />
{branding?.softwareBrothers && <SidebarFooter />}
</StyledSidebar>
)
}
const Sidebar = allowOverride(SidebarOriginal, 'Sidebar')
export { Sidebar }
export default Sidebar