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('nosidebar')){

      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('nosidebar');

      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('nosidebar', storedState === 'hidden');

    }

    // draw the toggle button once the DOM is complete

    $(document).ready(setupToggleButton);

  };

}(jQuery));

#sidebar{ float: right; width: 23.5%; position: relative; z-index: 9; padding: 0; margin: 0;}

* html #sidebar{ width: 23.5%; }

#content { background-color: #fff; margin: 0 25% 0 0; border-right: 1px solid #ddd; padding: 6px 10px 10px 10px; z-index: 10; }

* html #content{ margin-right: 25%; padding-left: 0; margin-top: 0px; padding: 6px 10px 10px 10px;}

#main.nosidebar #sidebar { display: block; margin-right: -25%; }

#main.nosidebar #content{ border-right: 0; margin-right: 0; }

#main.animate { transition: background-position 0.2s ease-in-out; }

#main.animate #sidebar, #main.animate #content { transition: margin 0.2s ease-in-out; }

#sidebar-switch-panel {

  background-color: #EEEEEE;

  border-bottom: 1px solid #DDDDDD;

  border-left: 1px solid #DDDDDD;

  border-top: 1px solid #DDDDDD;

  float: right;

  left: 10px;

  top: 2px;

  position: relative;

  padding: 2px;

  margin-left: 5px;

}