Animated hamburger menu working

server/public/assets/css/style.css

@@ -2223,6 +2223,82 @@ nav ul li:hover, nav ul li.active {
   display: none;
 }
 
+/* HAMBURGER */
+
+.settings-hamburger {
+ cursor: pointer;
+}
+
+.hamburger-sidenav {
+  width: 24px;
+  height: 24px;
+  position: relative;
+  margin: 24px 20px 16px 20px;
+  -webkit-transform: rotate(0deg);
+  -moz-transform: rotate(0deg);
+  -o-transform: rotate(0deg);
+  transform: rotate(0deg);
+  -webkit-transition: .5s ease-in-out;
+  -moz-transition: .5s ease-in-out;
+  -o-transition: .5s ease-in-out;
+  transition: .5s ease-in-out;
+  cursor: pointer;
+}
+
+.control-list li:last-child:hover {
+  background-color: rgba(0,0,0,0.6);
+}
+
+.hamburger-sidenav span {
+  display: block;
+  position: absolute;
+  height: 2px;
+  width: 100%;
+  background: white;
+  border-radius: 0px;
+  opacity: 1;
+  -webkit-transform: rotate(0deg);
+  -moz-transform: rotate(0deg);
+  -o-transform: rotate(0deg);
+  transform: rotate(0deg);
+  -webkit-transition: .25s ease-in-out;
+  -moz-transition: .25s ease-in-out;
+  -o-transition: .25s ease-in-out;
+  transition: .25s ease-in-out;
+}
+
+.hamburger-sidenav span:nth-child(1) {
+  top: 2px;
+}
+
+.hamburger-sidenav span:nth-child(2) {
+  top: 8px;
+}
+
+.hamburger-sidenav span:nth-child(3) {
+  top: 14px;
+}
+
+.hamburger-sidenav.open span:nth-child(1) {
+  top: 8px;
+  -webkit-transform: rotate(135deg);
+  -moz-transform: rotate(135deg);
+  -o-transform: rotate(135deg);
+  transform: rotate(135deg);
+}
+
+.hamburger-sidenav.open span:nth-child(2) {
+  opacity: 0;
+}
+
+.hamburger-sidenav.open span:nth-child(3) {
+  top: 8px;
+  -webkit-transform: rotate(-135deg);
+  -moz-transform: rotate(-135deg);
+  -o-transform: rotate(-135deg);
+  transform: rotate(-135deg);
+}
+
 /***************************************************************************
 ****************************************************************************
 ********************* Screen size specific rules ***************************
@@ -2298,6 +2374,10 @@ nav ul li:hover, nav ul li.active {
       width: 66%;
     }
 
+    .hamburger-sidenav {
+        margin: 20px 10px 12px 10px;
+    }
+
     #main_section_frontpage {
       margin-top: -20px;
       padding-top: 0px;

server/public/assets/js/listeners.js

@@ -196,7 +196,25 @@ function init(){
     $("#settings").sideNav({
         menuWidth: 310,
         edge: side,
-        closeOnClick: false
+        closeOnClick: false,
+        onOpen: function(el) {
+            if(!$(".hamburger-sidenav").hasClass("open")) {
+                $(".hamburger-sidenav").addClass("open");
+            }
+            $('*[id*=sidenav-overlay]:visible').each(function(i) {
+                if(i > 0) {
+                    this.remove();
+                }
+            });
+        },
+        onClose: function(el) {
+            $(".hamburger-sidenav").removeClass("open");
+            $('*[id*=sidenav-overlay]:visible').each(function(i) {
+                if(i > 0) {
+                    this.remove();
+                }
+            });
+        },
     });
     $('.collapsible').collapsible({
         accordion : true

server/public/layouts/channel.handlebars

@@ -60,11 +60,15 @@
                                 <!--<span class="hover-text">Stir</span>-->
                             </a>
                         </li>
-                        <li>
+                        <li class="settings-hamburger" data-activates="settings-bar" id="settings">
-                            <a class="nav-btn" href="#settings" data-activates="settings-bar" id="settings">
+                            <!--<a class="nav-btn" href="#settings" data-activates="settings-bar" id="settings">
                                 <i class="material-icons">menu</i>
-                                <!--<span class="hover-text">Conf</span>-->
+                            </a>-->
-                            </a>
+                            <div class="hamburger-sidenav">
+                              <span></span>
+                              <span></span>
+                              <span></span>
+                            </div>
                         </li>
                     </ul>
                     <ul class="side-nav" id="settings-bar">

server/public/partials/panel.handlebars

@@ -1,5 +1,5 @@
 <li class="no-padding">
-    <div class="nav-btn close-settings clickable" title="Close" id="closeSettings">
+    <div class="nav-btn close-settings clickable hide-on-small-only" title="Close" id="closeSettings">
         <i class="material-icons auto-margin">close</i>
     </div>
     <ul class="collapsible collapsible-accordion">