47 lines
1.9 KiB
TypeScript
47 lines
1.9 KiB
TypeScript
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 |