Replace the toast function with a bootstrap equivalent

assets/js/layouts/backend_layout.js

@@ -47,42 +47,38 @@ window.App.Layouts.Backend = (function () {
      * @param {Array} [actions] An array with custom actions that will be available to the user. Every array item is an
      * object that contains the 'label' and 'function' key values.
      */
-    function displayNotification(message = '- No message provided for this notification -', actions = null) {
-        if (!actions) {
-            actions = [];
-
-            setTimeout(() => {
-                $notification.fadeOut();
-            }, 5000);
+    function displayNotification(message, actions = []) {
+        if (!message) {
+            return;
         }
 
-        $notification.empty();
+        const $toast = $(`
+            <div class="toast bg-dark d-flex align-items-center mb-2 fade show position-fixed p-1 m-4 bottom-0 end-0 backend-notification" role="alert" aria-live="assertive" aria-atomic="true">
+                <div class="toast-body w-100 text-white">
+                    ${message}
+                </div>
+                <button type="button" class="btn-close btn-close-white me-2" data-bs-dismiss="toast" aria-label="Close"></button>
+            </div>
+        `).appendTo('body');
 
-        const $instance = $('<div/>', {
-            'class': 'notification alert alert-dismissible fade show',
-            'html': [
-                $('<strong/>', {
-                    'html': message
-                }),
-                $('<button/>', {
-                    'type': 'button',
-                    'class': 'btn-close',
-                    'data-bs-dismiss': 'alert'
-                })
-            ]
-        }).appendTo($notification);
-
-        actions.forEach((action) => {
+        actions.forEach(function (action) {
             $('<button/>', {
-                'class': 'btn btn-outline-secondary btn-xs',
-                'text': action.label,
-                'on': {
-                    'click': action.function
-                }
-            }).prependTo($instance);
+                class: 'btn btn-light btn-xs ms-2',
+                text: action.label,
+                on: {
+                    click: action.function,
+                },
+            }).prependTo($toast);
         });
 
-        $notification.show('fade');
+        const toast = new bootstrap.Toast($toast[0]);
+
+        toast.show();
+
+        setTimeout(() => {
+            toast.dispose();
+            $toast.remove();
+        }, 5000);
     }
 
     /**