Scribd
Upload
8 views2 pages

Code

The document contains a React component for a responsive navigation bar. It includes functionality for logo click navigation, dynamic class changes based on scroll position, and responsive behavior for screen sizes. The navigation bar features links to Home, About, Contact, and Login pages.

Uploaded by

tiolupopo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
8 views2 pages

Code

The document contains a React component for a responsive navigation bar. It includes functionality for logo click navigation, dynamic class changes based on scroll position, and responsive behavior for screen sizes. The navigation bar features links to Home, About, Contact, and Login pages.

Uploaded by

tiolupopo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

import { useEffect, useState } from "react";

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


const Navbar = () => {
const [scrolled, setScrolled] = useState(false)
const navScr = document.querySelector('.navbar')

const navigate = useNavigate()

const logoClick = () => {


navigate('/')
}

useEffect(()=>{
const logo = document.querySelector('.logo')
logo.addEventListener('click',logoClick)
},[navigate])

useEffect(() => {
const dropNav = document.querySelector('.navbar-collapse')
const handleScreenSize = (match) => {
if(match){
dropNav.classList.add('dropnav')
}else{
dropNav.classList.remove('dropnav')
}
}
const mediaQuery = window.matchMedia('(max-width: 880px)')
handleScreenSize(mediaQuery.matches)
mediaQuery.addListener(handleScreenSize)
},[])

window.addEventListener('scroll', () => {
if(window.scrollY >= 50){
setScrolled(true)
} else if(window.scrollY < 50 ){
setScrolled(false)
}
if(scrolled === true){
navScr.classList.add('nav-scroll')

}else{
navScr.classList.remove('nav-scroll')

}
})
return(

<nav className="navbar sticky-top navbar-expand-lg bg-body-tertiary" >


<div className="container-fluid">
<div className="navbar-brand logo" >
<img src="/src/assets/react.svg" alt="Logo" className="d-inline-block align-
text-top "/>
Project
</div>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-
bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-
expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
<li className="nav-item">
<Link className="nav-link active" aria-current="page" to="/">Home</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/Clock">About</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/Contact">Contact</Link>
</li>
<li className="nav-item">
<button className="login-btn btn"><Link to="/Login">Login</Link></button>
</li>
</ul>

</div>
</div>
<script>

</script>
</nav>

);
}
export default Navbar

You might also like