<!-- 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">Mobile Nav</a>
    
    <button id="btn-toggle-mobile" class="btn-toggle-mobile text-sm px-4 bg-blue-500 rounded">toggle xx</button>
    

    <!-- 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" 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>


   <div class="hidden md:block bg-yellow-300 p-2">
    <!--       <button class="btn-toggle text-sm py-2 px-4 bg-blue-500 rounded" id="btn-toggle">t1</button> -->
      <button id="menu-toggle" class="btn-toggle text-sm py-2 px-4 bg-blue-500 rounded">t1</button>
      <button class="text-sm py-2 px-4 bg-blue-700 text-white rounded" id="menu-hide">t2</button>  
   </div>   

   
    <div id="wrapper" class="overflow-hidden md:pl-[250px]">    
      
      
      <!-- Sidebar -->
      <!-- <div id="sidebar-wrapper" class="z-50 absolute w-[0px] md:w-[250px] h-full ml-[-250px] overflow-y-auto bg-black transition duration-200"> -->
      <!-- md:-translate-x-full -->
      <div id="sidebar-wrapper"  class="sidebar
                                        z-50                  
                                        bg-blue-800
                                        text-blue-100 
                                        w-64 
                                        absolute 
                                        inset-y-0 space-y-6
                                        left-0
                                        py-7
                                        transform -translate-x-full 
                                        transition duration-200 ease-in-out
                                        
                                       
                                        md:overflow-hidden
                                        md:whitespace-nowrap
                                        md:relative md:-translate-x-full
                                        
                                        ">        

          <ul class="sidebar-nav list-none" id="menu">
            
            <li class="indent-3.5 leading-10">
               <a href="#" class="flex block text-slate-300 no-underline hover:border-r-4 hover:border-lime-400 hover:bg-slate-700 commentsToggle">
               <span class="py-2 px-2.5">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-monitor"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line>
                  </svg>
               </span>
               Dashboard 1</a>
                <ul class="comments hiddenx bg-slate-600 text-slate-300 pl-4" style="list-style-type:none;">
                  <li class="pl-5 cursor-pointer"><a href="#">link 1</a></li>
                  <li class="pl-5 cursor-pointer"><a href="#">link 2</a></li>
               </ul>
             </li>
            
            <li class="indent-3.5 leading-10">
               <a href="#" class="flex block text-slate-300 no-underline hover:border-r-4 hover:border-lime-400 hover:bg-slate-700 commentsToggle">
               <span class="py-2 px-2.5">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-monitor"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line>
                  </svg>
               </span>
               Dashboard 2</a>
                <ul class="comments hiddenx bg-slate-600 text-slate-300 pl-4 inactive" style="list-style-type:none;">
                  <li class="pl-4 cursor-pointer"><a href="#">link 1</a></li>
                  <li class="pl-4 cursor-pointer"><a href="#">link 2</a></li>
               </ul>
             </li>
            
            <li class="indent-3.5 leading-10">
               <a href="#" class="flex block text-slate-300 no-underline hover:border-r-4 hover:border-lime-400 hover:bg-slate-700 commentsToggle">
               <span class="py-2 px-2.5">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-monitor"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line>
                  </svg>
               </span>
               Dashboard 3</a>
                <ul class="comments hiddenx bg-slate-600 text-slate-300 pl-4 inactive" style="list-style-type:none;">
                  <li class="pl-4 cursor-pointer"><a href="#">link 1</a></li>
                  <li class="pl-4 cursor-pointer"><a href="#">link 2</a></li>
               </ul>
             </li> 
            
          </ul>
        
       </div>
      
      
      
      
<!--       <div id="page-content-wrapper" class="md:p-5 py-6 px-10 w-full relative overflow-hidden bg-red-500 md:bg-yellow-500">
        <div class="min-w-full">          
          content goes here 
          <img src="https://mdbootstrap.com/img/new/slides/041.jpg" class="max-w-full h-auto" alt="..." />
        </div> -->
        
        
        
        
        
        
      </div>
      
     </div>

/* .active{display : inline-block;}
.inactive{display : none;} */

.hiddenx {
    display: none;
}


#menu-toggle.hide-btn {
  display:none;
}

#wrapper {
/*    -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
   transition: all 0.5s ease; */
}

#wrapper.toggled-x #sidebar-wrapper {  
  width: 250px;
/*   opacity: 0.9;   */
 -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;  
}


@media (min-width: 768px) { 
  
/*    #wrapper.toggled-2 #sidebar-wrapper { width: 50px; }  
   #wrapper.toggled-2 #sidebar-wrapper:hover { width: 250px; }
  
   #wrapper.toggled-hide #sidebar-wrapper { width: 0px; } */
  
   #page-content-wrapper {
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
   }
  
   #wrapper.toggled-2 #page-content-wrapper {
      position: relative;
      margin-right: 0;
      margin-left: -200px;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
      width: auto;
   }
  
   #wrapper.toggled-hide #page-content-wrapper {
      position: relative;
      margin-right: 0;
      margin-left: -250px;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
      width: auto;
   }  
}

$(document).ready(function(){
  
//     $("#menu-toggle").click(function(e) {
//        e.preventDefault();
//        $("#wrapper").toggleClass("toggled-2");
//         //$('#menu ul').hide();
//         $('#menu ul').toggleClass('hiddenx');
           
//     });

    // $("#menu-hide").click(function(e) {
    //    e.preventDefault();
    //    $("#wrapper").toggleClass("toggled-hide");
    //    $("#sidebar-wrapper").toggle();
    //    // $('#menu ul').hide();
    //    $("#menu-toggle").toggleClass("hide-btn");
    // }); 

//     $("#btn-toggle").click(function(e) {
//        e.preventDefault();
//        $("#wrapper").toggleClass("toggled-x");
//        // $('#menu ul').hide();
//     });
  
//     $('.commentsToggle').click(function(){
//         $(this).siblings(".comments").toggleClass('hiddenx');
//     });
  
    // grab everything we need
    const btnMobile = document.querySelector(".btn-toggle-mobile");
    const btn = document.querySelector(".btn-toggle");
  
    const sidebar = document.querySelector(".sidebar");
    let isSidebarOpen = false;

    // add our event listener for the click
    btnMobile.addEventListener("click", () => {
      sidebar.classList.toggle("-translate-x-full");
    });
  
    // add our event listener for the click
    btn.addEventListener("click", () => {
    sidebar.classList.toggle("md:-translate-x-0");
    });
  

  
});
  

// $("#menu li").click(function() {
//   if($(this).closest("li").children("ul").length) {
//     $(this).closest("li").children("ul").toggleClass('active');
//     $(this).closest("li").children("ul").slideToggle('2000');
//   }
// });

// $("#menu li").click(function(){
//     $(this).toggle();
//   });