JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="container">
  <div class="fixed-menu">
  This is my menu
  </div>
  <button class="toggle-button">Toggle</button>
</div>

CSS

body{
  background-color:#fff;
  transition: all 1s;
}
body.active{
  background-color:#999;
}
.container{
  position: relative;
  margin: auto;
  max-width: 800px;
}
.fixed-menu{
  position: absolute;
  right: 0px;
  top: 30px;
  height: 360px;
  width: 320px;
  background-color: #009c37;
  pointer-events: none;
  opacity: 0;
  transform: translateX(320px);
  transition: all 0.5s;
}
body.active .fixed-menu{
  pointer-events: auto;
  opacity: 1;
  transform: translateX(0px);
  background-color: #356DB0;
}

JavaScript

$('button.toggle-button').click(function(){

	$('body').toggleClass('active');
  
});