JSFiddle - React, Tailwind, and code Playground

by Pamela Cook

HTML

<script src="bootstrap.min.css "></script>
<script src="bootstrap.min.js"></script>
<script src="jquery-2.2.4.js"></script>
<link rel="stylesheet" href="font-awesome.min.css">
<body>
  <div id="wrapper">
    <div id="sidebar-wrapper">
      <ul class="sidebar-nav">
        <li class="sidebar-close" id="toggleback"><a href="#"><i class="fa fa-times"></i></a></li>
        <li id="showlink-toggleback"><a href="http://businesscasualprod.lightbe.com/en/home">Home</a></li>
        <li id="showlink-toggleback"><a href="http://businesscasualprod.lightbe.com/en/ourstory">Our Story</a></li>
        <li id="showlink-toggleback"><a href="http://businesscasualprod.lightbe.com/en/media">Media</a></li>
        <li id="showlink-toggleback"><a href="http://businesscasualprod.lightbe.com/en/concept">Concept &amp; Benefits</a></li>
        <li id="showlink-toggleback" class="text-bold"><a href="http://businesscasualprod.lightbe.com/en/therapy_puzzles">View the Video Trailers</a></li>
        <li id="showlink-toggleback" class="text-bold"><a href="http://businesscasualprod.lightbe.com/en/store">Buy Apps</a></li>
        <li id="showlink-toggleback"><a href="http://businesscasualprod.lightbe.com/en/vision">Vision/Mission</a></li>
        <li id="showlink-toggleback"><a href="http://businesscasualprod.lightbe.com/en/contact">Contact</a></li>
        <li id="showlink-toggleback"><a href="http://businesscasualprod.lightbe.com/en/affiliates">Affiliate Program</a></li>
        <li id="showlink-toggleback"><a target="_blank" href="http://4d3dtherapy.blogspot.com/">Blog</a></li>
        <li id="showlink-toggleback">
          <a target="_blank" href="https://www.facebook.com/4d3dtherapy/"><img class="img-responsive aspect" alt="Find Us On Facebook" src="/assets/FB-f-Logo__blue_50-eee40cae491f4cdb28c99895c58d236b8d7c31b5aa371c4fcc05c76bec6820d5.png" /></a>
        </li>
      </ul>
    </div>
    <div id="page-content-wrapper">
      <div class="container-fluid">
        <header...

SCSS

$black: #000000;
$blue: #0000ff;
$borderColor: #999999;
$color4d: #21ffff;
$FontSize: 20px;
$LinkColor: #fe41ff;
$LinkColorHover: #ffff00;
$SideBar:  lighten($black, 46.7%);
$SideBarClose:  lighten($black, 80%);
$SideBarColorX:  lighten($black, 80%);
$SideBarlinkColor: #fe41ff;
$SideBarlinkColorHover: #ffff00;
$SideBarWidth: 300px;
$SideBarWidthMinus: -300px;
$SideBarWidthSmall: 300px;
$SideBarWidthSmallMinus: -300px;
$red: #ff0000;
$white: #ffffff;
.affiliates-head { font-size: 120%; line-height: 100%; font-weight: bold; }
.affiliates-not-ready { font-weight: bold; color: $red; text-align: center; }

.box { 
  box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; -khtml-box-sizing: border-box; -webkit-box-sizing: border-box;
  margin-bottom: 20px; padding: 20px 15px; background: $white; background: rgba(255,255,255,0.9); width: 100%;
}
#header-links, .menu-link, .sidebar-nav li { font-size: 120%; line-height: 100%; }
.margin-top-page { margin-top: 190px; }
#menu-line { padding-bottom: 15px; }
.menu-link { padding-left: 20px; position: absolute; left: 15px; top: 0px; z-index: 1; #menu-toggle { color: $LinkColor; text-decoration: none !important; } }
.menu-link:hover, .menu-link:visited, .menu-link:focus, .menu-link.active:focus { i, #menu-toggle { color: $LinkColorHover; text-decoration: none !important; } }

.page-class { width: 75%; }

.text-bold, #text-bold { font-weight: bold; }
.text-bold-center { font-weight: bold; text-align: center; }
.text-center { text-align: center; }
.text-red-bold { color: $red; font-weight: bold; }
.text-red-bold-center { color: $red; font-weight: bold; text-align: center; }
.text-sys-req { font-size: 70%; line-height: 100%; text-align: center; }
.text-120-bold-center, { font-size: 120%; line-height: 1.6; font-weight: bold; text-align: center; }
.text-150-bold-center { font-size: 150%; line-height: 1.6; font-weight: bold; text-align: center; }

#page-content-wrapper { width:...

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, #toggleback").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
});