update styles

src/NavigationBar.css

@@ -0,0 +1,11 @@
+nav {
+    position: fixed;
+}
+
+nav.bottom {
+    bottom: 0;
+}
+
+nav.top {
+    top: 0;
+}

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) :
                 (

src/Page.js

@@ -1,24 +1,15 @@
 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>
         )
     }
 }
 
-const RoutePage = (props) => {
-    return (
-        <Route exact={props.exact} path={props.path} render={() => (
-            <Page { ...props } />
-        )} />
-    )
-}
-
-export default RoutePage;
+export default Page;

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%);
+}

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 })

src/index.css

@@ -1,5 +1,9 @@
+* {
+  box-sizing: border-box;
+}
+
 body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
-}
+}

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>