Improve hamburger css

.idea/jsLibraryMappings.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="JavaScriptLibraryMappings">
-    <file url="PROJECT" libraries="{all, hammer, jQuery-2.0.0, jquery, jquery-1.11.1, jquery-3.3.1, jquery-migrate-3.0.0, jquery-ui, jquery.mobile-1.4.5, jquery.mobile-1.5.0-alpha.1}" />
+    <file url="PROJECT" libraries="{jquery-3.3.1}" />
   </component>
 </project>

assets/css/hamburger.css

@@ -41,30 +41,43 @@
     bottom: 0;
 }
 
-/* Rotate first bar */
+/* Mouse hovers the hamburger */
 
-.change #bar1 {
+.change-hover #bar2-1 {
+    background-color: #ee293d;
+    transform: translate(-5px, -50%);
+}
+
+.change-hover #bar2-2 {
+    background-color: #ee293d;
+    transform: translate(5px, -50%);
+}
+
+.change-hover #bar1, .change-hover #bar3 {
+    background-color: #1a5dad;
+}
+
+
+/* Mouse clics the hamburger */
+
+.change-clic #bar1 {
     -webkit-transform: rotate(-45deg) translate(-10px, 10px);
     transform: rotate(-45deg) translate(-8px, 8px);
 }
 
-/* Fade out the second bar */
+.change-clic #bar2-1 {
-
-.change #bar2-1 {
     opacity: 0;
     -webkit-transform: translateX(-50%);
     transform: translateX(-50%);
 }
 
-.change #bar2-2 {
+.change-clic #bar2-2 {
     opacity: 0;
     -webkit-transform: translateX(50%);
     transform: translateX(50%);
 }
 
-/* Rotate last bar */
+.change-clic #bar3 {
-
-.change #bar3 {
     -webkit-transform: rotate(45deg) translate(-10px, -10px);
     transform: rotate(45deg) translate(-10px, -10px);
 }

assets/scripts/sidenavScript.js

@@ -42,11 +42,11 @@ function toggleNav() {
 }
 
 function disableHamburger() {
-    hamburger.removeClass("change");
+    hamburger.removeClass("change-clic");
 }
 
 function enableHamburger() {
-    hamburger.addClass("change");
+    hamburger.addClass("change-clic");
 }
 
 /*
@@ -72,17 +72,7 @@ manager.on('swipe', function(e) {
 
 // Animate hamburger on hover
 hamburger.hover(function(){
-    $("#bar1").css("background-color", "#1a5dad");
+    hamburger.addClass("change-hover");
-    $("#bar2-1").css("background-color", "#ee293d");
-    $("#bar2-2").css("background-color", "#ee293d");
-    $("#bar2-1").css("left", "-5px");
-    $("#bar2-2").css("right", "-5px");
-    $("#bar3").css("background-color", "#1a5dad");
 }, function(){
-    $("#bar1").css("background-color", "white");
+    hamburger.removeClass("change-hover");
-    $("#bar2-1").css("background-color", "white");
-    $("#bar2-2").css("background-color", "white");
-    $("#bar2-1").css("left", "0");
-    $("#bar2-2").css("right", "0");
-    $("#bar3").css("background-color", "white");
 });