diff --git a/assets/javascripts/views/sidebar/sidebar.coffee b/assets/javascripts/views/sidebar/sidebar.coffee
index cef9e8d0..dcb7687b 100644
--- a/assets/javascripts/views/sidebar/sidebar.coffee
+++ b/assets/javascripts/views/sidebar/sidebar.coffee
@@ -27,16 +27,31 @@ class app.views.Sidebar extends app.View
     @docList = new app.views.DocList
 
     app.on 'ready', @onReady
+
+    $.on document.documentElement, 'mouseleave', (event) => @display() if event.clientX < 10
+    $.on document.documentElement, 'mouseenter', => @resetDisplay(forceNoHover: false)
     return
 
   display: ->
     @addClass 'show'
     return
 
-  resetDisplay: ->
+  resetDisplay: (options = {}) ->
+    return unless @hasClass 'show'
     @removeClass 'show'
+
+    unless options.forceNoHover is false or @hasClass 'no-hover'
+      @addClass 'no-hover'
+      $.on window, 'mousemove', @resetHoverOnMouseMove
     return
 
+  resetHoverOnMouseMove: =>
+    $.off window, 'mousemove', @resetHoverOnMouseMove
+    $.requestAnimationFrame @resetHover
+
+  resetHover: =>
+    @removeClass 'no-hover'
+
   showView: (view) ->
     unless @view is view
       @hover?.hide()
diff --git a/assets/stylesheets/components/_sidebar.scss b/assets/stylesheets/components/_sidebar.scss
index cabb758e..9b9ba6d9 100644
--- a/assets/stylesheets/components/_sidebar.scss
+++ b/assets/stylesheets/components/_sidebar.scss
@@ -37,8 +37,17 @@
     }
   }
 
-  ._sidebar-hidden & { display: none; }
-  &.show { display: block; }
+  ._sidebar-hidden & {
+    transform: translateX(-95%);
+    transform: translateX(calc(.5rem - 100%));
+    opacity: 0;
+  }
+
+  &:hover:not(.no-hover),
+  &.show {
+    transform: none;
+    opacity: 1;
+  }
 }
 
 ._resizer {