JSFiddle - React, Tailwind, and code Playground

by ecoblack

HTML

<div class="container">
  <header>Header <span class="mobile-menu-btn">...</span></header>
  <div class="overlay">
    <div class="overlay-content">
       <ul id="header">
  <li style="display: inline-block;" class="logo-right"><a href="/" style="font-family:Canela-Light;font-weight:100;text-decoration:none;">DEAD BUT COOL</a></li>

  <div id="deskmenu">
    <li><a id="viewcase" style="display:none;" href="#" >VIEW PROJECT CASE</a></li>
    <li><a id="closebtn" style="
    right: 0;display:none;" onclick="return false;"> CLOSE</a></li>
    <li><a class="nav" href="/works">WORKS</a></li>
    <li><a class="nav" href="/info">INFO</a></li>
    <li><a class="nav" href="/contact">CONTACT</a></li>
  </div>
   <li id="menu" class="openbtn">MENU</li>
</ul>
   <div id="myNav" class="overlay">
  
  
  <div class="overlay-content">
     <a href="/works">WORKS</a>
     <a id="info" href="/info">INFO</a>
     <a id="contact" href="/contact">CONTACT</a>
      <ul id="header">
  <li style="display: inline-block;" class="logo-right"><a href="/" style="font-family:Canela-Light;font-weight:100;text-decoration:none;">DEAD BUT COOL</a></li>

  <div id="deskmenu">
    <li><a id="viewcase" style="display:none;" href="#" >VIEW PROJECT CASE</a></li>
    <li><a id="closebtn" style="
    right: 0;display:none;" onclick="return false;"> CLOSE</a></li>
    <li><a class="nav" href="/works">WORKS</a></li>
    <li><a class="nav" href="/info">INFO</a></li>
    <li><a class="nav" href="/contact">CONTACT</a></li>
  </div>
   <li id="menu" class="openbtn">MENU</li>
</ul>
   <div id="myNav" class="overlay">
  
  
  <div class="overlay-content">
     <a href="/works">WORKS</a>
     <a id="info" href="/info">INFO</a>
     <a id="contact" href="/contact">CONTACT</a>
    
  </div>

  <div class="social" style="white-space: nowrap;display: inline-block;">
   <p> <span class="youtube">YOUTUBE</span>&nbsp;<span class="facebook">FACEBOOK</span>&nbsp;<span class="soundcloud">SOUNDCLOUD</span></p>

 ...

CSS

body {
  font-family: sans-serif;
  background-color: #cecece;
  margin: 0;
  padding: 0;
}

body.prevent-scroll {
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

header {
  font-size: 32px;
  padding: 8px 10px;
  height: 50px;
  box-sizing: border-box;
  position: relative;
  border-bottom: 1px solid #5a5a5a;
  background-color: #a3a3a3;
}

.mobile-menu-btn {
  position: absolute;
  box-sizing: border-box;
  right: 0;
  top: 0;
  width: 50px;
  height: 100%;
  background-color: #0f0;
  text-align: center;
  cursor: pointer;
}

.mobile-menu-btn.active {
  background-color: #00f;
}

.overlay {
  position: fixed;
  background-color: #fff;
  width: 100%;
  height: calc(100% - 50px);
  display: none;
}

.overlay.active {
  display: block;
}

.overlay-content {
  height: 100%;
  overflow: scroll;
}

.item {
  padding: 15px;
}

.item:not(:last-child) {
  border-bottom: 1px solid #a1a1a1;
}

.content {
  padding: 10px;
  width: 80%;
  margin: auto;
}

JavaScript

$('.mobile-menu-btn').on('click', function(e) {
  $('body').toggleClass('prevent-scroll');
  $('.mobile-menu-btn').toggleClass('active');
  $('.overlay').toggleClass('active');
});