Removed Page Transition for now.

public/components/App.jsx

@@ -31,11 +31,25 @@ import Footer from './footer/Footer';
 import Routes, { RouteWrapper } from './page/Routes';
 import Favicon from './Favicon';
 
+//Routes Definitions
+const AppRoutes = (props) => {
+  return (
+    <React.Fragment>
+      <Routes onEntering={ props.onEntering }>
+        <RouteWrapper exact path="/" page={ () => import('@pages/home/HomePage') } />
+        <RouteWrapper exact path="/contact" page={ () => import('@pages/contact/ContactPage') } />
+
+        <RouteWrapper exact path="/legal/privacy" page={ () => import('@pages/legal/privacy/PrivacyPolicyPage') } />
+      </Routes>
+    </React.Fragment>
+  );
+};
+
+
+//Main App Wrapper
 class App extends React.Component {
   constructor(props) {
     super(props);
-
-    this.onEnteringBound = this.onEntering.bind(this);
   }
 
   onEntering() {
@@ -47,19 +61,11 @@ class App extends React.Component {
   }
 
   render() {
-    let { className, menuOpen, modal } = this.props;
+    let { className } = this.props;
 
     //Generate base clazzes
     let clazz = "c-app";
 
-    //Menu Open?
-    if(menuOpen) clazz += " is-menu-open ";
-
-    //Fetch the modal from the store
-    let modalObject;
-    if(modal.open) clazz += " is-modal-open";
-    if(modal.modal) modalObject = modal.modal;
-
     //Append any other clazzes there may be.
     if(className) clazz += " " + className;
 
@@ -72,27 +78,11 @@ class App extends React.Component {
         <div className={ clazz } ref="app">
           <Favicon />
           <Header />
-
+          <AppRoutes onEntering={ () => this.onEntering() } />
-          { modalObject }
-
-          {/* Routes */}
-          <Routes onEntering={ this.onEnteringBound }>
-            <RouteWrapper exact path="/" page={ () => import('@pages/home/HomePage') } />
-            <RouteWrapper exact path="/contact" page={ () => import('@pages/contact/ContactPage') } />
-
-            <RouteWrapper exact path="/legal/privacy" page={ () => import('@pages/legal/privacy/PrivacyPolicyPage') } />
-          </Routes>
         </div>
       </RouterType>
     );
   }
 }
 
-const mapStateToProps = function(state) {
+export default App;
-  return {
-    menuOpen: state.menu.open,
-    modal: state.modal
-  }
-}
-
-export default connect(mapStateToProps)(App);

public/components/page/Routes.jsx

@@ -65,7 +65,7 @@ class Routes extends React.Component {
 
     return (
       <Route>
-        <TransitionGroup className="o-page-transition__container">
+        {/*<TransitionGroup className="o-page-transition__container">
           <CSSTransition
             key={ location.pathname }
             timeout={1000}
@@ -73,12 +73,12 @@ class Routes extends React.Component {
             mountOnEnter={ true }
             unmountOnExit={ true }
             onEntering={ this.props.onEntering }
-          >
+          >*/}
             <Switch location={ location }>
               { children }
             </Switch>
-          </CSSTransition>
+          {/*</CSSTransition>
-        </TransitionGroup>
+        </TransitionGroup>*/}
       </Route>
     );
   }

public/styles/components/_app.scss

@@ -8,14 +8,4 @@
  *  Version:
  *    1.0.0 - 2018/05/03
  */
-.c-app {
+.c-app {}
-  position: relative;
-  height: 100vh;
-  width: 100%;
-  overflow-y: scroll;
-  overflow-x: hidden;
-
-  &.is-modal-open {
-    overflow: hidden;
-  }
-}

public/styles/components/_main.scss

@@ -5,10 +5,4 @@
  *  Version:
  *    1.0.0 - 2018/05/07
  */
-.c-main {
+.c-main {}
-  min-height: 100vh;
-  width: 100%;
-
-  @extend %t-flexbox;
-  @include t-flex-direction(column);
-}

public/styles/elements/_body.scss

@@ -11,10 +11,7 @@
 body {
   margin: 0;
   padding: 0;
-  width: 100vw;
-  height: 100vh;
 
   font-family: $s-font--stack-default;
   font-size: $s-font--size--base;
-  overflow: hidden;//Really makes the transitions feel smoother
 }