mitchell/mjfs.us
1
0
Fork 0
mirror of https://github.com/mitchell/mjfs.us.git synced 2025-12-19 13:47:22 +00:00
Code Issues Projects Releases Packages Wiki Activity

Moved routes to its own component and folder; changed navbar css to be

Browse source 
used as intended; changed exprience css; version bump
This commit is contained in:
mitchelljfs 2018-07-15 22:40:29 -07:00
parent e4a4580ceb
commit ab5f6fb062
6 changed files with 70 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/components/Navbar/index.css
View file

@ -7,6 +7,12 @@
top: 0;
}
.navbar-small {
bottom: 0;
padding-bottom: 5px;
top: auto;
}
.navbar-button {
background-color: rgb(139, 191, 209);
border-radius: 2px;
@ -30,53 +36,48 @@
width: 52.5%;
}
.navbar-menu div {
.navbar-menu-button {
border-radius: 3px;
color: white;
float: left;
margin: 1% 2.5%;
overflow: hidden;
padding: 7px 0;
text-decoration: none;
text-overflow: ellipsis;
transition: background-color 0.2s, box-shadow 0.1s;
width: 20%;
}
.navbar-menu div:hover {
.navbar-menu-button:hover {
background-color: rgb(86, 95, 118);
}
.active-button div {
.active-button {
background-color: rgb(130, 160, 196);
box-shadow: 0 0 5px rgb(59, 64, 83) inset;
}
.active-button div:hover {
.active-button:hover {
background-color: rgb(139, 191, 209);
}
@media screen and (max-width: 500px) {
.navbar {
bottom: 0;
padding-bottom: 5px;
top: auto;
}
.navbar-menu {
margin: auto;
width: 75%;
}
.navbar-menu div {
.navbar-menu-button {
margin: 5px 0;
padding: 5px 0;
width: 100%;
}
.navbar-menu div:hover {
.navbar-menu-button:hover {
background-color: inherit;
}
.active-button div:hover {
.active-button:hover {
background-color: rgb(130, 160, 196);
}
}

35
src/components/Navbar/index.js
View file

@ -25,20 +25,37 @@ class Navbar extends React.Component<Props> {
}
changeMenuOn="500px"
largeMenuClassName="navbar"
smallMenuClassName="navbar"
smallMenuClassName="navbar navbar-small"
menu={
<div className="navbar-menu">
<NavLink activeClassName="active-button" exact to="/">
<div>Home</div>
<NavLink
className="navbar-menu-button"
activeClassName="active-button"
exact
to="/"
>
Home
</NavLink>
<NavLink activeClassName="active-button" to="/projects">
<div>Projects</div>
<NavLink
className="navbar-menu-button"
activeClassName="active-button"
to="/projects"
>
Projects
</NavLink>
<NavLink activeClassName="active-button" to="/experience">
<div>Experience</div>
<NavLink
className="navbar-menu-button"
activeClassName="active-button"
to="/experience"
>
Experience
</NavLink>
<NavLink activeClassName="active-button" to="/contact">
<div>Contact</div>
<NavLink
className="navbar-menu-button"
activeClassName="active-button"
to="/contact"
>
Contact
</NavLink>
</div>
}