animate the nav thing

Author: nchan0154

src/components/public/menu/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styles from './menu.scss';
 
 const Menu = props => (
-  <div className={props.active ? styles.active : ''}>
+  <div id="menu" className={props.active ? styles.active : ''}>
     <div className={styles.overlay} onClick={props.toggle}></div>
     <div className={styles.menu}>
       <div className={styles.background}></div>

src/components/public/nav/ic_menu.svg

@@ -32,10 +32,15 @@ class Nav extends React.Component {
             <LogoType />
           </div>
           <div className={styles.menu}>
-            <Menu active={this.state.active} toggle={this.toggleActive} />
-            <button className={styles.toggle}  onClick={this.toggleActive} title="Toggle menu">
+            <button
+              className={`${styles.toggle} ${this.state.active ? styles.active : ''}`}
+              onClick={this.toggleActive}
+              aria-expanded={this.state.active}
+              title="Toggle menu"
+              aria-controls="menu">
               <MenuIcon/>
             </button>
+            <Menu active={this.state.active} toggle={this.toggleActive} />
           </div>
         </div>
       </nav>

src/components/public/nav/index.js

@@ -45,6 +45,31 @@
     outline: none;
     color: $primary;
   }
+
+  svg, rect {
+    transform-origin: center;
+    transition: all 0.3s ease;
+  }
+
+  &.active {
+    rect:first-child {
+      transform-origin: top left;
+      transform: rotate(45deg) translateX(1.5px);
+    }
+
+    rect:nth-child(2) {
+      opacity: 0;
+    }
+
+    rect:nth-child(3) {
+      transform-origin: bottom left;
+      transform: rotate(-45deg) translateX(2.5px);
+    }
+
+    svg {
+      transform: rotate(90deg);
+    }
+  }
 }
 
 @media (min-width: 34em) {