Add double click event to toggle the sidebar

assets/javascripts/app/app.coffee

@@ -179,6 +179,14 @@
     # enabled because it doesn't support caching URLs that use CORS.
     @config[if @appCache and @settings.hasDocs() then 'index_path' else 'docs_host']
 
+  toggleSidebar: ->
+    state = @el.getAttribute('data-sidebar')
+    newState = if state == 'visible' then 'hidden' else 'visible'
+    @el.setAttribute('data-sidebar', newState)
+    @settings.setSidebar(newState)
+    @appCache?.updateInBackground()
+    return
+
   onBootError: (args...) ->
     @trigger 'bootError'
     @hideLoading()

assets/javascripts/app/settings.coffee

@@ -4,6 +4,7 @@ class app.Settings
   DARK_KEY = 'dark'
   LAYOUT_KEY = 'layout'
   SIZE_KEY = 'size'
+  SIDEBAR_KEY = 'sidebar'
 
   @defaults:
     count: 0
@@ -77,10 +78,17 @@ class app.Settings
     catch
     return
 
+  setSidebar: (value) ->
+    try
+      Cookies.set SIDEBAR_KEY, value, path: '/', expires: 1e8
+    catch
+    return
+
   reset: ->
     try Cookies.expire DOCS_KEY
     try Cookies.expire DARK_KEY
     try Cookies.expire LAYOUT_KEY
     try Cookies.expire SIZE_KEY
+    try Cookies.expire SIDEBAR_KEY
     try @store.del(SETTINGS_KEY)
     return

assets/javascripts/views/layout/resizer.coffee

@@ -4,6 +4,7 @@ class app.views.Resizer extends app.View
   @events:
     dragstart: 'onDragStart'
     dragend: 'onDragEnd'
+    dblclick: 'onDbLClick'
 
   @isSupported: ->
     'ondragstart' of document.createElement('div') and !app.isMobile()
@@ -31,6 +32,10 @@ class app.views.Resizer extends app.View
       app.appCache?.updateInBackground()
     return
 
+  onDbLClick: (event) =>
+    app.toggleSidebar()
+    return
+
   onDragStart: (event) =>
     @style.removeAttribute('disabled')
     event.dataTransfer.effectAllowed = 'link'

assets/stylesheets/components/_content.scss

@@ -10,6 +10,10 @@
   pointer-events: none;
   @extend %border-box;
 
+  ._app[data-sidebar="hidden"] & {
+    margin-left: 0;
+  }
+
   @media #{$mediumScreen} { margin-left: $sidebarMediumWidth; }
 }
 

assets/stylesheets/components/_path.scss

@@ -11,6 +11,10 @@
   background: $pathBackground;
   box-shadow: inset 0 1px $pathBorder;
 
+  ._app[data-sidebar="hidden"] & {
+    left: 0;
+  }
+
   @media #{$mediumScreen} { left: $sidebarMediumWidth; }
 
   ~ ._container { padding-bottom: 2rem; }

assets/stylesheets/components/_sidebar.scss

@@ -33,6 +33,10 @@
   }
 
   a:focus { outline: 0; }
+
+  ._app[data-sidebar="hidden"] & {
+    display: none;
+  }
 }
 
 ._resizer {
@@ -44,6 +48,13 @@
   margin-left: -2px;
   width: 3px;
   cursor: col-resize;
+
+  ._app[data-sidebar="hidden"] & {
+    border: 1px solid $headerBorder;
+    background-color: $headerBackground;
+    margin-left: 0;
+    left: 1px;
+  }
 }
 
 //

lib/app.rb

@@ -185,6 +185,10 @@ class App < Sinatra::Application
       app_theme == 'dark'
     end
 
+    def app_sidebar
+      cookies[:sidebar].nil? ? 'visible' : cookies[:sidebar]
+    end
+
     def redirect_via_js(path) # courtesy of HTML5 App Cache
       response.set_cookie :initial_path, value: path, expires: Time.now + 15, path: '/'
       redirect '/', 302

views/app.erb

@@ -1,4 +1,4 @@
-<div class="_app<%= " #{app_layout}" if app_layout %>">
+<div class="_app<%= " #{app_layout}" if app_layout %>" data-sidebar="<%= "#{app_sidebar}" if app_sidebar %>">
   <header class="_header">
     <a class="_home-link"></a>
     <a class="_menu-link"></a>