Index: app/views/layouts/base.html.erb
===================================================================
--- app/views/layouts/base.html.erb	(revision 18474)
+++ app/views/layouts/base.html.erb	(working copy)
@@ -99,8 +99,15 @@
     <% end %>
 </div>
 
-<div id="main" class="<%= sidebar_content? ? '' : 'nosidebar' %>">
+<div id="main" class="<%= sidebar_content? ? 'collapsiblesidebar' : 'nosidebar' %>">
+<%= javascript_tag "$('#main.collapsiblesidebar').collapsibleSidebar();" if sidebar_content? %>
     <div id="sidebar">
+      <% if sidebar_content? %>
+        <div id="sidebar-switch-panel" style="visibility: hidden;">
+          <a id="sidebar-switch-button" href="#">&raquo;</a>
+        </div>
+        <%= javascript_tag "$('#sidebar-switch-panel').css('visibility', 'visible');" %>
+      <% end %>
         <%= yield :sidebar %>
         <%= view_layouts_base_sidebar_hook_response %>
     </div>
Index: public/javascripts/application.js
===================================================================
--- public/javascripts/application.js	(revision 18474)
+++ public/javascripts/application.js	(working copy)
@@ -1051,6 +1051,76 @@
     tribute.attach(element);
 }
 
+// collapsible sidebar jQuery plugin
+(function($) {
+  // main container this is applied to
+  var main;
+  // triggers show/hide
+  var button;
+  // the key to use in local storage
+  // this will later be expanded using the current controller and action to
+  // allow for different sidebar states for different pages
+  var localStorageKey = 'redmine-sidebar-state';
+  // true if local storage is available
+  var canUseLocalStorage = function(){
+    try {
+      if('localStorage' in window){
+        localStorage.setItem('redmine.test.storage', 'ok');
+        var item = localStorage.getItem('redmine.test.storage');
+        localStorage.removeItem('redmine.test.storage');
+        if(item === 'ok') return true;
+      }
+    } catch (err) {}
+    return false;
+  }();
+  // function to set current sidebar state
+  var setState = function(state){
+    if(canUseLocalStorage){
+      localStorage.setItem(localStorageKey, state);
+    }
+  };
+  var applyState = function(){
+    if(main.hasClass('collapsedsidebar')){
+      button.html("&laquo;");
+      setState('hidden');
+    } else {
+      button.html("&raquo;");
+      setState('visible');
+    }
+  };
+  var setupToggleButton = function(){
+    button = $('#sidebar-switch-button');
+    button.click(function(e){
+      main.addClass("animate");
+      main.toggleClass('collapsedsidebar');
+      applyState();
+      e.preventDefault();
+      return false;
+    });
+    applyState();
+  };
+  $.fn.collapsibleSidebar = function() {
+    main = this;
+    // determine previously stored sidebar state for this page
+    if(canUseLocalStorage) {
+      // determine current controller/action pair and use them as storage key
+      var bodyClass = $('body').attr('class');
+      if(bodyClass){
+        try {
+          localStorageKey += '-' + bodyClass.split(/\s+/).filter(function(s){
+            return s.match(/(action|controller)-.*/);
+          }).sort().join('-');
+        } catch(e) {
+          // in case of error (probably IE8), continue with the unmodified key
+        }
+      }
+      var storedState = localStorage.getItem(localStorageKey);
+      main.toggleClass('collapsedsidebar', storedState === 'hidden');
+    }
+    // draw the toggle button once the DOM is complete
+    $(document).ready(setupToggleButton);
+  };
+}(jQuery));
 
 $(document).ready(setupAjaxIndicator);
 $(document).ready(hideOnLoad);
Index: public/stylesheets/application.css
===================================================================
--- public/stylesheets/application.css	(revision 18474)
+++ public/stylesheets/application.css	(working copy)
@@ -84,8 +84,9 @@
 #admin-menu li {margin: 0;  padding: 0 0 6px 0; list-style-type:none;}
 
 #main {flex-grow: 2; display: flex; flex-direction: row-reverse;}
+#main.nosidebar #sidebar {display: none;}
 
-#sidebar{ flex-shrink: 0; padding-left: 20px; background: #EEEEEE; border-left: 1px solid #ddd}
+#sidebar{ flex-shrink: 0; padding-left: 20px; background: #EEEEEE; border-left: 1px solid #ddd; z-index: 1;}
 @media screen and (min-width: 0px) and (max-width: 1089px) {#sidebar{width: 22%;}}
 @media screen and (min-width: 1090px) and (max-width: 1279px) {#sidebar{width: 240px;}}
 @media screen and (min-width: 1280px) and (max-width: 1599px) {#sidebar{width: 280px;}}
@@ -92,7 +93,8 @@
 @media screen and (min-width: 1600px) and (max-width: 1919px) {#sidebar{width: 320px;}}
 @media screen and (min-width: 1920px) and (max-width: 2559px) {#sidebar{width: 360px;}}
 @media screen and (min-width: 2560px) {#sidebar{width: 380px;}}
-#sidebar h3{ font-size: 14px; margin-top:14px; color: #666;  }
+#sidebar h3 { font-size: 14px; margin-top:14px; color: #666;  }
+#sidebar h3:first-of-type { margin-top: 4px ; }
 #sidebar hr{ width: 100%; margin: 0 auto; height: 1px; background: #ccc; border: 0; }
 * html #sidebar hr{ width: 95%; position: relative; left: -6px; color: #ccc; }
 #sidebar .contextual { margin-right: 1em; }
@@ -107,8 +109,34 @@
 html>body #content { min-height: 600px; }
 * html body #content { height: 600px; } /* IE */
 
-#main.nosidebar #sidebar{ display: none; }
+#main.collapsedsidebar #sidebar { display: block; width: 0px; }
+#main.collapsedsidebar #sidebar:hover { width: 22%; position: absolute; height:100%; }
+#main.collapsedsidebar #sidebar:hover ~ #content { padding-right: 30px; }
+#sidebar-switch-panel {
+  font-size: 20px;
+  width: 100%;
+  color: #666;
+  display: block;
+  margin-left: -21px;
+  padding-right: 21px;
+  border-bottom: 1px solid #ddd;
+  padding-left: 4px;
+}
 
+#sidebar-switch-panel:hover {
+  background-color: #e6e6e6;
+}
+
+#sidebar-switch-button {
+  color: #666;
+  width: 100%;
+  display: block;
+}
+
+#sidebar-switch-button:hover {
+  text-decoration: none;
+}
+
 #footer {clear: both; border-top: 1px solid #bbb; font-size: 0.9em; color: #aaa; padding: 5px; text-align:center; background:#fff;}
 
 #login-form {margin:5em auto 2em auto; padding:20px; width:340px; border:1px solid #FDBF3B; background-color:#FFEBC1; border-radius:4px; box-sizing: border-box;}