text: import React from 'react'
  import { useSelector, useDispatch } from 'react-redux'
  import {
    CHeader,
    CToggler,
    CHeaderNav,
    CBreadcrumbRouter,
  } from '@coreui/react'
  
  // routes config
  import routes from '../routes'
  
  import {
    TheHeaderDropdown,
  } from './index'
  
  const TheHeader = () => {
    const dispatch = useDispatch()
    const sidebarShow = useSelector(state => state.sidebarShow)
    const user = useSelector(state => state.user)
  
    const toggleSidebar = () => {
      const val = [true, 'responsive'].includes(sidebarShow) ? false : 'responsive'
      dispatch({ type: 'set', sidebarShow: val })
    }
  
    const toggleSidebarMobile = () => {
      const val = [false, 'responsive'].includes(sidebarShow) ? true : 'responsive'
      dispatch({ type: 'set', sidebarShow: val })
    }
  
    return (
      <CHeader withSubheader>
        <CToggler
          inHeader
          className="ml-md-3 d-lg-none"
          onClick={toggleSidebarMobile}
        />
        <CToggler
          inHeader
          className="ml-3 d-md-down-none"
          onClick={toggleSidebar}
        />
        <CHeaderNav className="d-md-down-none mr-auto">
          <CBreadcrumbRouter
            className="border-0 c-subheader-nav m-0 px-0 px-md-3"
            routes={routes}
          />
        </CHeaderNav>
        <CHeaderNav className="px-3">
          <TheHeaderDropdown img={user} />
        </CHeaderNav>
      </CHeader>
    )
  }
  
  export default TheHeader
  