text: import React from 'react'
  import { useSelector, useDispatch } from 'react-redux'
  import {
    CHeader,
    CToggler,
    CHeaderBrand,
    CHeaderNav,
    CHeaderNavItem,
    CHeaderNavLink,
    CSubheader,
    CBreadcrumbRouter,
  } from '@coreui/react'
  import logo from '../assets/icons/openmed-logo.png'
  
  // routes config
  import routes from '../routes'
  
  import {
    TheHeaderDropdown,
    TheHeaderDropdownMssg,
    TheHeaderDropdownNotif,
    TheHeaderDropdownTasks,
  } from './index'
  
  const TheHeader = () => {
    const dispatch = useDispatch()
    const sidebarShow = useSelector((state) => state.sidebarShow)
  
    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} />
        <CHeaderBrand className="mx-auto d-lg-none" to="/">
          <img height="48" alt="logo" src={logo} />
        </CHeaderBrand>
  
        <CHeaderNav className="d-md-down-none mr-auto">
          <CHeaderNavItem className="px-3">
            <CHeaderNavLink to="/dashboard">Dashboard</CHeaderNavLink>
          </CHeaderNavItem>
          <CHeaderNavItem className="px-3">
            <CHeaderNavLink to="/facilities">Trova ambulatorio</CHeaderNavLink>
          </CHeaderNavItem>
        </CHeaderNav>
  
        <CHeaderNav className="px-3">
          <TheHeaderDropdownNotif />
          <TheHeaderDropdownTasks />
          <TheHeaderDropdownMssg />
          <TheHeaderDropdown />
        </CHeaderNav>
  
        <CSubheader className="px-3 justify-content-between">
          <CBreadcrumbRouter className="border-0 c-subheader-nav m-0 px-0 px-md-3" routes={routes} />
        </CSubheader>
      </CHeader>
    )
  }
  
  export default TheHeader
  