import React, { useState } from 'react'
import {GiHamburgerMenu} from 'react-icons/gi';
import {MdOutlineRestaurantMenu} from 'react-icons/md';
import './Navbar.css'


const Navbar = () => {
  const [toggle_menu, set_toggle_menu] = useState(false);

  return (
    <nav className="app_navbar">
      <div className="navbar_logo">
        <img src="jefes_logo.jpg" alt=""/>
      </div>
      <ul className="navbar_links">
        <li className="p_opensans"><a href="#home">Home</a></li>
        <li className="p_opensans"><a href="#about">About</a></li>
        <li className="p_opensans"><a href="#menu"></a>Menu</li>
        <li className="p_opensans"><a href="#awards">Awards</a></li>
        <li className="p_opensans"><a href="#contact">Contact</a></li>
      </ul>  
      <div className="navbar_login">
        <a href="#login" className='p_opensans'>Log In / Register</a>
        <div className='p_opensans_table'></div>
        <a href="/" className='p_opensans_table'>Book Table</a>
      </div>
      <div className="navbar_small_screen">
        <GiHamburgerMenu color="#fff" fontSize={27} onClick={() => set_toggle_menu(true)}/>
        {toggle_menu && (
          <div className="navbar_small_screen_overlay flex_center slide_bottom">
            <MdOutlineRestaurantMenu fontSize={27} className='overlay_close' onClick={() => set_toggle_menu(false)} />
            <ul className="navbar_small_screen_links">
              <li className="p_opensans"><a href="#home">Home</a></li>
              <li className="p_opensans"><a href="#about">About</a></li>
              <li className="p_opensans"><a href="#menu"></a>Menu</li>
              <li className="p_opensans"><a href="#awards">Awards</a></li>
              <li className="p_opensans"><a href="#contact">Contact</a></li>
            </ul>  
          </div>
        )}
        
      </div>
    </nav>
  )
}

export default Navbar