File size: 1,676 Bytes
60db1d1 | 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 | import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import {
CCloseButton,
CSidebar,
CSidebarBrand,
CSidebarFooter,
CSidebarHeader,
CSidebarToggler,
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { AppSidebarNav } from './AppSidebarNav'
import { logo } from 'src/assets/brand/logo'
import { sygnet } from 'src/assets/brand/sygnet'
// sidebar nav config
import navigation from '../_nav'
const AppSidebar = () => {
const dispatch = useDispatch()
const unfoldable = useSelector((state) => state.sidebarUnfoldable)
const sidebarShow = useSelector((state) => state.sidebarShow)
return (
<CSidebar
className="border-end"
colorScheme="dark"
position="fixed"
unfoldable={unfoldable}
visible={sidebarShow}
onVisibleChange={(visible) => {
dispatch({ type: 'set', sidebarShow: visible })
}}
>
<CSidebarHeader className="border-bottom">
<CSidebarBrand to="/">
<CIcon customClassName="sidebar-brand-full" icon={logo} height={32} />
<CIcon customClassName="sidebar-brand-narrow" icon={sygnet} height={32} />
</CSidebarBrand>
<CCloseButton
className="d-lg-none"
dark
onClick={() => dispatch({ type: 'set', sidebarShow: false })}
/>
</CSidebarHeader>
<AppSidebarNav items={navigation} />
<CSidebarFooter className="border-top d-none d-lg-flex">
<CSidebarToggler
onClick={() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}
/>
</CSidebarFooter>
</CSidebar>
)
}
export default React.memo(AppSidebar)
|