Top Bar layout fixes (#43)

* chore: update deps

* feat: get user avatar

* feat: top bar items look

* test: add getFlatpackUserAvatar method to user model

composer.json

@@ -3,7 +3,6 @@
     "description": "Flatpack: Administration panel for Laravel, ready to assemble.",
     "keywords": [
         "flatpack",
-        "laravel-flatpack",
         "laravel",
         "administration",
         "admin",

resources/views/components/user-menu.blade.php

@@ -1,9 +1,12 @@
 @auth
 <div x-data="{open: false}" class="relative">
     <button @click="open = !open" aria-label="{{ __('User Options') }}" aria-expanded="true" aria-haspopup="true" class="flex items-center justify-center gap-2 text-sm text-gray-100 hover:text-white">
-        <x-icon name="user-circle" style="outline" class="w-6 h-6" />
-        <span>{{ $user->name }}</span>
-        <x-icon name="chevron-down" style="outline" class="w-3 h-3" />
+        <img
+            src="{{ $user->getFlatpackUserAvatar() }}"
+            alt="{{ $user->name }}"
+            class="w-6 h-6 rounded-full"
+        />
+        <x-icon name="chevron-down" style="outline" class="w-3 h-3 mx-1" />
     </button>
     <div x-show="open"
         x-transition:enter="transition ease-out duration-200"

resources/views/includes/layout/topbar.blade.php

@@ -13,11 +13,11 @@ class="menu-toggle">
                     <livewire:flatpack.search-box />
                 @endif
             </div>
-            <div class="flex items-center justify-end gap-4 w-1/2">
+            <div class="flex items-center justify-end gap-6 w-1/2">
                 @foreach (config('flatpack.layout.buttons', []) as $button)
                     <a href="{{ data_get($button, 'href') }}"
                        target="{{ data_get($button, 'target', '_self') }}"
-                       class="outline-none inline-flex justify-center items-center group transition-all ease-in duration-150 focus:ring-0 hover:shadow-sm disabled:opacity-80 disabled:cursor-not-allowed rounded gap-x-2 text-xs px-4 py-2 text-secondary-100 border border-secondary-600 hover:bg-secondary-100 hover:text-gray-700">
+                       class="outline-none inline-flex justify-center items-center gap-2 text-sm min-w-min h-8 opacity-70 hover:opacity-100">
                         @if (data_get($button, 'icon'))
                         <x-icon name="{{ data_get($button, 'icon') }}" style="solid" class="w-4 h-4"  />
                         @endif

src/Contracts/FlatpackUser.php

@@ -5,4 +5,6 @@
 interface FlatpackUser
 {
     public function isFlatpackAdmin();
+
+    public function getFlatpackUserAvatar();
 }

tests/Models/User.php

@@ -62,4 +62,9 @@ public function posts(): HasMany
     {
         return $this->hasMany(Post::class);
     }
+
+    public function getFlatpackUserAvatar()
+    {
+        return 'mock-avatar-url';
+    }
 }