// Changing default styles *{ margin: 0px; padding: 0px; box-sizing: border-box; body{ font-family: sans-serif; width: 100%; min-height: 100vh; font-size: 25px; overflow-x: hidden; } } // Managing all our breakpoints in this map $bp : ( mobile : 480px, tablet : 768px, desktop : 1440px, ); // Conditional Media query Mixins // To save time  @mixin query($screen){ @each $key, $value in $bp{ @if ($screen == $key){ @media (max-width : $value){@content;} } } } 

<!-- Using the BEM naming system --> <!-- The Parent holding everything --> <div class="container"> <!-- This section carries our header --> <div class="header"> <!-- Logo here --> <div class="header__logo">LOGO</div> <!-- Button Managemnet --> <div class="header__btn"> <i id="open" class='header__btn-open bx bx-menu' ></i> <i id="close" class='header__btn-close bx bx-x hide'></i> </div> <!-- menu Items here --> <div id="menu" class="header__menu slide"> <div class="item-1"> <!-- Using Radio buttons to toggle back & forth --> <input type="radio" checked name="A" id="a"> <label for="a">Home</label> </div> <div class="item-2"> <input type="radio" name="A" id="b"> <label for="b">About</label> </div> <div class="item-3"> <input type="radio" name="A" id="c"> <label for="c">Services</label> </div> <div class="item-4"> <input type="radio" name="A" id="d"> <label for="d">Contacts</label> </div> </div> </div> <!-- This section carries our content --> <div class="main"> <div class="main__header">Welcome !</div> <div class="main__text"> Lorem ipsum dolor sit amet. </div> </div> </div> 

 // Style rules for desktop screen .header{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; background-color: #c1c1c1; height: 10vh; padding: 0px 10px; &__logo{ cursor: pointer; } &__btn{ display: none; } &__menu{ display: flex; flex-direction: row; [class ^="item-"]{ padding-left: 15px; cursor: pointer; } } } // Style rules for .main class .main{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 80vh; text-align: center; } // Style Rules for Label  label:hover{ color : white; cursor: pointer; } input[type = "radio"]{ display: none; } input[type = "radio"]:checked + label{ color: white; text-decoration: underline; } // Media query rules for mobile screen @include query(mobile){ .header{ justify-content:center; &__logo{} &__btn{ display: flex; position: absolute; right : 10px; font-size: 40px; cursor: pointer; } &__menu{ flex-direction: column; align-items: center; justify-content: space-evenly; position: absolute; z-index: 1; right: 0px; top: 10vh; background-color: #c1c1c1; width: 100%; height: 90vh; transition: all 0.4s ease; } } } // Style rules when btn is clicked .hide{ display: none; } .slide{ right : -100%; } 

// Selecting id from HTML in JS let open = document.getElementById("open"), close = document.getElementById("close"), menu = document.getElementById("menu"); // Creating a reuseable function common = (x,y,z) =>{ x.addEventListener("click",()=>{ x.classList.toggle("hide"); y.classList.toggle("hide"); // defining conditions on if statements if(z== "slide-in"){ menu.classList.toggle("slide"); } if(z == 'slide-out'){ menu.classList.toggle("slide"); } }) } // Calling functions here common(open,close,"slide-in"); common(close,open,'slide-out');