From 4262634019a9fa4276330585a4df1326d70b8586 Mon Sep 17 00:00:00 2001
From: Muntaser Muttaqi <muntasermuttaqi@gmail.com>
Date: Fri, 23 Jun 2023 00:58:39 +0600
Subject: [PATCH] Implemented smooth transition and fixed position for the
 banner

- The banner now features a seamless transition effect when it appears or disappears, providing a more polished and professional feel. Additionally, it is equipped with automatic hiding functionality.
---
 stubs/livewire/resources/views/components/banner.blade.php | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/stubs/livewire/resources/views/components/banner.blade.php b/stubs/livewire/resources/views/components/banner.blade.php
index b4e5af2e2..47de68b82 100644
--- a/stubs/livewire/resources/views/components/banner.blade.php
+++ b/stubs/livewire/resources/views/components/banner.blade.php
@@ -2,13 +2,13 @@
 
 <div x-data="{{ json_encode(['show' => true, 'style' => $style, 'message' => $message]) }}"
             :class="{ 'bg-indigo-500': style == 'success', 'bg-red-700': style == 'danger', 'bg-gray-500': style != 'success' && style != 'danger' }"
-            style="display: none;"
-            x-show="show && message"
-            x-init="
+            class="fixed w-full z-10" style="display: none;" x-show="show && message" x-on:click.outside="show = false"
+            x-transition.duration.500ms x-init="
                 document.addEventListener('banner-message', event => {
                     style = event.detail.style;
                     message = event.detail.message;
                     show = true;
+                    setTimeout(() => show = false, 3000);
                 });
             ">
     <div class="max-w-screen-xl mx-auto py-2 px-3 sm:px-6 lg:px-8">