diff --git a/src/App.js b/src/App.js index 3784575..7fcaa55 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,11 @@ -import logo from './logo.svg'; import './App.css'; +import NavBar from './components/Navbar'; +import 'bootstrap/dist/css/bootstrap.min.css'; function App() { return ( - <div className="App"> - <header className="App-header"> - <img src={logo} className="App-logo" alt="logo" /> - <p> - Edit <code>src/App.js</code> and save to reload. - </p> - <a - className="App-link" - href="https://reactjs.org" - target="_blank" - rel="noopener noreferrer" - > - Learn React - </a> - </header> + <div className ="App"> + <NavBar /> </div> ); } diff --git a/src/components/Navbar.js b/src/components/Navbar.js index 0c9a075..c745341 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -1,27 +1,52 @@ import Container from 'react-bootstrap/Container'; import Nav from 'react-bootstrap/Nav'; import Navbar from 'react-bootstrap/Navbar'; -import { useState } from "react"; +import { useState, useEffect} from "react"; +import logo from '../assets/img/logo.svg'; +import navIcon1 from '../assets/img/nav-icon1.svg'; +import navIcon3 from '../assets/img/nav-icon2.svg'; +import navIcon2 from '../assets/img/nav-icon3.svg'; + const NavBar = () => { + const [activeLink, setActiveLink] = useState('home'); + const [scrolled, setScrolled] = useState(false); +//check for scrolling + useEffect(() => { + const onScroll = () => { + if (window.scrollY > 50) { + setScrolled(true); + } else { + setScrolled(false); + } + } + + window.addEventListener("scroll", onScroll); + // remove event listener when components unmounts + return () => window.removeEventListener("scroll", onScroll); + }, []) + + const onUpdateLink = (value) => { + setActiveLink(value) + } return ( - <Navbar expand="lg"> + <Navbar expand="lg" className= {scrolled ? "scrolled": ""}> <Container> <Navbar.Brand href="#home"> - <img src={''} alt="logo" /> + <img src={logo} alt="logo" /> </Navbar.Brand> <Navbar.Toggle/> <Navbar.Collapse id="basic-navbar-nav"> <Nav className="me-auto"> - <Nav.Link href="#home">Home</Nav.Link> - <Nav.Link href="#skills">skills</Nav.Link> - <Nav.Link href="#projects">Projects</Nav.Link> + <Nav.Link href="#home" className={activeLink === 'home' ? 'active navbar-link': 'navbar-link'} onClick={() => onUpdateLink('home')}>Home</Nav.Link> + <Nav.Link href="#skills" className={activeLink === 'home' ? 'active navbar-link': 'navbar-link'} onClick={() => onUpdateLink('skills')}>skills</Nav.Link> + <Nav.Link href="#projects" className={activeLink === 'home' ? 'active navbar-link': 'navbar-link'} onClick={() => onUpdateLink('projects')}>Projects</Nav.Link> </Nav> <span className="navbar-text"> <div className="social-icon"> - <a href="#"><img src={} alt="" /></a> - <a href="#"><img src={} alt="" /></a> - <a href="#"><img src={} alt="" /></a> + <a href="#"><img src={navIcon1} alt="nav-icon1" /></a> + <a href="#"><img src={navIcon2} alt="nav-icon2" /></a> + <a href="#"><img src={navIcon3} alt="nav-icon3" /></a> </div> <button className="vvd" onClick={() => console.log('connect')}> <span>Let's connect!</span>