text: import React from 'react'
  import { useSelector, useDispatch } from 'react-redux'
  import {
    CHeader,
    CToggler,
    CHeaderBrand,
    CHeaderNav,
    CHeaderNavItem,
    CHeaderNavLink,
    CSubheader,
    CBreadcrumbRouter
  } from '@coreui/react'
  import WbCloudyIcon from '@material-ui/icons/WbCloudy';
  
  // routes config
  import routes from '../routes'
  
  import { 
    TheHeaderDropdown,
  }  from './index'
  
  const TheHeader = (props) => {
    const dispatch = useDispatch()
    const sidebarShow = useSelector(state => state.sidebarShow)
    const { 
      handleLogout
      }=props;
  
  
    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="/">
        <WbCloudyIcon style={{ fontSize: 40 }}/>
        <p style={{fontSize:'40px',marginTop:'10px'}}> Cloud Elite</p>
        </CHeaderBrand>
  
        <CHeaderNav className="d-md-down-none mr-auto">
          <CHeaderNavItem className="px-3" >
            <CHeaderNavLink to="/dashboard">Dashboard</CHeaderNavLink>
          </CHeaderNavItem>
        </CHeaderNav>
  
        <CHeaderNav className="px-3">
  
          
          <TheHeaderDropdown handleLogout={handleLogout}/>
        </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
  