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

added wrapper and navbar

Browse Source
This commit is contained in:
mgerb42
2017-02-02 23:56:05 +00:00
committed by Mitchell Gerber
parent 73bd161685
commit 5f14578f86
16 changed files with 128 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/Wrapper.js Normal file
View File

@@ -0,0 +1,23 @@
import React from 'react';
import Navbar from './components/Navbar/Navbar';
//styling
import './scss/index.scss';
export default class Wrapper extends React.Component {
render() {
return (
<div>
<Navbar/>
<div className="content">
{this.props.children}
</div>
</div>
);
}
}
Wrapper.propTypes = {
children: React.PropTypes.node,
};

32
app/app.js
View File

@@ -2,39 +2,17 @@ import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import Wrapper from './Wrapper';
import NotFound from './pages/NotFound/NotFound';
//pages
import Home from './pages/Home';
import New from './pages/New';
import Default from './pages/Default';
//components
import Navbar from './components/Navbar';
//styling
import './scss/index.scss';
class Wrapper extends React.Component {
render() {
return (
<div>
<Navbar/>
{this.props.children}
</div>
);
}
}
Wrapper.propTypes = {
children: React.PropTypes.node,
};
import Home from './pages/Home/Home';
ReactDOM.render(
<Router history={browserHistory}>
<Route path="/" component={Wrapper}>
<IndexRoute component={Home}/>
<Route path="/new" component={New}/>
<Route path="*" component={Default}/>
<Route path="*" component={NotFound}/>
</Route>
</Router>
, document.getElementById('app'));

0
app/components/Footer.js
View File

7
app/components/Navbar.js → app/components/Navbar/Navbar.js
View File

