JSFiddle - React, Tailwind, and code Playground

by DannyEnglander

HTML

<div class="bgcontainer_center">
    <div id="sidebar">
        <p>Sidebar Content</p>
    </div>
    <div id="wrapper">
        <div id="toggle">
            <input type="button" value="Toggle Sidebar">
        </div>
        <p>Main Content</p>
    </div>
</div>


<div class="filter-wrap">
  <div class="filter-toggle" id="filter-toggle" tabindex="0" role="button">
    <h2 class="h3">Filter</h2>
  </div>

  <div class="view-filters">


 
      <div class="js-form-item form-item js-form-type-textfield form-item-name js-form-item-name">
        <label for="edit-name">Search for an Icon</label>

        <input data-drupal-selector="edit-name" type="text" id="edit-name" name="name" value="" size="30"
               maxlength="128" class="form-text">
        <div id="edit-name--description" class="description">
          Examples: car, circle, arrow, folder
        </div>
      </div>

  </div>
</div>

CSS

.bgcontainer_center {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    max-width: 500px;
    background-color: #ff00ff;
    height: 100%;
}
.bgcontainer_center.clicked {
    max-width: 350px;
}
#sidebar {
    float: left;
    width: 25%;
    max-width: 125px;
    background-color: #00ff00;
    height: 100%;
    left: 0px;
}
#wrapper {
    width: auto;
    max-width: 350px;
    background-color: #0000ff;
    overflow-x: hidden;
}

JavaScript

$(document).ready(function () {
        var sidebarVisible = localStorage.getItem('sidebar') == 'true';
        $('#sidebar').toggle(sidebarVisible);
        $('.bgcontainer_center').toggleClass('clicked', sidebarVisible);

        $("#toggle").click(function () {
            $("#sidebar").toggle("slow", function () {
                localStorage.setItem('sidebar', $('#sidebar').is(':visible'));
            });

            $(".bgcontainer_center").toggleClass('clicked');
        });
    });