Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { Suspense, lazy, useState } from 'react'
import HomeIcon from '@mui/icons-material/Home'
import BusinessCenterIcon from '@mui/icons-material/BusinessCenter'
import SellIcon from '@mui/icons-material/Sell'
import PeopleIcon from '@mui/icons-material/People'
import GroupsIcon from '@mui/icons-material/Groups'
import MenuIcon from '@mui/icons-material/Menu'
import SchoolIcon from '@mui/icons-material/School'
import ChatIcon from '@mui/icons-material/Chat'

import UserOptions from './UserOptions'
import HeaderOptions from './HeaderOptions'
import NavSearch from './nav-search/NavSearch'

import './Header.scss'

const MenuDrawer = lazy(() => import('./Drawer'))

const ICON_OPTIONS = [
  HomeIcon,
  PeopleIcon,
  BusinessCenterIcon,
  GroupsIcon,
  SellIcon,
  SchoolIcon,
  ChatIcon,
]

const Header = ({
  menu = [],
  image = '',
  logoForNavbar = '',
  fullName,
  linkAdmin,
  linkImpersonate,
  linkKnowledgeArea,
  routeKnowledgeArea,
  defaultNetwork,
  notificationsCount,
  messagesCount,
}) => {
  const [showDrawer, setShowDrawer] = useState(false)

  return (
    <>
      <div className="header">
        <div className="container px-0">
          <div className="header__nav">
            <div className="header__left">
              <a href="/">
                <img src={logoForNavbar} alt="Logo" />
              </a>
              <NavSearch />
            </div>
            <nav className="header__right">
              <ul>
                {menu.map((item, index) => {
                  return (
                    <HeaderOptions
                      key={index}
                      Icon={ICON_OPTIONS[index]}
                      title={item.label}
                      url={item.href}
                      childs={item.childs}
                      ajaxRequest={item.ajax}
                      isMobile={['Conocimiento', 'Comunicación'].includes(
                        item.label
                      )}
                      badgeCount={
                        item.label === 'Comunicación' &&
                        (notificationsCount || messagesCount)
                      }
                    />
                  )
                })}
                <UserOptions
                  image={image}
                  name={fullName}
                  adminUrl={linkAdmin}
                  impersonateUrl={linkImpersonate}
                  defaultNetwork={defaultNetwork}
                  knowledgeAuth={linkKnowledgeArea}
                  routeKnowledge={routeKnowledgeArea}
                />
                {MenuDrawer && (
                  <li className="d-md-none">
                    <a
                      href="/"
                      className={'header__option mobile'}
                      onClick={(e) => {
                        e.preventDefault()
                        setShowDrawer(!showDrawer)
                      }}
                    >
                      <MenuIcon />
                    </a>
                  </li>
                )}
              </ul>
            </nav>
          </div>
        </div>
      </div>
      <Suspense fallback={null}>
        <MenuDrawer
          items={[
            ...menu,
            {
              label: 'Conocimiento',
              href: 'Conocimiento',
              img: '/images/navbar/market-place.svg',
              ajax: 0,
              childs: [],
            },
          ]}
          icons={ICON_OPTIONS}
          isOpen={showDrawer}
          closeDrawer={() => setShowDrawer(false)}
        />
      </Suspense>
    </>
  )
}

export default Header