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