Merge pull request #13 from jayfallon/responsive-header

added animation
jayfallon · Jul 30, 2019 · ed8ed93 · ed8ed93 · vercel · Jul 30, 2019
2 parents f5ca3fa + 47de805
commit ed8ed93
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/components/Page.js b/components/Page.js
@@ -23,13 +23,17 @@ class Page extends Component {
     });
   }
 
+  drawerCloseClickHandler = () => {
+    this.setState({sideDrawerOpen: false});
+  }
+
   render() {
     return(
       <ThemeProvider theme={Theme}>
         <StyledPage>
           <GlobalStyle />
           <Meta/>
-          <SideDrawer show={this.state.sideDrawerOpen}/>
+          <SideDrawer show={this.state.sideDrawerOpen} hide={this.drawerCloseClickHandler}/>
           <a href="#main__content" className="main__content--link">Skip to main content</a>
           <Header drawerClickHandler={this.drawerToggleClickHandler}/>
           <main id="main__content" role="main">

diff --git a/components/SideDrawer/index.js b/components/SideDrawer/index.js
@@ -7,7 +7,7 @@ const SideDrawer = props => {
         drawerClasses = ['open'];
     }
     return (
-        <SideDrawerStyles className={drawerClasses}>
+        <SideDrawerStyles className={drawerClasses} onClick={props.hide}>
             <ul className="sideDrawer__nav">
                 <li>
                     <Link href="/"><a title="Jay's home page">Home Page</a></Link>

diff --git a/components/SideDrawer/styles.js b/components/SideDrawer/styles.js
@@ -2,7 +2,7 @@ import styled from 'styled-components'
 
 const SideDrawerStyles = styled.nav`
     transform: translateX(-100%);
-    transition: transform 0.2 ease-in-out;
+    transition: transform 0.2s ease-in-out;
     &.open {
         transform: translateX(0);
     }