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
|
import PropTypes from 'prop-types'
import classNames from 'classnames'
import React, { useState } from 'react'
import { collapseButton, collapseButtonRight, sidebar, sidebarRight } from './Sidebar.module.scss'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons'
function Sidebar({ isRight, collapsible = true, children }) {
const [isCollapsed, setCollapsed] = useState(false)
const button = (
<div
className={classNames(collapseButton, {
[collapseButtonRight]: isRight,
})}
onClick={() => setCollapsed(!isCollapsed)}
>
{(isCollapsed && isRight) || (!isCollapsed && !isRight) ? (
<FontAwesomeIcon icon={faAngleLeft} title={isRight ? 'Expand' : 'Collapse'} />
) : (
<FontAwesomeIcon icon={faAngleRight} title={isRight ? 'Collapse' : 'Expand'} />
)}
</div>
)
if (isCollapsed) {
return button
}
return (
<div
className={classNames(`${sidebar} p-3 h-100`, {
[sidebarRight]: isRight,
})}
onWheel={(e) => e.stopPropagation()}
>
{children}
{collapsible && button}
</div>
)
}
Sidebar.propTypes = {
isRight: PropTypes.bool.isRequired,
collapsible: PropTypes.bool,
children: PropTypes.node,
}
export default Sidebar
|
