JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		<header class="multi-header">
				<img src="https://thumb1.shutterstock.com/display_pic_with_logo/173777662/620757677/stock-vector-slide-penguin-logo-template-620757677.jpg" class="multi-logo">
				<nav>
					<div class="button" id="btn">
						<div class="bar top"></div>
						<div class="bar middle"></div>
						<div class="bar bottom"></div>
					</div>
					<ul>
						<li><a>Home</a></li>
						<li><a>Solutions</a></li>
						<li><a>Cases</a></li>
						<li><a>Contact</a></li>
					</ul>
				</nav>
			</header>
	<div class="wrapper">
		

		<section>
			<a name="slideShow"></a>

			<h1>Banner</h1>
		</section>
		
		<section>
			<a name="sec1"></a>

			<h1>Section 1</h1>
		</section>

		<section>
			<a name="sec2"></a>

			<h1>Section 2</h1>
		</section>
		
		<section>
			<a name="sec3"></a>
			<h1>Section 3</h1>
		</section>

		<footer>
			<h1>Footer</h1>''
		</footer>

	</div>
</body>

CSS

html, body{
	margin:0px;
	padding: 0px;
	color:#8f8f8f;
	font-family: 'Open Sans', sans-serif;
}

nav{
	padding: 20px;
}

.wrapper{
	display:grid;
	grid-template-columns:1fr;
    grid-auto-rows: minmax(100px,auto);
    -webkit-transition: transform .7s ease-in-out;
    -moz-transition: transform .7s ease-in-out;
    -ms-transition: transform .7s ease-in-out;
    -o-transition: transform .7s ease-in-out;
    transition: transform .7s ease-in-out;
}

h1{
	color:#4c2779;
	font-size: 1.5em;
}

/* MENU */
.multi-logo{
    height: 60px;
    width: 150px;
    padding-left: 20px;
}

.multi-header{
    display: grid;
    grid-template-columns: 1fr 2fr;
}

.multi-header ul{
    display: inline;
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: right;
}

.multi-header li{
    display: inline-block;
    padding: 0px 20px;
}


.multi-header li a{
    text-decoration: none;
    font-size: 20px;
    color: #3d3d3d;
    position: relative;
    cursor: pointer;
}

/* MENU ANIMATION */
.multi-header li a:hover{
    color: #4B2779;
    /* opacity: 0.5; */
}

.multi-header li a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #4B2779;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
  }

.multi-header li a:hover:before{
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

/* MENU ANIMATION */
/* MENU */

/* MEDIA QUERIES */


@media screen and (max-width: 767px), screen and (max-width: 767px) and (orientation: landscape), screen and (max-width: 767px) and (orientation: portrait){
    .multi-header nav{
        height: 30px;
    }
    .multi-header ul{
        display: none;
    }

    .multi-menu-mobile{
        display: block;
    }

    .bar {
        -webkit-transition: all .7s ease;
        -moz-transition: all .7s...

JavaScript

$(document).ready(function() {
    function toggleSidebar() {
        console.log("ayy");
       $(".button").toggleClass("active");
       $(".wrapper").toggleClass("move-to-left");
    //   $("main").toggleClass("move-to-left");
    //   $(".sidebar-item").toggleClass("active");
    }
    
    $(".button").on("click tap", function() {
       toggleSidebar();
    });
    
    // $(document).keyup(function(e) {
    //   if (e.keyCode === 27) {
    //     toggleSidebar();
    //   }
    // });
});