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.

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>
+