Added a navigation bar wrapper and added relativity to the main nav

Raccoon254 · Jun 22, 2024 · 223efee · 223efee
1 parent cfd7c28
commit 223efee
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 4 deletions.
diff --git a/app/Models/User.php b/app/Models/User.php
@@ -64,7 +64,7 @@ public function referrals(): HasMany
 
     public function getAvatarAttribute(): string
     {
-        return 'https://api.dicebear.com/8.x/identicon/svg?seed=' . $this->name .'rowColor=fff';
+        return 'https://api.dicebear.com/8.x/identicon/svg?seed=' . $this->name;
     }
 
     public function getProfilePhotoAttribute(): string

diff --git a/resources/css/app.css b/resources/css/app.css
@@ -75,3 +75,7 @@ input:-webkit-autofill {
 .custom-danger-btn{
     @apply bg-red-500 text-white px-4 py-2 rounded-md transition-all duration-300 ease-in-out hover:bg-red-600;
 }
+
+.z-custom{
+    z-index: 100000000000 !important;
+}
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
@@ -18,9 +18,11 @@
 </head>
 <body class="font-sans antialiased">
 <div class="min-h-screen bg-white">
-    <livewire:navbar/>
+    <div class="z-custom relative w-full bg-white px-4 flex justify-between items-center gap-4">
+        <livewire:navbar/>
+    </div>
     <livewire:alerts/>
-    <div class="flex relative gap-2 p-2">
+    <div class="flex relative z-40 gap-2 p-2">
         <livewire:sidebar/>
         <!-- Page Content -->
         <main class="w-full bg-gray-100 text-black/80 overflow-clip rounded-[16px]">

diff --git a/resources/views/layouts/navigation.blade.php b/resources/views/layouts/navigation.blade.php
@@ -48,7 +48,7 @@
             <img tabindex="0" role="button" class="h-8 w-8 ring-1 ring-white rounded-full"
                  src="{{ auth()->user()->profile_photo }}" alt="{{ auth()->user()->name }}"/>
 
-            <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-white rounded-lg ring ring-blue-500 ring-opacity-40 w-52">
+            <ul tabindex="0" class="dropdown-content z-50 menu p-2 shadow bg-white rounded-lg ring ring-blue-500 ring-opacity-40 w-52">
                 <li>
                     <a href="{{ route('profile.edit') }}" class="flex gap-2">
                         <i class="fas fa-user text-gray-500"></i>