Navbar with sidebar in tailwind css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
	<script>
		tailwind.config = {
		  theme: {
			extend: {
			  colors: {				
				primary: '#BD1E51',
      			secondary: '#490B3D',
				tertiary: '#F1B814'
			  }
			}
		  }
		}
	  </script>
</head>
<body>    
    <div>
            <nav class="w-full h-16 bg-purple-800 flex justify-between">
                <div class="p-5 text-white">CAPSCOM TECHNOLOGY</div>
                <ul class="flex">                   
                    <li class="p-5 text-white">Account</li>
                    <li class="p-5 text-white hidden md:block">Logout</li> 
                    <li class="p-2 text-white block md:hidden" onclick="toggleSidebar();">
                        <i class="bi bi-justify" style="font-size: 2rem;"></i>
                    </li> 
                </ul>
            </nav>    
            <div class="md:flex" x-data="{open:true}">
                <div      
                :class="{'md:w-72': open, 'md:w-20': ! open}"
                id="sidebar"
                class="sidebar 
                bg-purple-500 
                w-full md:w-72 md:h-screen pt-0 md:pt-8 shrink-0 relative">
                    <div 
                        class="hidden md:block p-2 h-8 w-8 bg-white 
                        top-0
                        -right-4 absolute md:flex md:justify-center 
                        md:items-center rounded-full cursor-pointer 
                        border-4"
                        x-on:click="open=!open"
                    >                    
                        <i class="bi" :class="{'bi-arrow-left':open, 'bi-arrow-right':!open}"></i>
                    </div>
                    <ul>
                        <li class="p-2 hover:bg-white cursor-pointer transition-all ease-in-out flex items-center flex-wrap">
                          <div class="px-1">
                            <i class="bi bi-book" style="font-size: 1.5rem;"></i> 
                          </div>
                          <div class="px-2">
                            Courses
                          </div>
                        </li>                        
                    </ul>
                </div>
                <div class="content p-5 md:h-screen overflow-auto">
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores doloribus neque     
                </div>
            </div>
    </div>
    
</body>
</html>
<script>
let sidebar=document.querySelector("#sidebar");
function myFunction(x) {
  if (x.matches) {
    sidebar.classList.remove("hidden"); 
  }
  else{
    sidebar.classList.add("hidden");
  }
}
const mmObj = window.matchMedia("(min-width: 768px)")
myFunction(mmObj);
mmObj.addListener(myFunction);

function toggleSidebar(){
    sidebar.classList.toggle("hidden");
}
</script>
© 2016 - 2022, All Rights are Reserved.