feat: make footer part of page transitions

Otherwise, the footer would move instantly to its final position
before the3 page transition finishes, which is weird.

Author: satazor

www/pages/contacts/Contacts.module.css

@@ -1,5 +1,6 @@
 @import "../../shared/styles/imports";
 
 .contacts {
+    min-height: 200vh; /* Just to simulate scroll */
     padding: 2.5rem 0;
 }

www/shared/react/main-layout/MainLayout.js

@@ -12,10 +12,17 @@ const MainLayout = ({ children, className, ...rest }) => (
         <Header className={ styles.header } />
 
         <div className={ styles.content }>
-            <PageSwapper node={ children } nodeKey={ children.key } />
+            <PageSwapper
+                node={ children }
+                nodeKey={ children.key }>
+                { ({ node }) => (
+                    <>
+                        <div className={ styles.page }>{ node }</div>
+                        <Footer className={ styles.footer } />
+                    </>
+                ) }
+            </PageSwapper>
         </div>
-
-        <Footer className={ styles.footer } />
     </div>
 );
 

www/shared/react/main-layout/MainLayout.module.css

@@ -3,7 +3,7 @@
 .mainLayout {
     min-height: 100%;
     display: flex;
-    flex: 1;
+    flex: 1 0;
     flex-direction: column;
     background-color: var(--color-white);
 
@@ -12,10 +12,16 @@
     }
 
     & .content {
+        display: flex;
         flex: 1 0;
-    }
+        flex-direction: column;
 
-    & .footer {
-        flex: 0 0 auto;
+        & .page {
+            flex: 1 0;
+        }
+
+        & .footer {
+            flex: 0 0 auto;
+        }
     }
 }

www/shared/react/page-swapper/PageSwapper.js

@@ -7,20 +7,27 @@ import PageTransition from './page-transition';
 
 import styles from './PageSwapper.module.css';
 
-const PageSwapper = ({ className, ...rest }) => {
+const PageSwapper = ({ children, className, ...rest }) => {
     const { updateScroll } = useRouterScroll();
 
     return (
         <RawPageSwapper
             { ...rest }
             updateScroll={ updateScroll }
             className={ classNames(styles.pageSwapper, className) }>
-            { (props) => <PageTransition { ...props } /> }
+            { ({ node, ...rest }) => {
+                if (typeof children === 'function') {
+                    node = children({ node, ...rest });
+                }
+
+                return <PageTransition node={ node } { ...rest } />;
+            } }
         </RawPageSwapper>
     );
 };
 
 PageSwapper.propTypes = {
+    children: PropTypes.func,
     className: PropTypes.string,
 };