You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
2.6 KiB
87 lines
2.6 KiB
import React, { useState, useEffect } from "react";
|
|
import { Container, Nav, Navbar } from "react-bootstrap";
|
|
import logo from "../assets/img/logo.svg";
|
|
|
|
import navIcon from "../assets/img/github.svg";
|
|
import linkedin from "../assets/img/linkedln.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 component unmounts
|
|
return () => window.removeEventListener("scroll", onScroll);
|
|
}, []);
|
|
|
|
const onUpdateLink = (value) => {
|
|
setActiveLink(value);
|
|
};
|
|
|
|
return (
|
|
<Navbar expand="lg" className={scrolled ? "scrolled" : ""}>
|
|
<Container>
|
|
<Navbar.Brand href="#home">
|
|
<img src={logo} alt="Logo" />
|
|
</Navbar.Brand>
|
|
<Navbar.Toggle />
|
|
<Navbar.Collapse id="basic-navbar-nav">
|
|
<Nav className="me-auto">
|
|
<Nav.Link
|
|
href="#home"
|
|
className={
|
|
activeLink === "home" ? "active navbar-link" : "navbar-link"
|
|
}
|
|
onClick={() => onUpdateLink("home")}
|
|
>
|
|
Home
|
|
</Nav.Link>
|
|
<Nav.Link
|
|
href="#skills"
|
|
className={
|
|
activeLink === "skills" ? "active navbar-link" : "navbar-link"
|
|
}
|
|
onClick={() => onUpdateLink("skills")}
|
|
>
|
|
Skills
|
|
</Nav.Link>
|
|
<Nav.Link
|
|
href="#projects"
|
|
className={
|
|
activeLink === "projects" ? "active navbar-link" : "navbar-link"
|
|
}
|
|
onClick={() => onUpdateLink("projects")}
|
|
>
|
|
Projects
|
|
</Nav.Link>
|
|
</Nav>
|
|
<span className="navbar-text">
|
|
<div className="social-icon">
|
|
<a href="https://github.com/khang2005">
|
|
<img src={navIcon} alt="github Icon" />
|
|
</a>
|
|
<a href="https://www.linkedin.com/in/khang-tran-4ba6b3285/">
|
|
<img src={linkedin} alt="linkedin Icon" />
|
|
</a>
|
|
</div>
|
|
<button className="vvd" onClick={() => console.log("connect")}>
|
|
<span>Let's connect!</span>
|
|
</button>
|
|
</span>
|
|
</Navbar.Collapse>
|
|
</Container>
|
|
</Navbar>
|
|
);
|
|
};
|
|
|
|
export default NavBar;
|