JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<div id="main" class="collapsiblesidebar">
    <div id="sidebar">
      Sidebar
    </div>
    <div id="content">
        Main content
        <div style="clear:both;"></div>
    </div>
</div>

CSS

#main {background-color:#EEEEEE;}

#sidebar{ float: right; width: 22%; position: relative; z-index: 9; padding: 0; margin: 0;}
* html #sidebar{ width: 22%; }
#sidebar h3{ font-size: 14px; margin-top:14px; color: #666;  }
#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; }
#sidebar ul, ul.flat {margin: 0;  padding: 0;}
#sidebar ul li, ul.flat li {list-style-type:none;margin: 0px 2px 0px 0px; padding: 0px 0px 0px 0px;}
#sidebar div.wiki ul {margin:inherit; padding-left:40px;}
#sidebar div.wiki ul li {list-style-type:inherit;}

#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;}
html>body #content { min-height: 600px; }
* html body #content { height: 600px; } /* IE */

#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;
}
 
#footer {clear: both; border-top: 1px solid #bbb; font-size: 0.9em; color: #aaa; padding: 5px; text-align:center; background:#fff;}

JavaScript

// 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("&laquo;");
      setState('hidden');
    } else {
      button.html("&raquo;");
      setState('visible');
    }
  };

  $.fn.collapsibleSidebar = function() {
    main = this;

    // create the toggle button
    var panel = $('<div id="sidebar-switch-panel"></div>');
    button = $('<a id="sidebar-switch-button" href="#"></a>');
    button.click(function(e){
      main.addClass("animate");
      main.toggleClass('nosidebar');
      applyState();
      e.preventDefault();
      return false;
    });
    panel.append(button);
    main.find('#content').prepend(panel);

    // 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){
        localStorageKey += '-' + bodyClass.split(/\s+/).filter(function(s){
          return s.match(/(action|controller)-.*/);
        }).sort().join('-');
    ...