From 0ae556c058b965c028889260f857dc456d6910eb Mon Sep 17 00:00:00 2001
From: Mathias Desloges <freakdev@gmail.com>
Date: Thu, 26 Oct 2017 00:41:47 +0200
Subject: [PATCH] update styles

---
 src/App.css           | 28 ---------------
 src/NavigationBar.css | 11 ++++++
 src/NavigationBar.js  |  8 +++--
 src/Page.js           | 13 ++-----
 src/PageManager.css   | 81 +++++++++++++++++++++++++++++++++++++++++++
 src/PageManager.js    | 19 ++++++----
 src/index.css         |  6 +++-
 src/index.js          |  5 +--
 8 files changed, 120 insertions(+), 51 deletions(-)
 delete mode 100644 src/App.css
 create mode 100644 src/NavigationBar.css
 create mode 100644 src/PageManager.css

diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index c5c6e8a..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
-
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
-}
-
-.App-title {
-  font-size: 1.5em;
-}
-
-.App-intro {
-  font-size: large;
-}
-
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
diff --git a/src/NavigationBar.css b/src/NavigationBar.css
new file mode 100644
index 0000000..5790a2a
--- /dev/null
+++ b/src/NavigationBar.css
@@ -0,0 +1,11 @@
+nav {
+    position: fixed;
+}
+
+nav.bottom {
+    bottom: 0;
+}
+
+nav.top {
+    top: 0;
+}
\ No newline at end of file
diff --git a/src/NavigationBar.js b/src/NavigationBar.js
index 7b6dbbb..7707107 100644
--- a/src/NavigationBar.js
+++ b/src/NavigationBar.js
@@ -1,10 +1,12 @@
 import React from 'react'
 
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom'
 
-export default ({ pages, ...props }) => {
+import './NavigationBar.css'
+
+export default ({ pages, position, ...props }) => {
     return (
-        <nav>{
+        <nav className={'navbar ' + position}>{
             props.render ? 
                 props.render(pages) :
                 (
diff --git a/src/Page.js b/src/Page.js
index 12af1c5..6e0e139 100644
--- a/src/Page.js
+++ b/src/Page.js
@@ -1,11 +1,10 @@
 import React, { Component } from 'react';
-import { Route } from 'react-router-dom';
 
 export class Page extends Component {
     render() {
         const props = this.props
         return (
-            <div className="page">
+            <div style={ props.style } className="page">
                 <h1>{props.name}</h1>
                 { props.children }
             </div>
@@ -13,12 +12,4 @@ export class Page extends Component {
     }
 }
 
-const RoutePage = (props) => {
-    return (
-        <Route exact={props.exact} path={props.path} render={() => (
-            <Page { ...props } />
-        )} />
-    )
-}
-
-export default RoutePage;
+export default Page;
diff --git a/src/PageManager.css b/src/PageManager.css
new file mode 100644
index 0000000..025c790
--- /dev/null
+++ b/src/PageManager.css
@@ -0,0 +1,81 @@
+.page-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.page-container .page-inner {
+  position: absolute;
+  top: 0;
+  left: 0;  
+  height: 100%;
+  width: 100%;  
+}
+
+.page-appear,
+.page-enter {
+  /* opacity: 0; */
+}
+
+.page-appear-active,
+.page-enter-active {
+  transition: all 0.5s;
+  /* opacity: 1; */
+}
+
+.page-exit {
+  transition: all 0.5s;
+  /* opacity: 1; */
+  transform: translateX(0);
+}
+
+.page-exit-active {
+  /* opacity: 0; */
+}
+
+
+
+
+.left .page-appear,
+.left .page-enter {
+  transform: translateX(-100%);
+}
+
+.left .page-appear-active,
+.left .page-enter-active {
+  transform: translateX(0)
+}
+
+.left .page-exit,
+.left .page-exit {
+  transform: translateX(0)
+}
+
+.left .page-exit-active {
+  transform: translateX(100%);
+}
+
+
+
+
+.right .page-appear,
+.right .page-enter {
+  transform: translateX(100%);
+}
+
+.right .page-appear-active,
+.right .page-enter-active {
+  transform: translateX(0);
+}
+
+
+.right .page-exit {
+  transform: translateX(0);
+}
+
+.right .page-exit-active {
+  transform: translateX(-100%);
+}
\ No newline at end of file
diff --git a/src/PageManager.js b/src/PageManager.js
index af2418f..524e2ac 100644
--- a/src/PageManager.js
+++ b/src/PageManager.js
@@ -1,14 +1,14 @@
 import React, { Component } from 'react';
 
 import { withRouter, Switch } from 'react-router-dom'
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router, Route } from 'react-router-dom';
 
 import { TransitionGroup, CSSTransition } from 'react-transition-group'
 
 import Page from './Page'
 import NavigationBar from './NavigationBar'
 
-import './App.css';
+import './PageManager.css';
 
 export class PageManager extends Component {
 	state = {
@@ -38,7 +38,7 @@ export class PageManager extends Component {
 		const currentKey = location.pathname.split("/")[1] || "/";
 		const timeout = { enter: 500, exit: 500 };
 		let pages = []
-		const routes = React.Children.map(children, child => {
+		const routes = children.filter( child => {
 			if (child.type === Page) {
 				pages.push({ name: child.props.name, path: child.props.path })
 				return child
@@ -57,11 +57,18 @@ export class PageManager extends Component {
 					classNames="page"
 					appear
 				>
-					<div className={"page-inner"}>
+					<section className={"page-inner"}>
 						<Switch location={location}>
-							{ routes }
+						{
+							React.Children.map(routes, route => {
+								const { exact, path, ...props } = route.props
+								return (
+									<Route exact={exact} path={path} render={() => React.cloneElement(route, { ...props })} />											
+								)
+							})
+						}
 						</Switch>
-					</div>
+					</section>
 				</CSSTransition>
 				{ React.Children.map(navbars, (navbar) => {
 					return React.cloneElement(navbar, { pages })
diff --git a/src/index.css b/src/index.css
index b4cc725..46db592 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,9 @@
+* {
+  box-sizing: border-box;
+}
+
 body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
-}
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 3a94e33..5d0feac 100644
--- a/src/index.js
+++ b/src/index.js
@@ -12,8 +12,9 @@ import registerServiceWorker from './registerServiceWorker';
 ReactDOM.render(
     <div>
         <PageManager>
-            <Page name="home" exact path="/" />
-            <Page name="page 2" exact path="/two" />
+            <Page style={{ background: 'red' }} name="home" exact path="/" />
+            <Page style={{ background: 'green' }} name="page 2" exact path="/two" />
+            <Page style={{ background: 'blue' }} name="page 3" exact path="/three" />
             <NavigationBar position="bottom" />
         </PageManager>
     </div>