focalxaiinspection/src/lib/Components/Header/Header.js

Focalx AI Inspection

import React, {useState, useRef, useEffect} from 'react';
import { Link, useNavigate } from 'react-router-dom';
import useOnClickOutSide from '../../hooks/useOnClickOutSide';
import './Header.scss';


const Header = ({ logout }) => {
    const navigate = useNavigate();
    
    function handleLogout() {
        console.log('handleLogout called');
        logout();
        navigate('/login');
      }

    const [showMenu, setShowmenu] = useState(false);

    const onClick = () => {
        setShowmenu(true);
    }; 

    const closeOnClick = () => {
        setShowmenu(false);
    }; 

    const handleClose = () => {
        closeOnClick();
        setShowmenu('');
    };

    const refOutside = useRef();
    useOnClickOutSide(showMenu, refOutside, handleClose);

    const [scrolled, setScrolled] = useState(false);
    const headerRef = useRef(null);
    useEffect(() => {
        const handleScroll = () => {
          if (window.scrollY > 0) {
            setScrolled(true);
          } else {
            setScrolled(false);
          }
        };
      
        window.addEventListener('scroll', handleScroll);
      
        return () => {
          window.removeEventListener('scroll', handleScroll);
        };
      }, []);

  return (     
         <header ref={headerRef}  className={scrolled ? 'header-fixed' : ''}>
            <div className="header-wrap">
            <div onClick={onClick} className={showMenu ? 'hamburger d-none' : 'hamburger'}> 
              <img src={require('../../Assets/images/hamburger.svg').default} alt=""/>
            </div>
            <div onClick={closeOnClick} className={showMenu ? 'close-menu' : 'close-menu d-none'}><img src={require('../../Assets/images/arrow.svg').default} alt=""/></div>
            <div className="logo"><img src={require('../../Assets/images/sixt-logo.svg').default} alt=""/></div>
        </div>

        
        <div className={showMenu ? 'menu menu-open' : 'menu'}>
            <ul className="section-one">
                <li>
                    <Link to="" onClick={handleClose}>John Carter</Link>
                </li>
                <li>                   
                    <Link to="/" onClick={handleClose}>Dashboard</Link>
                </li>
                <li>
                    <Link to="/onboarding" onClick={handleClose}>New Inspection</Link>
                </li>            
                <li>
                    <Link to="/faqs" onClick={handleClose}>FAQ</Link>
                </li>
                <li>
                    <Link to="/contact-us" onClick={handleClose}>Contact Us</Link>
                </li>
                <li>                    
                    <Link to="/app-info" onClick={handleClose}>App Info</Link>
                </li>
                <li>
                    <Link to="/terms-of-use" onClick={handleClose}>Terms of use</Link>
                </li>            
                <li>
                    <Link to="/" onClick={handleLogout}>Logout</Link>
                </li>
            </ul>
        </div>
    </header>
  );
 };

export default Header;