File size: 2,818 Bytes
f07bf73 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
import React, { useState } from "react";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import Container from "react-bootstrap/Container";
import logo from "../Assets/logo.png";
import Button from "react-bootstrap/Button";
import { Link } from "react-router-dom";
import { CgGitFork } from "react-icons/cg";
import { ImBlog } from "react-icons/im";
import {
AiFillStar,
AiOutlineHome,
AiOutlineFundProjectionScreen,
AiOutlineUser,
} from "react-icons/ai";
import { CgFileDocument } from "react-icons/cg";
function NavBar() {
const [expand, updateExpanded] = useState(false);
const [navColour, updateNavbar] = useState(false);
function scrollHandler() {
if (window.scrollY >= 20) {
updateNavbar(true);
} else {
updateNavbar(false);
}
}
window.addEventListener("scroll", scrollHandler);
return (
<Navbar
expanded={expand}
fixed="top"
expand="md"
className={navColour ? "sticky" : "navbar"}
>
<Container>
<Navbar.Brand href="/" className="d-flex">
<h1>MS</h1>
</Navbar.Brand>
<Navbar.Toggle
aria-controls="responsive-navbar-nav"
onClick={() => {
updateExpanded(expand ? false : "expanded");
}}
>
<span></span>
<span></span>
<span></span>
</Navbar.Toggle>
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="ms-auto" defaultActiveKey="#home">
<Nav.Item>
<Nav.Link as={Link} to="/" onClick={() => updateExpanded(false)}>
<AiOutlineHome style={{ marginBottom: "2px" }} /> Home
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link
as={Link}
to="/about"
onClick={() => updateExpanded(false)}
>
<AiOutlineUser style={{ marginBottom: "2px" }} /> About
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link
as={Link}
to="/project"
onClick={() => updateExpanded(false)}
>
<AiOutlineFundProjectionScreen
style={{ marginBottom: "2px" }}
/>{" "}
Projects
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link
as={Link}
to="/resume"
onClick={() => updateExpanded(false)}
>
<CgFileDocument style={{ marginBottom: "2px" }} /> Resume
</Nav.Link>
</Nav.Item>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
}
export default NavBar;
|