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

formatting

Browse Source
This commit is contained in:
Mitchell
2017-08-26 21:23:05 -05:00
parent cc0be44b54
commit 689d1b4df0
10 changed files with 115 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,42 +1,41 @@
@import '../../scss/variables';
.Navbar__nav {
height: 40px;
border-bottom: 1px solid $light3;
display: flex;
background-color: $light1;
height: 40px;
border-bottom: 1px solid $light3;
display: flex;
background-color: $light1;
}
.Navbar__header {
display: flex;
height: 50px;
align-items: center;
justify-content: space-between;
padding-left: 10px;
padding-right: 10px;
background-color: $dark2;
display: flex;
height: 50px;
align-items: center;
justify-content: space-between;
padding-left: 10px;
padding-right: 10px;
background-color: $dark2;
}
.Navbar__item {
color: $fontPrimary;
text-decoration: none;
width: 100px;
transition: all 0.1s linear;
text-align: center;
line-height: 40px;
&:hover {
color: $fontSecondary;
border-bottom: 2px solid $primaryBlue;
}
& + .Navbar__item {
border-left: 1px solid $light3;
}
color: $fontPrimary;
text-decoration: none;
width: 100px;
transition: all 0.1s linear;
text-align: center;
line-height: 40px;
&:hover {
color: $fontSecondary;
border-bottom: 2px solid $primaryBlue;
}
& + .Navbar__item {
border-left: 1px solid $light3;
}
}
.Navbar__item--active {
color: $fontSecondary;
border-bottom: 2px solid $primaryBlue;
color: $fontSecondary;
border-bottom: 2px solid $primaryBlue;
}

63
app/components/Navbar/Navbar.tsx
View File

@@ -3,36 +3,45 @@ import { NavLink } from 'react-router-dom';
import './Navbar.scss';
interface Props {
}
interface Props {}
interface State {
}
interface State {}
export default class Navbar extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
}
constructor(props: Props) {
super(props);
}
render() {
return (
<div className="Navbar">
<div className="Navbar__header">
<span>React Starter</span>
<a href="https://github.com/mgerb/react-webpack2-seed">
GitHub
<i className="fa fa-github" aria-hidden="true" />
</a>
</div>
render() {
return (
<div className="Navbar">
<div className="Navbar__header">
<span>React Starter</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">
<NavLink to="/" className="Navbar__item" exact activeClassName="Navbar__item--active">Home</NavLink>
<NavLink to="/new" className="Navbar__item" exact activeClassName="Navbar__item--active">New</NavLink>
</div>
</div>
);
}
<div className="Navbar__nav">
<NavLink
to="/"
className="Navbar__item"
exact
activeClassName="Navbar__item--active"
>
Home
</NavLink>
<NavLink
to="/new"
className="Navbar__item"
exact
activeClassName="Navbar__item--active"
>
New
</NavLink>
</div>
</div>
);
}
}