feat(styles.css-&&-scripts.js): animate hamburger on click

scripts.js

@@ -19,6 +19,7 @@ window.addEventListener('resize', () => {
     navigation.removeAttribute('style');
     navigation.classList.remove('show');
     burger.setAttribute('aria-expanded', 'false');
+    burger.classList.remove('open');
     document.body.removeAttribute('style');
 });
 
@@ -54,6 +55,7 @@ function desktopNavControls() {
 **/
 burger.addEventListener('click', () => {
     navigation.classList.toggle('show');
+    burger.classList.toggle('open');
     if (navigation.classList.contains('show')) {
         // Stops user from scrolling while nav is open
         document.body.style.overflow = 'hidden';

styles.css

@@ -459,6 +459,23 @@
             background-color: white;
 
             box-shadow: 3px 5px 19px 0px rgba(0, 0, 0, .41);
+
+            transition: all .3s;
+        }
+
+    /** Animate hamburger **/
+
+        .hamburger.open div[class|="hamburger"]:nth-of-type(1) {
+            transform: rotate(-35deg) scaleX(.5) translate(-55%, 0);
+        }
+
+        .hamburger.open div[class|="hamburger"]:nth-of-type(2) {
+            transform-origin: left;
+            transform: scaleX(.85);
+        }
+
+        .hamburger.open div[class|="hamburger"]:nth-of-type(3) {
+            transform: rotate(35deg) scaleX(.5) translate(-55%, 0);
         }
 
 /*** Footer Styles ***/