<!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 src="https://cdn.tailwindcss.com"></script>
    <title>Dashboard demo</title>
</head>
<body>
    <nav class="border-b border-gray-200 fixed z-30 w-full">
         
        <div class="px-3 py-3 lg:px-5 lg:pl-3">
           <div class="flex items-center justify-between">
              <div class="flex items-center justify-start">
                 
                 <button id="toggleSidebarMobile" aria-expanded="true" aria-controls="sidebar"
                    class="lg:hidden mr-2 text-gray-100 cursor-pointer p-2 rounded">
                    <svg id="toggleSidebarMobileHamburger" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"
                       xmlns="http://www.w3.org/2000/svg">
                       <path fill-rule="evenodd"
                          d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
                          clip-rule="evenodd"></path>
                    </svg>
                    <svg id="toggleSidebarMobileClose" class="w-6 h-6 hidden text-gray-100" fill="currentColor"
                       viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                       <path fill-rule="evenodd"
                          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                          clip-rule="evenodd"></path>
                    </svg>
                 </button>
                 <a href="https://demo.themesberg.com/windster/" class="text-xl font-bold flex items-center lg:ml-2.5">
                    <span class="self-center whitespace-nowrap">Relief Camp</span>
                 </a>
              </div>
              
              <div class="flex items-center justify-end">
                 <button id="toggleSidebarMobileSearch" type="button"
                    class="lg:hidden text-gray-500 hover:text-gray-900 hover:bg-gray-100 p-2 rounded-lg">
                 </button>
                 <div x-data="{ dropdownOpen: false }" class="relative">
                    <button @click="dropdownOpen = ! dropdownOpen"
                       class="relative block h-7 w-7 rounded-full overflow-hidden shadow focus:outline-none">
                       <img class="h-full w-full object-cover"
                          src="https://thumbs.dreamstime.com/b/default-avatar-profile-vector-user-profile-default-avatar-profile-vector-user-profile-profile-179376714.jpg"
                          alt="Your avatar">
                    </button>

                    <div x-show="dropdownOpen" @click="dropdownOpen = false" class="fixed inset-0 h-full w-full z-10"
                       style="display: none;"></div>

                    <div x-show="dropdownOpen"
                       class="absolute right-0 mt-2 w-48 bg-white rounded-md overflow-hidden shadow-xl z-10"
                       style="display: none;">
                       <p class="px-4 py-2 font-montserrat font-medium text-base text-gray-900">User Name</p>
                       <div class="bg-gray-500" style="padding: 0.5px 0px;"></div>
                       <a href=""
                          class="block px-4 py-2 font-montserrat text-sm text-gray-700 hover:bg-indigo-600 hover:text-white">Logout</a>
                       <a href=""
                          class="block px-4 py-2 font-montserrat text-sm text-gray-700 hover:bg-indigo-600 hover:text-white">Delete Account</a>
                    </div>
                 </div>
              </div>
           </div>
     </nav>



    <div class="flex overflow-hidden bg-white pt-16">
        <aside id="sidebar"
        class="fixed hidden z-20 h-full top-0 left-0 pt-16 flex lg:flex flex-shrink-0 flex-col w-64 transition-width duration-75"
        aria-label="Sidebar" style="background-color: #004e64;">
           <div class="relative flex-1 flex flex-col min-h-0 border-r border-gray-200 bg-white pt-0">
              <div class="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto" style="background-color: #004e64;">
                 <div class="flex-1 px-3 divide-y space-y-1">
                    <ul class="space-y-2 pb-2">

                       <li>
                          <a id="dashboard_btn" class="text-base cursor-pointer text-gray-800 bg-gray-100 font-normal rounded-lg flex items-center p-2 hover:bg-gray-100 hover:text-gray-800 group">
                             <svg xmlns="http://www.w3.org/2000/svg"
                                class="h-6 w-6 flex-shrink-0 transition duration-75"
                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                   d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                   d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
                             </svg>
                             <span class="ml-3">Dashboard</span>
                          </a>
                       </li>
                       <li>
                          <a class="text-base cursor-default text-gray-100 font-normal rounded-lg flex items-center p-2 group">
                             <svg xmlns="http://www.w3.org/2000/svg"
                                class="h-6 w-6 flex-shrink-0"
                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                   d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
                             </svg>
                             <span class="ml-3 flex-1 whitespace-nowrap">People</span>
                          </a>

                       <li>
                          <a id="waiting_btn" class="text-base cursor-pointer text-gray-100 font-normal rounded-lg flex items-center p-2 hover:bg-gray-100 hover:text-gray-800 group">
                             <svg xmlns="http://www.w3.org/2000/svg"
                                class="ml-7 h-6 w-6 flex-shrink-0 transition duration-75"
                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                   d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                             </svg>
                             <span class="pl-2">Booked This Camp</span>
                          </a>
                       </li>
                       <li>
                          <a id="arrived_btn" class="text-base cursor-pointer text-gray-100 font-normal rounded-lg flex items-center p-2 hover:bg-gray-100 hover:text-gray-800 group">
                             <svg xmlns="http://www.w3.org/2000/svg"
                                class="ml-7 h-6 w-6 flex-shrink-0"
                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                   d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                             </svg>
                             <span class="pl-2">Currently in Camp</span>
                          </a>
                       </li>

                       </li>
                       <li>
                          <a id="requirement_btn" class="text-base cursor-pointer text-gray-100 font-normal rounded-lg hover:bg-gray-100 hover:text-gray-800 flex items-center p-2 group ">
                             <svg xmlns="http://www.w3.org/2000/svg"
                                class="h-6 w-6 flex-shrink-0"
                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                   d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
                             </svg>
                             <span class="ml-3 flex-1 whitespace-nowrap">Requirements</span>
                          </a>
                       </li>
                       <li>
                          <a id="edit_btn" class="text-base text-gray-100 font-normal rounded-lg hover:bg-gray-100 hover:text-gray-800 flex items-center p-2 group ">
                             <svg xmlns="http://www.w3.org/2000/svg"
                                class="h-6 w-6 flex-shrink-0"
                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                   d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                             </svg>
                             <span class="ml-3 flex-1 whitespace-nowrap">Edit Profile</span>
                          </a>
                       </li>
                       <li>
                          <a href=""
                             class="text-base text-gray-100 font-normal rounded-lg hover:bg-gray-100 hover:text-gray-800 flex items-center p-2 group ">
                             <svg xmlns="http://www.w3.org/2000/svg"
                                class="h-6 w-6 flex-shrink-0"
                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                   d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
                             </svg>
                             <span class="ml-3 flex-1 whitespace-nowrap">Log Out</span>
                          </a>
                       </li>
                    </ul>
                 </div>
              </div>
           </div>
        </aside>



</body>
</html>