Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */

import React, { useEffect, useState } from 'react'

import SearchIcon from '@mui/icons-material/Search'

import HomeIcon from '@mui/icons-material/Home'

import SupervisorAccountIcon from '@mui/icons-material/SupervisorAccount'

import BusinessCenterIcon from '@mui/icons-material/BusinessCenter'

import ChatIcon from '@mui/icons-material/Chat'

import NotificationsIcon from '@mui/icons-material/Notifications'

import HeaderOptions from './HeaderOptions'

import './Header.scss'

const ICON_OPTIONS = [

  HomeIcon,

  SupervisorAccountIcon,

  BusinessCenterIcon,

  ChatIcon,

  NotificationsIcon

]

const Header = ({ navbarVars }) => {

  const {

    image,

    fullName,

    companyVars,

    isChatPage,

    linkAdmin,

    linkImpersonate,

    routeCheckSession,

    logoForNavbar,

    menu: menuItems

  } = navbarVars;

  const [navbarOpen, setNavbarOpen] = useState(false);

  const [sessionImage, setSessionImage] = useState(null)

  const [showMobileSearch, setShowMobileSearch] = useState(false)

  const [loading, setLoading] = useState(false);

  useEffect(() => {

    let timer;

    if (!loading) {

      timer = setTimeout(() => checkSessionImage(), 1000);

    }

    return () => {

      clearTimeout(timer);

    };

  }, [loading])

  const checkSessionImage = async () => {

    setLoading(true);

    const session_image = sessionStorage.getItem('user_session_image')

    if (session_image) {

      await setSessionImage(session_image)

      sessionStorage.removeItem('user_session_image')

    }

    setLoading(false);

  }

  const handleDisplayMobileSearch = () => {

    if (window.innerWidth < 768) {

      setShowMobileSearch(true)

    }

  }

  return (

    <div className='header'>

      <div className='container'>

        <div className='header__nav'>

          <div className='header__left'>

            <img src={logoForNavbar} alt='Logo' />

            <div

              className={`header__search ${showMobileSearch && 'show'}`}

              onClick={handleDisplayMobileSearch}

            >

              <SearchIcon />

              <input

                type='text'

                placeholder='Search'

              />

            </div>

          </div>

          <nav className={`header__right ${showMobileSearch && 'd-none'}`}>

            <ul>

              {menuItems.map((item, index) => {

                return (

                  <HeaderOptions

                    key={index}

                    Icon={ICON_OPTIONS[index]}

                    title={item.label}

                    url={item.href}

                  />

                )

              })}

            </ul>

          </nav>

        </div>

      </div>

    </div>

  )

}

export default Header