✨ feat (app): add toaster component for global notifications

app/app.vue

@@ -14,5 +14,7 @@ const dir = computed(() => (textDirection.value === 'rtl' ? 'rtl' : 'ltr'))
         <NuxtPage />
       </NuxtLayout>
     </div>
+
+    <Toaster />
   </ConfigProvider>
 </template>

app/components/layout/SidebarNavFooter.vue

@@ -50,7 +50,7 @@ const showModalTheme = ref(false)
             </SidebarMenuButton>
           </DropdownMenuTrigger>
           <DropdownMenuContent
-            class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg bg-white"
             :side="isMobile ? 'bottom' : 'right'"
             align="end"
           >
@@ -76,13 +76,13 @@ const showModalTheme = ref(false)
             <DropdownMenuSeparator />
             <DropdownMenuSeparator />
             <DropdownMenuGroup>
-              <DropdownMenuItem @click="showModalTheme = true">
+              <DropdownMenuItem class="hover:bg-gray-100" @click="showModalTheme = true">
                 <Icon name="i-lucide-user" />
                 Profile
               </DropdownMenuItem>
             </DropdownMenuGroup>
             <DropdownMenuSeparator />
-            <DropdownMenuItem @click="handleLogout">
+            <DropdownMenuItem class="hover:bg-gray-100" @click="handleLogout">
               <Icon name="i-lucide-log-out" />
               Log out
             </DropdownMenuItem>