Use CSS :hover instead of mouse event

source/css/_common/components/third-party/search.styl

@@ -29,7 +29,6 @@
   transform: scale(0);
   transition: transform .2s;
   width: 700px;
-  z-index: $zindex-5;
 
   .search-active & {
     transform: scale(1);

source/css/_common/outline/sidebar/sidebar-toggle.styl

@@ -9,3 +9,11 @@
 .sidebar-toggle:hover .toggle-line {
   background: $sidebar-highlight;
 }
+
+body:not(.sidebar-active) .sidebar-toggle:hover {
+  @extend .toggle.toggle-arrow;
+}
+
+.sidebar-active .sidebar-toggle {
+  @extend .toggle.toggle-close;
+}

source/js/schemes/muse.js

@@ -5,34 +5,15 @@ document.addEventListener('DOMContentLoaded', () => {
   const isRight = CONFIG.sidebar.position === 'right';
   const mousePos = {};
 
-  const sidebarToggleLines = {
+  const sidebarToggleMotion = {
     lines: document.querySelector('.sidebar-toggle'),
     init : function() {
-      this.lines.classList.remove('toggle-arrow', 'toggle-close');
-    },
-    arrow: function() {
-      this.lines.classList.remove('toggle-close');
-      this.lines.classList.add('toggle-arrow');
-    },
-    close: function() {
-      this.lines.classList.remove('toggle-arrow');
-      this.lines.classList.add('toggle-close');
-    }
-  };
-
-  const sidebarToggleMotion = {
-    isSidebarVisible: false,
-    init            : function() {
-      sidebarToggleLines.init();
-
-      window.addEventListener('mousedown', this.mousedownHandler.bind(this));
+      window.addEventListener('mousedown', this.mousedownHandler);
       window.addEventListener('mouseup', this.mouseupHandler.bind(this));
       document.querySelector('#sidebar-dimmer').addEventListener('click', this.clickHandler.bind(this));
       document.querySelector('.sidebar-toggle').addEventListener('click', this.clickHandler.bind(this));
-      document.querySelector('.sidebar-toggle').addEventListener('mouseenter', this.mouseEnterHandler.bind(this));
-      document.querySelector('.sidebar-toggle').addEventListener('mouseleave', this.mouseLeaveHandler.bind(this));
-      window.addEventListener('sidebar:show', this.showSidebar.bind(this));
-      window.addEventListener('sidebar:hide', this.hideSidebar.bind(this));
+      window.addEventListener('sidebar:show', this.showSidebar);
+      window.addEventListener('sidebar:hide', this.hideSidebar);
     },
     mousedownHandler: function(event) {
       mousePos.X = event.pageX;
@@ -42,40 +23,25 @@ document.addEventListener('DOMContentLoaded', () => {
       const deltaX = event.pageX - mousePos.X;
       const deltaY = event.pageY - mousePos.Y;
       const clickingBlankPart = Math.sqrt((deltaX * deltaX) + (deltaY * deltaY)) < 20 && event.target.matches('.main');
-      if (this.isSidebarVisible && (clickingBlankPart || event.target.matches('img.medium-zoom-image, .fancybox img'))) {
+      // Fancybox has z-index property, but medium-zoom does not, so the sidebar will overlay the zoomed image.
+      if (clickingBlankPart || event.target.matches('img.medium-zoom-image')) {
         this.hideSidebar();
       }
     },
     clickHandler: function() {
-      this.isSidebarVisible ? this.hideSidebar() : this.showSidebar();
-    },
-    mouseEnterHandler: function() {
-      if (!this.isSidebarVisible) {
-        sidebarToggleLines.arrow();
-      }
-    },
-    mouseLeaveHandler: function() {
-      if (!this.isSidebarVisible) {
-        sidebarToggleLines.init();
-      }
+      document.body.classList.contains('sidebar-active') ? this.hideSidebar() : this.showSidebar();
     },
     showSidebar: function() {
-      this.isSidebarVisible = true;
       document.body.classList.add('sidebar-active');
       if (typeof Velocity === 'function') {
         Velocity(document.querySelectorAll('.sidebar .motion-element'), isRight ? 'transition.slideRightIn' : 'transition.slideLeftIn', {
           stagger: 50,
           drag   : true
         });
       }
-
-      sidebarToggleLines.close();
     },
     hideSidebar: function() {
-      this.isSidebarVisible = false;
       document.body.classList.remove('sidebar-active');
-
-      sidebarToggleLines.init();
     }
   };
   sidebarToggleMotion.init();