add styled link animation

src/components/ModuleLayout/SidebarNav/StyledLink.tsx

@@ -1,9 +1,19 @@
-import styled, { css } from 'styled-components';
+import styled, { keyframes, css } from 'styled-components';
 import tw from 'twin.macro';
 import { Link } from 'gatsby';
 
 // Almost entirely copy pasted from https://gatsbyjs.org/ oops
 
+const showBar = keyframes`
+  from {
+    transform: translateX(-110px);
+  }
+
+  to {
+    transform: translateX(-92px);
+  }
+`;
+
 const StyledLink = styled.span`
   ${tw`focus:outline-none transition ease-in-out duration-150 hover:text-blue-700 focus:bg-blue-100 relative flex items-center px-6 py-3 text-sm leading-5`}
 
@@ -24,21 +34,22 @@ const StyledLink = styled.span`
     transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
   }
 
-  ${props =>
-    props.isActive &&
-    css`
-      &::after {
-        transform: ${props =>
-          props.isActive ? 'translateX(-92px)' : 'translateX(-100px)'};
-        width: 100px;
-        border-radius: 4px;
-        ${tw`bg-blue-600`}
-      }
-    `}
+  &::after {
+    transform: translateX(-110px);
+    width: 100px;
+    border-radius: 4px;
+    ${tw`bg-blue-600`}
+    ${({ isActive }) =>
+      isActive &&
+      css`
+        animation: ${showBar} 250ms forwards cubic-bezier(0.4, 0, 0.2, 1);
+      `}
+  }
 
   &::before {
-    transform: scale(0.1);
+    transform: ${({ isActive }) => (isActive ? 'scale(1)' : 'scale(0.1)')};
     border-radius: 100%;
+    ${({ isActive }) => isActive && tw`bg-blue-600`}
   }
 
   &:hover {

yarn.lock

@@ -6743,6 +6743,13 @@ gatsby-plugin-google-analytics@^2.3.10:
     "@babel/runtime" "^7.10.3"
     minimatch "3.0.4"
 
+gatsby-plugin-layout@^1.3.10:
+  version "1.3.10"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-layout/-/gatsby-plugin-layout-1.3.10.tgz#701312dc462da9b15c9abe6748d141a44cd26f73"
+  integrity sha512-iO+aDef4hzJVrIa+LrO3r2FzcM4OdMePb/sDKgmknAeN+sJKH735DdRbk/H/41UREM9rTdwdq+/oFxxlAo3Lmw==
+  dependencies:
+    "@babel/runtime" "^7.10.3"
+
 gatsby-plugin-manifest@^2.4.14:
   version "2.4.14"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-manifest/-/gatsby-plugin-manifest-2.4.14.tgz#9d82fbf81fc568860b1b3cc8cc0bf6cd8513b229"