Redmine

// 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{ font-size: 0.8125rem; flex-shrink: 0; padding-left: 20px; padding-right: 8px; background: #f9fafb; border-left: 1px solid #d0d7de; z-index: 1;}

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

#main.collapsedsidebar #sidebar { display: block; width: 0px !important; position: absolute; box-sizing: border-box; height: 100%; overflow: hidden; transition: 0.35s; }

#main.collapsedsidebar #sidebar:hover { width: 22% !important; }

#main:not(.collapsedsidebar) #content { margin-right: 0; }

#main.collapsedsidebar #sidebar > :not(#sidebar-switch-panel) {

    visibility: hidden;

}

#main.collapsedsidebar #sidebar:hover > :not(#sidebar-switch-panel) {

    visibility: visible;

}

body div#content {

    margin-right: 30px;

}

body #main {

    position: relative;

}

#sidebar-switch-panel {

  position: relative;

  left: 6px;

  font-size: 20px;

  width: 100% !important;

  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% !important;

  display: block;

}

#sidebar-switch-button:hover {

  text-decoration: none;

}

#content { flex-grow: 1; background-color: #fff; margin: 0px; padding: 10px 16px 10px 16px; overflow-x: auto;}

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