JSFiddle - React, Tailwind, and code Playground

by Marian Rick

HTML

<div id="headerMenu">
        <div id="logo">
            <a href="/">Seventy Three</a>
        </div>

        <a href="#"> <img src="/images/search.png"> </a>
    </div>

    <div id="page-content">
        <p>Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello...

CSS

#headerMenu {
    width: 100%;
    height: 65px;
    background-color: #212021;
}

#logo a {
    color: #FFFFFF;
    text-decoration: none;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 25px;
    background-color: #212021;
    position: absolute;
    top: 14px;
    left: 10px;
}


#page-content {
    position: absolute;
    top: 100px;
    padding: 100px;
}

#headerMenu img {
    width: 40px;
    height: 40px;
    background-color: #212021;
    padding-top: 5px;
    position: absolute;
    top: 7px;
    left: 70%;
}

#menu img{
    width: 50px;
    height: 50px;
    background-color: #212021;
    top: -2px;
    left: 85%;
}





body, html {
  margin: 0;
  font-family: helvetica;
  font-weight: 100;
    overflow-x:hidden;
}


.container {
  position: relative;
  width: 100%;
  left: 0;
  -webkit-transition:  left 0.4s ease-in-out;
  -moz-transition:  left 0.4s ease-in-out;
  -ms-transition:  left 0.4s ease-in-out;
  -o-transition:  left 0.4s ease-in-out;
  transition:  left 0.4s ease-in-out;
}
.container.open-sidebar {
  left: 240px;
}

.swipe-area {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #FFFFFF;
  z-index: 0;
}
#sidebar {
  background: #212021;
  position: absolute;
  width: 240px;
  height: 100%;
  left: -240px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
#sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#sidebar ul li {
  margin: 0;
}
#sidebar ul li a {
  padding: 15px 20px;
  font-size: 16px;
  font-weight: 100;
  color: white;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid #212021;
  -webkit-transition:  background 0.3s ease-in-out;
  -moz-transition:  background 0.3s ease-in-out;
  -ms-transition:  background 0.3s ease-in-out;
  -o-transition:  background 0.3s ease-in-out;
  transition:  background 0.3s ease-in-out;
}
#sidebar ul li:hover a {
  background: #212021;
}
.main-content {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
 ...

JavaScript

$(window).load(function(){
        $("[data-toggle]").click(function() {
          var toggle_el = $(this).data("toggle");
          $(toggle_el).toggleClass("open-sidebar");
        });
         $(".swipe-area").swipe({
              swipeStatus:function(event, phase, direction, distance, duration, fingers)
                  {
                      if (phase=="move" && direction =="left") {
                           $(".container").addClass("open-sidebar");
                           return false;
                      }
                      if (phase=="move" && direction =="right") {
                           $(".container").removeClass("open-sidebar");
                           return false;
                      }
                  }
          }); 
      });