JSFiddle - React, Tailwind, and code Playground

by Pamela Cook

HTML

<link rel="stylesheet" href="https://blackrockdigital.github.io/startbootstrap-simple-sidebar/css/bootstrap.min.css">
<link rel="stylesheet" href="https://blackrockdigital.github.io/startbootstrap-simple-sidebar/css/simple-sidebar.css">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="wrapper">

  <!-- Sidebar -->
  <div id="sidebar-wrapper">
    <ul class="sidebar-nav">
      <li class="sidebar-brand"><a href="#">Start Bootstrap</a></li>
      <li><a href="http://www.ezklw.com/">EZKLW</a></li>
      <li><a href="https://geometry.4d3dpuzzles.com/">Geometry Puzzles</a></li>
      <li><a href="https://www.halojordan.com/">Halo Jordan</a></li>
      <li><a href="https://www.hypercubeoflove.com/">HyperCube of Love</a></li>
      <li><a href="https://www.iktus.net/">iktusNET</a></li>
      <li><a href="https://www.lightbe.com/">LightBe Corp</a></li>
      <li><a href="https://www.nbcbigbend.com/">NBC Big Bend</a></li>
    </ul>
  </div>
  <!-- /#sidebar-wrapper -->

  <!-- Page Content -->
  <div id="page-content-wrapper">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-12">
          <h1>Simple Sidebar</h1>
          <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the
            page content will be pushed off canvas.</p>
          <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
          <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
        </div>
      </div>
    </div>
  </div>
  <!-- /#page-content-wrapper -->

</div>

JavaScript

$("body, html").not('#menu-toggle').click(function(e) {
   console.log(e.target);
   if ($('#wrapper').hasClass("toggled") && !$(e.target).is('#menu-toggle, #sidebar-wrapper, #sidebar-wrapper *')) {
     //alert('asd');
     $("#menu-toggle").trigger("click");
   }
 });

 $("#menu-toggle").click(function(e) {
   e.preventDefault();
   $("#wrapper").toggleClass("toggled");
 });