nickorlow/personal-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tab based nav

Browse source
This commit is contained in:
Nicholas Orlowsky 2023-03-12 17:39:56 -05:00
parent a2a4defc87
commit aeef385c85
9 changed files with 109 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/components/navbar/Navbar.css Normal file
View file

@ -0,0 +1,21 @@
.navbar-selected-pill {
background-color: white;
width: 40px;
height: 3px;
border-radius: 5px;
transition-duration: .5s;
}
.navbar-unselected-pill {
width: 0px;
}
.no-blue-link {
color: white;
}
.no-blue-link:hover {
transition-duration: .5s;
color: grey;
text-decoration: none;
}

34
src/components/navbar/Navbar.tsx Normal file
View file

@ -0,0 +1,34 @@
import React from "react";
import "./Navbar.css";
import {Link, useLocation} from "react-router-dom";
export default function Navbar() {
const location = useLocation();
return (
<div style={{maxWidth:"100%"}} className={"d-flex justify-content-center align-items-center " + (location.pathname === "/" ? "fade-up-d3s" : "")} >
<div className={"d-flex flex-row justify-content-around"} style={{width: 700}}>
<div className={"d-flex flex-column justify-content-center align-items-center"}>
<Link to={"/home"} className={"mb-0 no-blue-link"}>Home</Link>
<div className={"navbar-selected-pill " + ((location.pathname === "/" || location.pathname === "/home") ? "" : "navbar-unselected-pill")}/>
</div>
<div className={"d-flex flex-column justify-content-center align-items-center"}>
<Link to={"/about"} className={"mb-0 no-blue-link"}>About</Link>
<div className={"navbar-selected-pill " + (location.pathname === "/about" ? "" : "navbar-unselected-pill")}/>
</div>
<div className={"d-flex flex-column justify-content-center align-items-center"}>
<Link to={"/blogs"} className={"mb-0 no-blue-link"}>Blog</Link>
<div className={"navbar-selected-pill " + (location.pathname === "/blogs" ? "" : "navbar-unselected-pill")}/>
</div>
<div className={"d-flex flex-column justify-content-center align-items-center"}>
<Link to={"/projects"} className={"mb-0 no-blue-link"}>Projects</Link>
<div className={"navbar-selected-pill " + (location.pathname === "/projects" ? "" : "navbar-unselected-pill")}/>
</div>
<div className={"d-flex flex-column justify-content-center align-items-center"}>
<Link to={"/hobbies"} className={"mb-0 no-blue-link"}>Hobbies</Link>
<div className={"navbar-selected-pill " + (location.pathname === "/hobbies" ? "" : "navbar-unselected-pill")}/>
</div>
</div>
</div>
)
}