Scribd
Upload
2 views

navbar

This document contains a React component for a navigation bar. It includes state management for toggling the menu and links to different pages such as Home, About, Services, and Contact. The component utilizes images for the logo and toggle button, and applies conditional rendering for the menu display.

Uploaded by

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

navbar

This document contains a React component for a navigation bar. It includes state management for toggling the menu and links to different pages such as Home, About, Services, and Contact. The component utilizes images for the logo and toggle button, and applies conditional rendering for the menu display.

Uploaded by

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

import { Link } from "react-router-dom";

import React , {useState} from 'react';

//images
import NavBarLogo from '../Photos/NavBarLogo.png';
import Toggle from '../Photos/Toggle.png';

export default function NavBar(){


const [menuOpen , setMenuOpen] = useState(false);

const toggleMenu =()=> {


setMenuOpen(!menuOpen);
};

return(
<nav className="navbar">
<div className="navbar-container">
<Link to="/" className="navbar-logo">
<img src={NavBarLogo} alt='logo' className='navbar-logo-img'/>
</Link>
<img
src={Toggle}
className='navbar-toggle'
onClick={toggleMenu}
alt='toggle'
/>
<ul className={`navbar-menu ${menuOpen ? 'open' : ''}`}>
<li className="navbar-item">
<Link onClick={toggleMenu} to="/" className="navbar-
link">Home</Link>
</li>
<li className="navbar-item">
<Link to="/about" className="navbar-link">About</Link>
</li>
<li className="navbar-item">
<Link to="/services" className="navbar-link">Services</Link>
</li>
<li className="navbar-item">
<Link to="/contact" className="navbar-link">Contact</Link>
</li>
</ul>
</div>
</nav>
)
}

You might also like