From 19a31d6869c65c57cda0f4be4662992240e1f375 Mon Sep 17 00:00:00 2001
From: Dan Head <me@danielhead.com>
Date: Thu, 14 Jan 2021 22:54:57 +0000
Subject: [PATCH] feat(logo): add transition

---
 src/components/header-logo.js | 5 +++++
 src/components/nav.js         | 2 ++
 src/pages/index.js            | 2 +-
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/header-logo.js b/src/components/header-logo.js
index 8076bed..e7e4a54 100644
--- a/src/components/header-logo.js
+++ b/src/components/header-logo.js
@@ -14,6 +14,8 @@ const Top = styled.div`
   filter: grayscale(100%);
   opacity: 0;
   transform: translate3d(0, 50%, 0);
+  transition: opacity 0.5s ease-in, filter 0.5s ease-in 0.5s,
+    transform 0.5s ease-in 0.5s;
 
   path:first-child {
     fill: var(--theme-color-primary);
@@ -35,6 +37,7 @@ const Top = styled.div`
 const Middle = styled.div`
   width: 100vw;
   opacity: 0;
+  transition: opacity 0.5s ease-in 0.75s;
   ${props =>
     props.visible &&
     css`
@@ -48,6 +51,8 @@ const Bottom = styled.div`
   filter: grayscale(100%);
   opacity: 0;
   transform: translate3d(0, -50%, 0) rotate(180deg);
+  transition: opacity 0.5s ease-in, filter 0.5s ease-in 0.5s,
+    transform 0.5s ease-in 0.5s;
 
   path:first-child {
     fill: var(--theme-color-dark);
diff --git a/src/components/nav.js b/src/components/nav.js
index 7c0af59..2bde062 100644
--- a/src/components/nav.js
+++ b/src/components/nav.js
@@ -77,10 +77,12 @@ const Heading = styled(Link)`
 const Content = styled.nav`
   flex-grow: 1;
   margin: var(--spacing-y-lg) var(--spacing-x-md);
+  overflow-y: auto;
 
   @media (min-width: 30em) {
     display: flex;
     margin: 0;
+    overflow-y: visible;
   }
 `;
 
diff --git a/src/pages/index.js b/src/pages/index.js
index 5c36ac1..19a7019 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -13,7 +13,7 @@ export default function Index({ data }) {
   return (
     <Layout>
       <Header image={data.headerImage.childImageSharp.fluid}>
-        <HeaderLogo />
+        <HeaderLogo transition={true} />
       </Header>
       <Section>
         <Text>