.jpg)
Navbar.jsx
import React, { useState } from "react";
import styles from "./NavBar.module.css";
import {
AiOutlineUser,
AiOutlineSearch,
AiOutlineMenu,
AiOutlineClose,
} from "react-icons/ai";
import Logo from "../../images/logo.png";
const NavBar = () => {
const [nav, setNav] = useState(false) // making nav responsive
return (
<header className={styles.navbar}>
<img src={Logo} alt="logo" />
<nav>
<ul className={nav ? [styles.menu, styles.active].join(' ') : [styles.menu]}>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/">About</a>
</li>
<li>
<a href="/"> Book</a>
</li>
<li>
<a href="/">Sign up</a>
</li>
<li>
<AiOutlineSearch size={22} style={{marginTop:'12px'}}/>
</li>
<li>
<AiOutlineUser size={22} style={{marginTop:'12px'}}/>
</li>
</ul>
</nav>
<div onClick={()=> setNav(!nav)} className={styles.mobile_btn}>
{nav ? <AiOutlineClose size={30} /> : <AiOutlineMenu size={30} />}
</div>
</header>
);
};
export default NavBar;
StyleSheet
.navbar{
width: 100%;
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.mobile_btn{
display: none;
}
.menu{
display: flex;
align-items: center;
}
.menu li{
padding: 1rem;
}
.menu a{
font-size: 1rem;
font-weight: 550;
}
@media screen and (max-width: 720px){
.mobile_btn{
display: block;
position: absolute;
right: 1rem;
cursor: pointer;
z-index: 10;
}
.menu{
display: flex;
position: fixed;
flex-direction: column;
left: -100%;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100vh;
background-color: #f8f8f8;
z-index: 10;
transition: left 1s;
}
.active{
left: 0;
}
.navbar a{
font-size: .8rem;
}
}
