Redmine

<div id="main" class="<%= sidebar_content? ? 'collapsiblesidebar' : 'nosidebar' %>">

<%= javascript_tag "$('#main.collapsiblesidebar').collapsibleSidebar();" if sidebar_content? %>

        <% 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 %>

// 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("«");

      setState('hidden');

    } else {

      button.html("»");

      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));

#main.nosidebar #sidebar {display: none;}

#sidebar{ flex-shrink: 0; width: 22%; padding-left: 20px; background: #EEEEEE; border-left: 1px solid #ddd; z-index: 1;}

#sidebar h3 { font-size: 14px; margin-top:14px; color: #666;  }

#sidebar h3:first-of-type { margin-top: 4px ; }

#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;

}