76 lines
2.1 KiB
JavaScript
76 lines
2.1 KiB
JavaScript
import React from 'react'
|
|
import { NavLink } from 'react-router-dom'
|
|
import { useSelector, useDispatch } from 'react-redux'
|
|
import {
|
|
CContainer,
|
|
CHeader,
|
|
CHeaderBrand,
|
|
CHeaderDivider,
|
|
CHeaderNav,
|
|
CHeaderToggler,
|
|
CNavLink,
|
|
CNavItem,
|
|
} from '@coreui/react'
|
|
import CIcon from '@coreui/icons-react'
|
|
|
|
import { AppBreadcrumb } from './index'
|
|
|
|
import { AppHeaderDropdown } from './header/index'
|
|
|
|
const AppHeader = () => {
|
|
const dispatch = useDispatch()
|
|
const sidebarShow = useSelector((state) => state.sidebarShow)
|
|
|
|
return (
|
|
<CHeader position="sticky" className="mb-4">
|
|
<CContainer fluid>
|
|
<CHeaderToggler onClick={() => dispatch({ type: 'set', sidebarShow: !sidebarShow })}>
|
|
<CIcon name="cil-menu" size="lg" />
|
|
</CHeaderToggler>
|
|
<CHeaderBrand className="mx-auto d-md-none" to="/">
|
|
<CIcon name="logo" height="48" alt="Logo" />
|
|
</CHeaderBrand>
|
|
<CHeaderNav className="d-none d-md-flex me-auto">
|
|
<CNavItem>
|
|
<CNavLink to="/dashboard" component={NavLink} activeClassName="active">
|
|
Dashboard
|
|
</CNavLink>
|
|
</CNavItem>
|
|
<CNavItem>
|
|
<CNavLink href="#">Users</CNavLink>
|
|
</CNavItem>
|
|
<CNavItem>
|
|
<CNavLink href="#">Settings</CNavLink>
|
|
</CNavItem>
|
|
</CHeaderNav>
|
|
<CHeaderNav>
|
|
<CNavItem>
|
|
<CNavLink href="#">
|
|
<CIcon name="cil-bell" size="lg" />
|
|
</CNavLink>
|
|
</CNavItem>
|
|
<CNavItem>
|
|
<CNavLink href="#">
|
|
<CIcon name="cil-list" size="lg" />
|
|
</CNavLink>
|
|
</CNavItem>
|
|
<CNavItem>
|
|
<CNavLink href="#">
|
|
<CIcon name="cil-envelope-open" size="lg" />
|
|
</CNavLink>
|
|
</CNavItem>
|
|
</CHeaderNav>
|
|
<CHeaderNav className="ms-3">
|
|
<AppHeaderDropdown />
|
|
</CHeaderNav>
|
|
</CContainer>
|
|
<CHeaderDivider />
|
|
<CContainer fluid>
|
|
<AppBreadcrumb />
|
|
</CContainer>
|
|
</CHeader>
|
|
)
|
|
}
|
|
|
|
export default AppHeader
|