@@ -1,13 +1,16 @@
import React from 'react';
import { Link } from 'react-router';
import './Navbar.scss';
export default class Navbar extends React.Component {
render() {
return (
<div className="Navbar">
<Link to="/" className="Navbar__item" onlyActiveOnIndex activeClassName="active">Home</Link>
<Link to="/new" className="Navbar__item" activeClassName="active">New</Link>
<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>
);
}

47
app/components/Navbar/Navbar.scss Normal file
View File

@@ -0,0 +1,47 @@
@import '../../scss/variables';
.Navbar {
position: fixed;
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;
}
.Navbar__header {
min-height: 100px;
display: flex;
align-items: center;
justify-content: center;
background-color: $gray2;
}
.Navbar__item {
min-height: 50px;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: $white;
transition: background-color 0.1s linear;
&:hover {
background-color: $gray1;
}
& + .Navbar__item {
border-top: 1px solid $gray1;
}
}
.Navbar__item--active {
padding-left: 4px;
border-right: 4px solid $primaryBlue;
}

0
app/pages/Home.js → app/pages/Home/Home.js
View File

12
app/pages/New.js
View File

@@ -1,12 +0,0 @@
import React from 'react';
export default class New extends React.Component {
render() {
return (
<div>
Test new page
</div>
);
}
}

5
app/pages/Default.js → app/pages/NotFound/NotFound.js
View File

@@ -1,10 +1,11 @@
import React from 'react';
import './NotFound.scss';
export default class Default extends React.Component {
render() {
return (
<div className="Default">
404
<div className="NotFound">
404 Not Found
</div>
);
}

9
app/scss/Default.scss → app/pages/NotFound/NotFound.scss
View File

@@ -1,9 +1,8 @@
.Default {
.NotFound {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 5em;
justify-content: center;
font-size: 20px;
}

5
app/scss/Home.scss
View File

@@ -1,5 +0,0 @@
.Home {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}

34
app/scss/Navbar.scss
View File

@@ -1,34 +0,0 @@
.Navbar {
position: fixed;
top: 0px;
display: flex;
align-items: center;
width: 100%;
height: $navbarHeight;
background-color: darken(white, 5%);
border-bottom: 1px solid darken(white, 10%);
.active {
background-color: darken(white, 2%);
}
}
.Navbar__item {
align-self: stretch;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
background-color: white;
color: gray;
cursor: pointer;
text-decoration: none;
&:hover {
background-color: darken(white, 2%);
}
& + .Navbar__item {
border-left: 1px solid darken(white, 5%);
}
}

5
app/scss/index.scss
View File

@@ -1,8 +1,3 @@
@import '../assets/normalize.css';
@import './variables.scss';
// import all css files
@import './style.scss';
@import './Navbar.scss';
@import './Default.scss';
@import './Home.scss';

10
app/scss/style.scss
View File

@@ -1,3 +1,11 @@
body {
padding-top: $navbarHeight;
background-color: $gray1;
color: $white;
padding-left: $navbarWidth;
}
.content {
padding: 10px;
height: 100%;
width: 100%;
}

14
app/scss/variables.scss
View File

@@ -1 +1,13 @@
$navbarHeight: 50px;
$navbarWidth: 200px;
// colors
$primaryBlue: #42adf4;
$white: darken(white, 10%);
$gray1: #686a6e;
$gray2: #424549;
$gray3: #36393e;
$gray4: #2e3136;
$gray5: #282b30;
$gray6: #1e2124;

2
package.json
View File

@@ -22,7 +22,7 @@
"eslint-plugin-react": "^6.8.0",
"extract-text-webpack-plugin": "2.0.0-rc.1",
"html-webpack-plugin": "^2.24.1",
"node-sass": "^4.1.1",
"node-sass": "^4.5.0",
"postcss-loader": "^1.2.1",
"react": "^15.4.1",
"react-dom": "^15.4.1",

43
yarn.lock
View File

@@ -898,8 +898,8 @@ batch@0.5.3:
resolved "https://registry.yarnpkg.com/batch/-/batch-0.5.3.tgz#3f3414f380321743bfc1042f9a83ff1d5824d464"
bcrypt-pbkdf@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.0.tgz#3ca76b85241c7170bf7d9703e7b9aa74630040d4"
version "1.0.1"
resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz#63bc5dcb61331b92bc05fd528953c33462a06f8d"
dependencies:
tweetnacl "^0.14.3"
@@ -1077,18 +1077,17 @@ camelcase@^3.0.0:
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
caniuse-api@^1.5.2:
version "1.5.2"
resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.5.2.tgz#8f393c682f661c0a997b77bba6e826483fb3600e"
version "1.5.3"
resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.5.3.tgz#5018e674b51c393e4d50614275dc017e27c4a2a2"
dependencies:
browserslist "^1.0.1"
caniuse-db "^1.0.30000346"
lodash.memoize "^4.1.0"
lodash.uniq "^4.3.0"
shelljs "^0.7.0"
caniuse-db@^1.0.30000346, caniuse-db@^1.0.30000617, caniuse-db@^1.0.30000618:
version "1.0.30000618"
resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000618.tgz#821258ff484f662864f28ffbcf849a6247acf1fa"
version "1.0.30000619"
resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000619.tgz#bffaa8150637c3182d3914a9718369b079299529"
caseless@~0.11.0:
version "0.11.0"
@@ -1992,8 +1991,8 @@ faye-websocket@~0.11.0:
websocket-driver ">=0.5.1"
fbjs@^0.8.1, fbjs@^0.8.4:
version "0.8.8"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.8.tgz#02f1b6e0ea0d46c24e0b51a2d24df069563a5ad6"
version "0.8.9"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.9.tgz#180247fbd347dcc9004517b904f865400a0c8f14"
dependencies:
core-js "^1.0.0"
isomorphic-fetch "^2.1.1"
@@ -2823,10 +2822,6 @@ lodash.clonedeep@^4.3.2:
version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
lodash.indexof@^4.0.5:
version "4.0.5"
resolved "https://registry.yarnpkg.com/lodash.indexof/-/lodash.indexof-4.0.5.tgz#53714adc2cddd6ed87638f893aa9b6c24e31ef3c"
lodash.memoize@^4.1.0:
version "4.1.2"
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -2884,10 +2879,8 @@ map-obj@^1.0.0, map-obj@^1.0.1:
resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
math-expression-evaluator@^1.2.14:
version "1.2.15"
resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.15.tgz#38dc5f0194c5bf5ff1c690ad4c4b64df71ac0187"
dependencies:
lodash.indexof "^4.0.5"
version "1.2.16"
resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.16.tgz#b357fa1ca9faefb8e48d10c14ef2bcb2d9f0a7c9"
media-typer@0.3.0:
version "0.3.0"
@@ -3076,8 +3069,8 @@ node-libs-browser@^2.0.0:
vm-browserify "0.0.4"
node-pre-gyp@^0.6.29:
version "0.6.32"
resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.32.tgz#fc452b376e7319b3d255f5f34853ef6fd8fe1fd5"
version "0.6.33"
resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.33.tgz#640ac55198f6a925972e0c16c4ac26a034d5ecc9"
dependencies:
mkdirp "~0.5.1"
nopt "~3.0.6"
@@ -3089,9 +3082,9 @@ node-pre-gyp@^0.6.29:
tar "~2.2.1"
tar-pack "~3.3.0"
node-sass@^4.1.1:
version "4.4.0"
resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.4.0.tgz#ff08ff2fded2a1d0bee270e8ed1275f7bc9c5a16"
node-sass@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.5.0.tgz#532e37bad0ce587348c831535dbc98ea4289508b"
dependencies:
async-foreach "^0.1.3"
chalk "^1.1.1"
@@ -4144,7 +4137,7 @@ sha.js@^2.3.6:
dependencies:
inherits "^2.0.1"
shelljs@^0.7.0, shelljs@^0.7.5:
shelljs@^0.7.5:
version "0.7.6"
resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.6.tgz#379cccfb56b91c8601e4793356eb5382924de9ad"
dependencies:
@@ -4630,8 +4623,8 @@ wbuf@^1.1.0, wbuf@^1.4.0:
minimalistic-assert "^1.0.0"
webpack-dev-middleware@^1.9.0:
version "1.9.0"
resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.9.0.tgz#a1c67a3dfd8a5c5d62740aa0babe61758b4c84aa"
version "1.10.0"
resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.10.0.tgz#7d5be2651e692fddfafd8aaed177c16ff51f0eb8"
dependencies:
memory-fs "~0.4.1"
mime "^1.3.4"