<div class="relative min-h-screen">
  <!-- top bar -->
  <div class="fixed left-0 right-0 h-16 bg-white text-gray-800 flex justify-between items-center border-b border-gray-400 px-2">
    <!-- logo --> 
    <div class="flex items-center space-x-1 px-4">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" />
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z" />
      </svg>
      <a href="#" class="block text-gray-800 font-bold text-blue-900">Better Dev</a>
    </div>
    
    <!-- mobile menu button -->
    <button class="mobile-menu-button p-4 hover:bg-gray-100 focus:outline-none md:hidden">
      <svg class="h-5 w-5" 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="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>
  </div>
  
  
  
  <!-- sidebar -->
  <div class="sidebar overflow-y-auto bg-white text-blue-800 border-r-2 w-48 space-y-6 px-2 py-2 transform -translate-x-full fixed top-16 bottom-0 left-0 md:translate-x-0 transition duration-200 ease-in-out z-10">
    
    
    <!-- nav -->
    <nav>
      <a href="#" class="block py-2 5 px-4 flex items-center space-x-2  rounded hover:bg-blue-700 hover:text-white transition duration-1000">
        <svg class="w-4 h-4 inline-block" 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 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
          <span>Home</span>
      </a>
      <a href="" class="block py-2 5 px-4 flex items-center space-x-2  rounded hover:bg-blue-700 hover:text-white transition duration-100">Document</a>
      <a href="" class="block py-2 5 px-4">Projects</a>
      <a href="" class="block py-2 5 px-4">Settings</a>
      <a href="" class="block py-2 5 px-4">Projects</a>
      <a href="" class="block py-2 5 px-4">Settings</a>
      <a href="" class="block py-2 5 px-4">Projects</a>
      <a href="" class="block py-2 5 px-4">Settings</a>
      <a href="" class="block py-2 5 px-4">Projects</a>
      <a href="" class="block py-2 5 px-4">Settings</a>
      <a href="" class="block py-2 5 px-4">Projects</a>
      <a href="" class="block py-2 5 px-4">Settings</a>
      <a href="" class="block py-2 5 px-4">Projects</a>
      <a href="" class="block py-2 5 px-4">Settings</a>
      
      
    </nav>
  </div>
  
   <!-- container -->
  <div class="absolute top-16 bottom-0 md:left-48 overflow-y-auto">
    <!-- content -->
    <div class="flex-1 p-10 text-2xl font-bold">
     Content goes here!
     
      <p class="text-sm font-normal">
       Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum ratione, ducimus dignissimos accusantium voluptas molestias. Porro, ex. Quod necessitatibus consequatur quae asperiores, iste ullam, eum fugiat numquam quia aliquam totam.
       Maiores tempore at quam aut. Ad temporibus vitae libero labore aspernatur in esse autem ipsum nisi non aut laboriosam obcaecati natus deserunt dolore dolorum accusamus magnam, saepe tempore dicta necessitatibus.
       Numquam est, odit facere iusto aliquam commodi deleniti porro velit neque. Ipsa accusantium tempora est amet. Recusandae autem veritatis, excepturi, architecto illum ipsum nam quibusdam cum quaerat ad alias impedit.
       Ipsum mollitia sint voluptate suscipit ducimus. Pariatur facilis voluptates nam eos, magnam ad consequuntur velit eius minima voluptatibus repellendus quis suscipit distinctio ipsum odio autem, obcaecati at! Nam, molestias eligendi!
       Veritatis iusto harum rerum hic unde reiciendis! Aspernatur tempore numquam harum assumenda eius, vero quae aperiam consectetur at commodi nemo ab corporis consequatur illum animi facere esse tempora? Asperiores, pariatur!
      </p>
     
      <p class="text-sm font-normal">
       Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum ratione, ducimus dignissimos accusantium voluptas molestias. Porro, ex. Quod necessitatibus consequatur quae asperiores, iste ullam, eum fugiat numquam quia aliquam totam.
       Maiores tempore at quam aut. Ad temporibus vitae libero labore aspernatur in esse autem ipsum nisi non aut laboriosam obcaecati natus deserunt dolore dolorum accusamus magnam, saepe tempore dicta necessitatibus.
       Numquam est, odit facere iusto aliquam commodi deleniti porro velit neque. Ipsa accusantium tempora est amet. Recusandae autem veritatis, excepturi, architecto illum ipsum nam quibusdam cum quaerat ad alias impedit.
       Ipsum mollitia sint voluptate suscipit ducimus. Pariatur facilis voluptates nam eos, magnam ad consequuntur velit eius minima voluptatibus repellendus quis suscipit distinctio ipsum odio autem, obcaecati at! Nam, molestias eligendi!
       Veritatis iusto harum rerum hic unde reiciendis! Aspernatur tempore numquam harum assumenda eius, vero quae aperiam consectetur at commodi nemo ab corporis consequatur illum animi facere esse tempora? Asperiores, pariatur!
      </p>
     
     
     
     
    </div>
    
  </div>
  
</div>

const btn = document.querySelector('.mobile-menu-button')
const sidebar = document.querySelector('.sidebar')

btn.addEventListener('click', e => {
  e.stopPropagation()
  sidebar.classList.toggle('-translate-x-full')
})

document.addEventListener('click', () => {
  sidebar.classList.add('-translate-x-full')
})