<div class="realtive min-h-screen md:flex">

  <!-- mobile menu bar -->
  <div class="bg-gray-800 text-gray-100 flex justify-between md:hidden">
    <!-- logo -->
    <a href="#" class="block p-4 text-white font-bold">Monyen</a>

    <!-- mobile menu button -->
    <button class="mobile-menu-button p-4 focus:outline-none focus:bg-gray-700">
      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <!-- sidebar -->
  <div class="sidebar bg-blue-800 text-blue-100 w-64 space-y-6 py-7 px-2 absolute inset-y-0 left-0 transform -translate-x-full transition duration-200 ease-in-out md:relative md:translate-x-0">
    <!-- logo -->
    <a href="#" class="text-white flex item-center space-x-2 px-4">
      <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 8l3 5m0 0l3-5m-3 5v4m-3-5h6m-6 3h6m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <span class="text-2xl font-extrabold">Monyen</span>
    </a>

    <!-- nav -->
    <nav>
      <a href="" class="block py-2.5 px-4 rounded hover:bg-blue-700 hover:text-white transition duration-200">Home</a>
      <a href="" class="block py-2.5 px-4 rounded hover:bg-blue-700 hover:text-white transition duration-200">Feature</a>
      <a href="" class="block py-2.5 px-4 rounded hover:bg-blue-700 hover:text-white transition duration-200">Pricing</a>
      <a href="" class="block py-2.5 px-4 rounded hover:bg-blue-700 hover:text-white transition duration-200">Settings</a>
    </nav>
  </div>

  <!-- content -->
  <div class="flex-1 p-10 text-2xl font-bold">
   Content goes here
  </div>
</div>

// grap everything we need
const btn = document.querySelector(".mobile-menu-button");
const sidebar = document.querySelector(".sidebar");

// add event listener
btn.addEventListener("click", () => {
  sidebar.classList.toggle("-translate-x-full");
});