react-spring demo: sliding nav

package.json

@@ -46,6 +46,7 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-helmet": "^5.2.0",
+    "react-spring": "^8.0.27",
     "rebass": "^3.1.1",
     "styled-components": "^5.0.0-beta.8"
   },

src/templates/postPage.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { useSpring, animated } from 'react-spring';
 import PropTypes from 'prop-types';
 import { graphql } from 'gatsby';
 import Layout from 'components/layout';
@@ -8,31 +9,44 @@ import { ResponsiveColumns } from 'containers/responsiveColumns';
 import PostColumn from './postPage/postColumn.css';
 import PostCard from './postPage/postCard.css';
 
-const PostPage = ({ data: { post, newer, older } }) => (
-  <Layout
-    pageTitle={post.frontmatter.title}
-    pageDescription={post.frontmatter.description}
-    pageImage={post.frontmatter.featuredImage.childImageSharp.fixed.src}
-  >
-    <ResponsiveColumns p={[0, '3em', '4em']} pb={['2em', '3em', '4em']}>
-      <TableOfContents tableOfContents={post.tableOfContents} />
-      <PostColumn className="wide">
-        <div className="post-date">{post.frontmatter.date}</div>
-        <div className="post-tags">
-          {post.frontmatter.tags.map((tag, i) => (
-            <span key={i}>#{tag}</span>
-          ))}
-        </div>
-        <PostCard
-          className="post-body"
-          m="20px 0"
-          dangerouslySetInnerHTML={{ __html: post.html }}
+const AnimatedTOC = animated(TableOfContents);
+
+const PostPage = ({ data: { post, newer, older } }) => {
+  const [isNavOpen, setNavOpen] = useState(false);
+  const navAnimation = useSpring({
+    transform: isNavOpen ? 'translate3d(0, 0, 0)' : 'translate3d(-200%, 0, 0)',
+  });
+
+  return (
+    <Layout
+      pageTitle={post.frontmatter.title}
+      pageDescription={post.frontmatter.description}
+      pageImage={post.frontmatter.featuredImage.childImageSharp.fixed.src}
+    >
+      <button onClick={() => setNavOpen(!isNavOpen)}>Menu</button>
+      <ResponsiveColumns p={[0, '3em', '4em']} pb={['2em', '3em', '4em']}>
+        <AnimatedTOC
+          style={navAnimation}
+          tableOfContents={post.tableOfContents}
         />
-        <Navigation newer={newer} older={older} />
-      </PostColumn>
-    </ResponsiveColumns>
-  </Layout>
-);
+        <PostColumn className="wide">
+          <div className="post-date">{post.frontmatter.date}</div>
+          <div className="post-tags">
+            {post.frontmatter.tags.map((tag, i) => (
+              <span key={i}>#{tag}</span>
+            ))}
+          </div>
+          <PostCard
+            className="post-body"
+            m="20px 0"
+            dangerouslySetInnerHTML={{ __html: post.html }}
+          />
+          <Navigation newer={newer} older={older} />
+        </PostColumn>
+      </ResponsiveColumns>
+    </Layout>
+  );
+};
 
 PostPage.propTypes = {
   data: PropTypes.shape({