feat: logout from navbar. fix: Refresh on login to fetch new dashboard layout

Author: syntaxlexx

resources/ts/Components/AdminSidebar.svelte

@@ -47,7 +47,7 @@
             icon: 'user',
         },
         {
-            title: 'Go Home',
+            title: 'Go Frontend',
             route: '/',
             icon: 'arrow-back',
         },

resources/ts/Layouts/AppLayout.svelte

@@ -3,6 +3,8 @@
     import MainLayout from './MainLayout.svelte'
     import { page, inertia, useForm } from '@inertiajs/svelte'
     import Footer from '@/Components/Footer.svelte'
+    import { confirmAction } from '@/helpers'
+    import { toasts } from 'svelte-toasts'
 
     $: auth = $page.props.auth.user
 
@@ -41,26 +43,13 @@
         isNavCollapsed = true
         e.preventDefault()
 
-        // const confirm: ModalSettings = {
-        //     type: 'confirm',
-        //     title: 'Logout?',
-        //     body: 'Are you sure you want to logout?',
-        //     response: (r: boolean) => {
-        //         if (r) {
-        //             $form.post(route('logout'), {
-        //                 onSuccess: () => {
-        //                     const t: ToastSettings = {
-        //                         message: 'Logged out',
-        //                         background: 'variant-filled-success',
-        //                     }
-        //                     toastStore.trigger(t)
-        //                 },
-        //             })
-        //         }
-        //     },
-        // }
-
-        // modalStore.trigger(confirm)
+        confirmAction('Are you sure you want to logout?', () => {
+            $form.post(route('logout'), {
+                onSuccess: () => {
+                    toasts.success('Logged out')
+                },
+            })
+        })
     }
 </script>
 

resources/ts/Layouts/DashboardLayout.svelte

@@ -102,7 +102,9 @@
                 </div>
             </div>
 
-            <slot />
+            <main class="container px-2 md:px-4 lg:px-5">
+                <slot />
+            </main>
         </div>
     </div>
 </MainLayout>

resources/ts/Pages/Auth/Login.svelte

@@ -27,7 +27,11 @@
     function handleSubmit(e) {
         e.preventDefault()
 
-        $form.post(route('login'))
+        $form.post(route('login'), {
+            onSuccess: resp => {
+                window.location.reload()
+            },
+        })
     }
 </script>
 

resources/ts/Pages/User/Dashboard.svelte

@@ -9,7 +9,7 @@
     onMount(() => (ready = true))
 </script>
 
-<div class="container mt-5">
+<div class="mt-5">
     {#if ready}
         <div in:fly={{ y: -70, duration: 300, easing: quintOut }}>
             <Title>User Dashboard</Title>

resources/ts/Pages/User/Profile/MainProfile.svelte

@@ -2,6 +2,6 @@
     import { Title } from '@/Components'
 </script>
 
-<div class="container mt-5">
+<div class="mt-5">
     <Title>Profile</Title>
 </div>

resources/ts/app.ts

@@ -13,6 +13,7 @@ const appName = window.document.getElementsByTagName('title')[0]?.innerText || '
 createInertiaApp({
     title: (title: string | null) => `${title || ''} - ${appName}`,
     resolve: (name: string) => {
+        console.log("name", name);
         // set eager loading to true to get one js file. NB: Must be Enabled if Svelte
         const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
         let page = pages[`./Pages/${name}.svelte`]