From 3462c3e584c9216f23a19eb387b9cd12aa5c9b19 Mon Sep 17 00:00:00 2001
From: Dan Head <me@danielhead.com>
Date: Fri, 15 Jan 2021 21:03:24 +0000
Subject: [PATCH] feat(nav): add mobile transition

---
 src/components/nav-item.js | 13 ++++++++++---
 src/components/nav.js      |  8 +++++++-
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/nav-item.js b/src/components/nav-item.js
index 97b7d93..fcede2d 100644
--- a/src/components/nav-item.js
+++ b/src/components/nav-item.js
@@ -26,17 +26,24 @@ const ListItem = styled.li`
       display: flex;
     }
   }
+
+  @media (max-width: 30em) {
+    transform: ${props =>
+      props.open ? `translate3d(0, 0, 0)` : `translate3d(-100%, 0, 0)`};
+    transition: transform 0.3s ease-in-out
+      calc(0.3s + (${props => props.index} * 0.1s));
+  }
 `;
 
-export default function NavItem({ children, subNav, ...other }) {
+export default function NavItem({ children, subNav, index, open, ...other }) {
   const hasChildren = subNav && subNav.length > 0;
   return (
-    <ListItem>
+    <ListItem open={open} index={index}>
       <NavLink {...other}>{children}</NavLink>
       {hasChildren && (
         <SubList>
           {subNav.map((link, i) => (
-            <ListItem key={i}>
+            <ListItem key={i} index={i} open={open}>
               <NavLink to={link.to}>{link.title}</NavLink>
             </ListItem>
           ))}
diff --git a/src/components/nav.js b/src/components/nav.js
index 33cced6..8a3982f 100644
--- a/src/components/nav.js
+++ b/src/components/nav.js
@@ -119,7 +119,13 @@ export default function Nav({ data, open, setOpen }) {
         <Content>
           <List>
             {data.map((link, i) => (
-              <NavItem key={i} subNav={link.subNav} to={link.to}>
+              <NavItem
+                key={i}
+                index={i}
+                subNav={link.subNav}
+                to={link.to}
+                open={open}
+              >
                 {link.title}
               </NavItem>
             ))}