feat: transitions animations direction

new-lamassu-admin/src/components/layout/Header.js

@@ -15,6 +15,8 @@ import styles from './Header.styles'
 const useStyles = makeStyles(styles)
 
 const Subheader = ({ item, classes }) => {
+  const [prev, setPrev] = useState(null)
+
   return (
     <div className={classes.subheader}>
       <div className={classes.content}>
@@ -23,9 +25,14 @@ const Subheader = ({ item, classes }) => {
             {item.children.map((it, idx) => (
               <li key={idx} className={classes.subheaderLi}>
                 <NavLink
-                  to={it.route}
+                  to={{ pathname: it.route, state: { prev: prev } }}
                   className={classes.subheaderLink}
-                  activeClassName={classes.activeSubheaderLink}>
+                  activeClassName={classes.activeSubheaderLink}
+                  isActive={match => {
+                    if (!match) return false
+                    setPrev(it.route)
+                    return true
+                  }}>
                   {it.label}
                 </NavLink>
               </li>

new-lamassu-admin/src/routing/routes.js

@@ -1,5 +1,6 @@
 import Fade from '@material-ui/core/Fade'
 import Slide from '@material-ui/core/Slide'
+import { makeStyles } from '@material-ui/core/styles'
 import * as R from 'ramda'
 import React, { useContext } from 'react'
 import {
@@ -35,6 +36,14 @@ import WalletSettings from 'src/pages/Wallet/Wallet'
 import Wizard from 'src/pages/Wizard'
 import { namespaces } from 'src/utils/config'
 
+const useStyles = makeStyles({
+  wrapper: {
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column'
+  }
+})
+
 const tree = [
   {
     key: 'transactions',
@@ -244,6 +253,8 @@ const getParent = route =>
   )(flattened)
 
 const Routes = () => {
+  const classes = useStyles()
+
   const history = useHistory()
   const location = useLocation()
   const action = history.action
@@ -256,10 +267,18 @@ const Routes = () => {
     history.push('/wizard')
   }
 
-  const Transition =
+  const Transition = action === 'PUSH' && location.state ? Slide : Fade
-    action === 'PUSH' && location.pathname !== '/transactions' ? Slide : Fade
 
-  // const props = Transition === Slide ? { direction: 'right' } : {}
+  const transitionProps =
+    Transition === Slide
+      ? {
+          direction:
+            R.findIndex(R.propEq('route', location.state.prev))(leafRoutes) >
+            R.findIndex(R.propEq('route', location.pathname))(leafRoutes)
+              ? 'right'
+              : 'left'
+        }
+      : { timeout: 400 }
 
   return (
     <Switch>
@@ -271,14 +290,17 @@ const Routes = () => {
       {flattened.map(({ route, component: Page, key }) => (
         <Route path={route} key={key}>
           <Transition
-            direction="left"
+            className={classes.wrapper}
+            {...transitionProps}
             in={location.pathname === route}
             mountOnEnter
-            unmountOnExit>
+            unmountOnExit
-            <div>
+            children={
-              <Page name={key} action={action} />
+              <div>
-            </div>
+                <Page name={key} />
-          </Transition>
+              </div>
+            }
+          />
         </Route>
       ))}
       <Route path="/404" />