Logout button

Author: tatevikg1

assets/vue/layouts/AdminLayout.vue

@@ -10,7 +10,7 @@
         >
           <BaseIcon name="menu" />
         </button>
-        <div class="relative max-w-md w-full transition-all ">
+        <div class="relative max-w-md w-full transition-all">
           <BaseIcon name="search" />
           <input
               placeholder="Search subscribers, campaigns..."
@@ -22,18 +22,44 @@
 
       <div class="flex items-center gap-4">
         <button class="hidden sm:flex items-center gap-2 px-4 py-2 bg-ext-wf1 text-white text-xs font-bold rounded-lg hover:bg-ext-wf3 transition-shadow shadow-sm shadow-indigo-500/20">
-          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
+               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M5 12h14"></path>
+            <path d="M12 5v14"></path>
+          </svg>
           Create Campaign
         </button>
 
         <!-- User dropdown -->
-        <div class="flex items-center gap-3 pl-2 group cursor-pointer">
-          <div class="flex flex-col items-end hidden sm:flex">
-            <span class="text-sm font-bold text-slate-800 leading-none">{{ adminData.login_name || 'Admin User' }}</span>
-            <span class="text-[10px] text-slate-500 mt-0.5">{{ adminData.super_user ? 'Super Admin' : 'Administrator' }}</span>
+        <div class="relative">
+          <div
+              class="flex items-center gap-3 pl-2 cursor-pointer"
+              @click="toggleDropdown"
+          >
+            <div class="flex flex-col items-end hidden sm:flex">
+              <span class="text-sm font-bold text-slate-800 leading-none">
+                {{ adminData.login_name || 'Admin User' }}
+              </span>
+              <span class="text-[10px] text-slate-500 mt-0.5">
+                {{ adminData.super_user ? 'Super Admin' : 'Administrator' }}
+              </span>
+            </div>
+
+            <BaseIcon name="chevronDown" />
           </div>
 
-          <BaseIcon name="chevronDown" />
+          <!-- Dropdown -->
+          <div
+              v-if="dropdownOpen"
+              class="absolute right-0 mt-2 w-40 bg-white border border-slate-200 rounded-lg shadow-lg py-1 z-50"
+          >
+            <a
+                href="/logout"
+                class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-100"
+            >
+              Logout
+            </a>
+          </div>
         </div>
       </div>
     </header>
@@ -46,22 +72,28 @@
 </template>
 
 <script setup>
-/* No imports required */
 import BaseIcon from "../components/base/BaseIcon.vue";
 import { useSidebar } from "../composables/useSidebar";
 import { onMounted, ref } from "vue";
 
 const { openSidebar } = useSidebar();
+
 const adminData = ref({});
+const dropdownOpen = ref(false);
+
+const toggleDropdown = () => {
+  dropdownOpen.value = !dropdownOpen.value;
+};
 
 onMounted(async () => {
   try {
     const response = await fetch('/admin-about', {
       headers: {
-        'Accept': 'application/json',
+        Accept: 'application/json',
         'X-Requested-With': 'XMLHttpRequest'
       }
     });
+
     if (response.ok) {
       adminData.value = await response.json();
     }