mitchell/react-starter
1
0
Fork 0
mirror of https://github.com/mgerb/react-starter synced 2026-01-10 09:02:49 +00:00
Code Issues Releases Wiki Activity

refactoring - added font awesome

Browse Source
This commit is contained in:
mgerb42
2017-02-13 21:17:10 +00:00
committed by Mitchell Gerber
parent 5f14578f86
commit ca7abf1def
21 changed files with 5141 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/components/Navbar/Navbar.js
View File

@@ -8,9 +8,17 @@ export default class Navbar extends React.Component {
render() {
return (
<div className="Navbar">
<div className="Navbar__header">Title</div>
<Link to="/" className="Navbar__item" onlyActiveOnIndex activeClassName="Navbar__item--active">Home</Link>
<Link to="/new" className="Navbar__item" activeClassName="Navbar__item--active">New</Link>
<div className="Navbar__header">
<span>React Webpack 2 Seed</span>
<a href="https://github.com/mgerb/react-webpack2-seed">GitHub
<i className="fa fa-github" aria-hidden="true"/>
</a>
</div>
<div className="Navbar__nav">
<Link to="/" className="Navbar__item" onlyActiveOnIndex activeClassName="Navbar__item--active">Home</Link>
<Link to="/new" className="Navbar__item" activeClassName="Navbar__item--active">New</Link>
</div>
</div>
);
}

41
app/components/Navbar/Navbar.scss
View File

@@ -1,47 +1,42 @@
@import '../../scss/variables';
.Navbar {
position: fixed;
.Navbar__nav {
height: 40px;
border-bottom: 1px solid $light3;
display: flex;
flex-direction: column;
top: 0;
left: 0;
height: 100%;
width: $navbarWidth;
background-color: $gray2;
border-right: 1px solid darken($gray2, 2%);
overflow-y: auto;
background-color: $light1;
}
.Navbar__header {
min-height: 100px;
display: flex;
height: 50px;
align-items: center;
justify-content: center;
background-color: $gray2;
justify-content: space-between;
padding-left: 10px;
padding-right: 10px;
background-color: $dark2;
}
.Navbar__item {
min-height: 50px;
color: $fontPrimary;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
transition: all 0.1s linear;
text-align: center;
color: $white;
transition: background-color 0.1s linear;
line-height: 40px;
&:hover {
background-color: $gray1;
color: $fontSecondary;
border-bottom: 2px solid $primaryBlue;
}
& + .Navbar__item {
border-top: 1px solid $gray1;
border-left: 1px solid $light3;
}
}
.Navbar__item--active {
padding-left: 4px;
border-right: 4px solid $primaryBlue;
color: $fontSecondary;
border-bottom: 2px solid $primaryBlue;
}