JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='nav'>
  <nav>
    <div class='ul-box'>
      <ul id='nav-ul'>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ul>
    </div>
  </nav>
</div>
<div class='content'>
  <button class='open-nav'>
    open nav
  </button>
</div>

SCSS

body {
  margin: 0;
}
.nav {
  position: fixed;
  height: 1px;
  width: 100%;
  
  nav {
    width: 500px;
    margin: 0 auto;
    height: 0;
    background: tomato;
    
    .ul-box {
     float: right;
     overflow: hidden;
     background-color: white;
     width: 0;
     transition: width 0.3s ease;
     
     ul {
       padding: 20px 0;
       margin: 0;
       width: 80%;
       margin: 0 auto;
     }
    }
    .width-33-pc {
        width: 100px;
      }
  }
}
.content {
  width: 500px;
  margin: 0 auto;
  height: 2000px;
  background: teal;
}
button {
  margin-top: 20px;
}

JavaScript

$(function() {
	$(window).on('resize', function() {
  	$('.ul-box').css('height', window.innerHeight);
  });
	$('.open-nav').on('click', function() {
  	$('.ul-box').css('height', window.innerHeight);
    $('.ul-box').toggleClass('width-33-pc');
  });
});