Tweak dbclick-to-toggle-sidebar code

assets/javascripts/app/app.coffee

@@ -179,14 +179,6 @@
     # 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,7 +4,6 @@ class app.Settings
   DARK_KEY = 'dark'
   LAYOUT_KEY = 'layout'
   SIZE_KEY = 'size'
-  SIDEBAR_KEY = 'sidebar'
 
   @defaults:
     count: 0
@@ -63,10 +62,18 @@ class app.Settings
     catch
     return
 
-  setLayout: (value) ->
+  setLayout: (name, enable) ->
     try
-      if value
+      layout = (Cookies.get(LAYOUT_KEY) || '').split(' ')
-        Cookies.set LAYOUT_KEY, value, path: '/', expires: 1e8
+      $.arrayDelete(layout, '')
+
+      if enable
+        layout.push(name) if layout.indexOf(name) is -1
+      else
+        $.arrayDelete(layout, name)
+
+      if layout.length > 0
+        Cookies.set LAYOUT_KEY, layout.join(' '), path: '/', expires: 1e8
       else
         Cookies.expire LAYOUT_KEY
     catch
@@ -78,17 +85,10 @@ 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/document.coffee

@@ -1,5 +1,6 @@
 class app.views.Document extends app.View
   MAX_WIDTH_CLASS = '_max-width'
+  HIDE_SIDEBAR_CLASS = '_sidebar-hidden'
 
   @el: document
 
@@ -34,7 +35,14 @@ class app.views.Document extends app.View
   toggleLayout: ->
     wantsMaxWidth = !app.el.classList.contains(MAX_WIDTH_CLASS)
     app.el.classList[if wantsMaxWidth then 'add' else 'remove'](MAX_WIDTH_CLASS)
-    app.settings.setLayout(if wantsMaxWidth then MAX_WIDTH_CLASS else false)
+    app.settings.setLayout(MAX_WIDTH_CLASS, wantsMaxWidth)
+    app.appCache?.updateInBackground()
+    return
+
+  toggleSidebar: ->
+    sidebarHidden = app.el.classList.contains(HIDE_SIDEBAR_CLASS)
+    app.el.classList[if sidebarHidden then 'remove' else 'add'](HIDE_SIDEBAR_CLASS)
+    app.settings.setLayout(HIDE_SIDEBAR_CLASS, !sidebarHidden)
     app.appCache?.updateInBackground()
     return
 

assets/javascripts/views/layout/resizer.coffee

@@ -4,7 +4,7 @@ class app.views.Resizer extends app.View
   @events:
     dragstart: 'onDragStart'
     dragend: 'onDragEnd'
-    dblclick: 'onDbLClick'
+    dblclick: 'onDblClick'
 
   @isSupported: ->
     'ondragstart' of document.createElement('div') and !app.isMobile()
@@ -32,8 +32,8 @@ class app.views.Resizer extends app.View
       app.appCache?.updateInBackground()
     return
 
-  onDbLClick: (event) =>
+  onDblClick: (event) ->
-    app.toggleSidebar()
+    app.document.toggleSidebar()
     return
 
   onDragStart: (event) =>

assets/stylesheets/components/_content.scss

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

assets/stylesheets/components/_notice.scss

@@ -11,6 +11,8 @@
 
   @media #{$mediumScreen} { left: $sidebarMediumWidth; }
 
+  ._sidebar-hidden & { left: $sidebarHiddenWidth; }
+
   &:not(._top) ~ ._container { padding-bottom: 2.5rem; }
 
   &._top {

assets/stylesheets/components/_path.scss

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

assets/stylesheets/components/_sidebar.scss

@@ -34,7 +34,7 @@
 
   a:focus { outline: 0; }
 
-  ._app[data-sidebar="hidden"] & {
+  ._sidebar-hidden & {
     display: none;
   }
 }
@@ -49,11 +49,24 @@
   width: 3px;
   cursor: col-resize;
 
-  ._app[data-sidebar="hidden"] & {
+  ._sidebar-hidden & {
-    border: 1px solid $headerBorder;
+    left: 0;
-    background-color: $headerBackground;
     margin-left: 0;
-    left: 1px;
+    background: $headerBackground;
+    border-right: 1px solid $headerBorder;
+    width: 8px;
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 3px;
+      margin-top: -.5rem;
+      width: 1px;
+      height: 1rem;
+      border-left: 1px solid $textColorLighter;
+      border-right: 1px solid $textColorLighter;
+    }
   }
 }
 

assets/stylesheets/global/_variables.scss

@@ -7,6 +7,7 @@ $maxWidth: 80rem;
 $headerHeight: 3rem;
 $sidebarWidth: 18rem;
 $sidebarMediumWidth: 16rem;
+$sidebarHiddenWidth: 9px;
 
 $contentBackground: #fff;
 $documentBackground: #fafafa;

assets/stylesheets/global/variables-dark.scss

@@ -7,6 +7,7 @@ $maxWidth: 80rem;
 $headerHeight: 3rem;
 $sidebarWidth: 18rem;
 $sidebarMediumWidth: 16rem;
+$sidebarHiddenWidth: 9px;
 
 $contentBackground: #303030;
 $documentBackground: #404040;

lib/app.rb

@@ -185,10 +185,6 @@ 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 %>" data-sidebar="<%= "#{app_sidebar}" if app_sidebar %>">
+<div class="_app<%= " #{app_layout}" if app_layout %>">
   <header class="_header">
     <a class="_home-link"></a>
     <a class="_menu-link"></a>