JSFiddle - React, Tailwind, and code Playground

by Kevin Pliester

HTML

<div class="wrapper">

  <div class="menu">
  </div>

  <div class="content">
    <div class="container">

      <div class="toggle">
        open
      </div>

      <div class="text">
        Text
      </div>

    </div>
  </div>

</div>

SCSS

// Vars
$mobile: 678px;
$tablet: 1024px;
$desktop: 1080px;
$large: 1600px;
$menu-width: 270px;

// Base
body,
html {
  height: 100%;
  width: 100%;
}

.container {
  max-width: 1080px;
  margin: 0 auto;
  @media(min-width: $tablet) {
    margin-left: $menu-width;
  }
}

// Wrapper
.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  .menu {
    width: $menu-width;
    height: 100%;
    position: fixed;
    top: 0;
    left: -$menu-width;
    background-color: blue;
    &.open {
      left: 0;
    }
    // tablet
    @media(min-width: $mobile) {
      left: -$menu-width;
    }
    // desktop
    @media(min-width: $tablet) {
      left: 0;
      height: 250px;
    }
    // large
    @media(min-width: $desktop) {
      left: 0;
      height: 250px;
    }
  }
  .content {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background-color: red;
    &.open {
      left: $menu-width;
      position: fixed;
      overflow-x: hidden;
    }
  }
}

// Toggle
.toggle {
  cursor: pointer;
  @media(min-width: $tablet) {
    display: none;
  }
}

JavaScript

(function($) {

  var ToggleButton = $('.toggle');
  var Menu = $('.menu');
  var Content = $('.content');

  ToggleButton.click(function() {

    var _self = $(this);

    Menu.toggleClass('open');
    Content.toggleClass('open');

    if ( _self.html().indexOf('open') >= 0 ) {
      _self.html('close');
    } else {
      _self.html('open');
    }

  });

})(jQuery)