Basic design created

resources/js/app.js

@@ -5,6 +5,15 @@ import { InertiaProgress } from '@inertiajs/progress'
 import Vue3Toastify, { toast } from 'vue3-toastify'
 import 'vue3-toastify/dist/index.css'
 
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+// Icons importieren
+import { faUser, faTrash, faCheck } from '@fortawesome/free-solid-svg-icons'
+
+library.add(faUser, faTrash, faCheck)
+
+
 InertiaProgress.init()
 
 createInertiaApp({
@@ -24,12 +33,28 @@ createInertiaApp({
         const vueApp = createApp({ render: () => h(App, props) })
 
         vueApp.use(plugin)
+
+        vueApp.component('font-awesome-icon', FontAwesomeIcon)
+
         vueApp.use(Vue3Toastify, {
-            autoClose: 3000,
-            position: 'top-right',
+            autoClose: 10000,
+            position: 'bottom-right',
             pauseOnHover: true,
+            hideProgressBar: false, // Progressbar anzeigen
+            toastDefaults: {
+                success: {
+                    style: {background: '#4caf50', color: '#fff'}, // grün
+                    progressStyle: {background: '#2e7d32', height: '4px'},
+                },
+                error: {
+                    style: {background: '#f44336', color: '#fff'}, // rot
+                    progressStyle: {background: '#c62828', height: '4px'},
+                },
+            },
         })
 
+
+
         vueApp.config.globalProperties.$toast = toast
         vueApp.mount(el)
     },