From 2745963fa4a4c56eaa6a0c51dbee570cd9075caa Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sat, 16 Apr 2016 21:10:22 +0200
Subject: [PATCH] css only, animated menu icon

---
 _src/_assets/styl/hamburger.styl     | 47 ++++++++++++++++++++++++++++
 _src/_assets/styl/icons.styl         |  2 +-
 _src/_assets/styl/kremalicious3.styl |  1 +
 _src/_assets/styl/navigation.styl    | 16 +++++-----
 _src/_includes/header.html           |  9 +++---
 gulpfile.js                          |  2 +-
 6 files changed, 63 insertions(+), 14 deletions(-)
 create mode 100644 _src/_assets/styl/hamburger.styl

diff --git a/_src/_assets/styl/hamburger.styl b/_src/_assets/styl/hamburger.styl
new file mode 100644
index 00000000..7335d746
--- /dev/null
+++ b/_src/_assets/styl/hamburger.styl
@@ -0,0 +1,47 @@
+.hamburger
+    @extend .transition
+    width: 18px
+    height: 18px
+    position: relative
+    transform: rotate(0deg)
+    cursor: pointer
+    margin-top: 6px
+
+    span
+        @extend .transition
+        display: block
+        position: absolute
+        height: 3px
+        width: 100%
+        background: $text-color-light
+        border-radius: 20px
+        opacity: 1
+        left: 0
+        transform: rotate(0deg)
+
+        &:nth-child(1)
+            top: 0px
+            transform-origin: left center
+
+        &:nth-child(2)
+            top: 5px
+            transform-origin: left center
+
+        &:nth-child(3)
+            top: 10px
+            transform-origin: left center
+
+
+        // open state
+        .has-menu-open &
+            &:nth-child(1)
+                transform: rotate(45deg)
+                top: -1px
+
+            &:nth-child(2)
+                width: 0%
+                opacity: 0
+
+            &:nth-child(3)
+                transform: rotate(-45deg)
+                top: 12px
diff --git a/_src/_assets/styl/icons.styl b/_src/_assets/styl/icons.styl
index 685013ab..13a75ea3 100644
--- a/_src/_assets/styl/icons.styl
+++ b/_src/_assets/styl/icons.styl
@@ -6,12 +6,12 @@
 
 svg
     &.icon
+        @extend .transition
         height: 20px
         width: 20px
         display: inline-block
         fill: $text-color-light
         vertical-align: baseline
-        transition: all .2s ease-in-out
 
         .btn &
             height: 18px
diff --git a/_src/_assets/styl/kremalicious3.styl b/_src/_assets/styl/kremalicious3.styl
index 89f4013d..e3a00546 100644
--- a/_src/_assets/styl/kremalicious3.styl
+++ b/_src/_assets/styl/kremalicious3.styl
@@ -41,6 +41,7 @@
 // Components
 @import 'header'
 @import 'navigation'
+@import 'hamburger'
 @import 'search'
 @import 'tooltips'
 @import 'footer'
diff --git a/_src/_assets/styl/navigation.styl b/_src/_assets/styl/navigation.styl
index d16582a3..1894ee9f 100644
--- a/_src/_assets/styl/navigation.styl
+++ b/_src/_assets/styl/navigation.styl
@@ -18,14 +18,12 @@
     &:focus
         outline: 0
 
-    .icon
-        &.icon-entypo-menu
-            width: 24px
-            height: 24px
-
-    &:hover .icon,
-    &:focus .icon
-        fill: $link-color
+    &:hover,
+    &:focus
+        .icon
+            fill: $link-color
+        .hamburger span
+            background: $link-color
 
     &:active
         background: transparent
@@ -33,6 +31,8 @@
 
         .icon
             fill: darken($link-color, 30%)
+        .hamburger span
+            background: darken($link-color, 30%)
 
 .menu-btn
     margin-right: -.5em
diff --git a/_src/_includes/header.html b/_src/_includes/header.html
index a59dc110..c657870c 100644
--- a/_src/_includes/header.html
+++ b/_src/_includes/header.html
@@ -13,10 +13,11 @@
 
                 <nav role="navigation" class="nav-main grid__col">
                     <button type="button" class="menu-btn" data-toggle="tooltip" title="Menu">
-                        <svg class="icon icon-entypo icon-entypo-menu" role="img" aria-labelledby="title">
-                            <title id="title">Menu</title>
-                            <use xlink:href="/assets/img/sprite.svg#entypo-menu"></use>
-                        </svg>
+                        <div class="hamburger">
+                            <span></span>
+                            <span></span>
+                            <span></span>
+                        </div>
                     </button>
                 </nav>
 
diff --git a/gulpfile.js b/gulpfile.js
index dd9b794f..2d1d3d82 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -60,7 +60,7 @@ var ICONS = {
         dist: DIST + '/assets/img/',
         prefix: 'entypo-',
         icons: [
-            'twitter', 'facebook', 'google+', 'magnifying-glass', 'menu', 'rss', 'link', 'arrow-with-circle-down', 'forward', 'heart', 'info-with-circle', 'infinity', 'github', 'chevron-right', 'chevron-left', 'eye'
+            'twitter', 'facebook', 'google+', 'magnifying-glass', 'rss', 'link', 'arrow-with-circle-down', 'forward', 'heart', 'info-with-circle', 'infinity', 'github', 'chevron-right', 'chevron-left', 'eye'
         ]
     }
 }