From 8079b878a19fc931f837a24cf4eec1eadceef363 Mon Sep 17 00:00:00 2001
From: = <kushal.sentientgeeks@outlook.com>
Date: Thu, 21 May 2026 11:50:04 +0000
Subject: [PATCH] Feat: add dynamic topbar with role-based display

- Updated `dashboard-topbar.blade.php` to show "Admin Panel" only for users with the Admin role.
- Introduced user initials avatar with logout functionality via dropdown menu.
---
 .../components/dashbord-topbar.blade.php      | 30 +++++++++++++++----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/resources/views/components/dashbord-topbar.blade.php b/resources/views/components/dashbord-topbar.blade.php
index 10c522a..80fe909 100644
--- a/resources/views/components/dashbord-topbar.blade.php
+++ b/resources/views/components/dashbord-topbar.blade.php
@@ -1,12 +1,32 @@
+@php use App\Enums\DefaultUserRole; @endphp
 <div class="w-full py-4 px-10 border-b border-gray-200 flex justify-center">
     <div class="flex-1 py-2">
-       <p class="text-xl font-medium">Admin Panel</p>
+        @if(auth()->user()?->hasRole(DefaultUserRole::Admin->value))
+            <p class="text-xl font-medium">Admin Panel</p>
+        @endif
     </div>
-    <div class="flex space-x-4">
+    <div class="flex space-x-4 items-center">
         <x-shared.button>
-            <x-lucide-bell class="w-5 h-5" />
+            <x-lucide-bell class="w-5 h-5"/>
         </x-shared.button>
-        <div class="rounded-full w-12 h-12 bg-blue-200">
-        </div>
+
+        <x-mary-dropdown>
+            <x-slot:trigger>
+                <div
+                    class="rounded-full w-12 h-12 bg-blue-200 flex items-center justify-center font-semibold text-blue-800 cursor-pointer">
+                    {{ auth()->user()->initials() }}
+                </div>
+            </x-slot:trigger>
+
+            <form method="POST" action="{{ route('logout') }}">
+                @csrf
+                <x-mary-menu-item
+                    title="Log out"
+                    icon="lucide.log-out"
+                    onclick="event.preventDefault(); this.closest('form').submit();"
+                />
+            </form>
+        </x-mary-dropdown>
     </div>
 </div>
+