Scribd
Upload
17 views

Nav

This React component defines a Navbar component that controls the visibility of a navigation menu. It uses the useState hook to toggle a class that controls the display of the nav menu. Functions are defined to show and hide the navbar by changing the active class. The navbar contains links to different pages and sections, and buttons to toggle the menu open/closed.

Uploaded by

sryukthi24
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
17 views

Nav

This React component defines a Navbar component that controls the visibility of a navigation menu. It uses the useState hook to toggle a class that controls the display of the nav menu. Functions are defined to show and hide the navbar by changing the active class. The navbar contains links to different pages and sections, and buttons to toggle the menu open/closed.

Uploaded by

sryukthi24
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

import React, {useState} from 'react';

import "./navbar.css";
import {MdOutlineTravelExplore} from 'react-icons/md';
import {AiFillCloseCircle} from 'react-icons/ai';
import {TbGridDots} from 'react-icons/tb';
const Navbar = () => {
const [active, setActive] = useState('navBar')
//function to show navbar
const showNav =() => {
setActive('navBar activeNavbar')
}
//function to remove navbar
const removeNavbar=()=> {
setActive('navBar');
}

return (
<section className='navBarSection'>
<header className='header flex'>

<div className='logoDiv'>
<a href='p' className="logo flex">
<h1><MdOutlineTravelExplore className="icon"/> TRAVEL.</h1>
</a>
</div>

<div className={active}>
<ul className="navLists ">
<li className="navItem">
<a href="a" className="navLink">Home</a>
</li>

<li className="navItem">
<a href="a" className="navLink">Packages
</a>
</li>

<li className="navItem">
<a href="b" className="navLink">Shop
</a>
</li>

<li className="navItem">
<a href="c" className="navLink">About</a>
</li>

<li className="navItem">
<a href="d" className="navLink">Pages</a>
</li>

<li className="navItem">
<a href="e" className="navLink">News</a>
</li>

<li className="navItem">
<a href="f" className="navLink">Contact</a>
</li>
<button className='btn'>
<a href="a" >Book Now </a>
</button>
</ul>
<div onClick={removeNavbar}
className="closeNavbar"></div>
<AiFillCloseCircle className="icon"/>
</div>
<div onClick={showNav} className="toggleNavbar">
<TbGridDots className="icon"/>
</div>
</header>
</section>
)
}
export default Navbar

You might also like