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 CalendarViewDayIcon from '@mui/icons-material/CalendarViewDay'
import HeaderOptions from './HeaderOptions'
import './Header.scss'

const ICON_OPTIONS = [
  HomeIcon,
  SupervisorAccountIcon,
  BusinessCenterIcon,
  ChatIcon,
  NotificationsIcon,
  CalendarViewDayIcon
]

const Header = ({ logoForNavbar, menu: menuItems }) => {

  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