refactor: updated User dashboard

Author: syntaxlexx

resources/ts/Components/AdminSidebar.svelte

@@ -21,7 +21,7 @@
             route: route('admin.settings.reset-system'),
         },
         {
-            title: 'Go Frontend',
+            title: 'Go Home',
             route: '/',
         },
     ]

resources/ts/Components/UserSidebar.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+    import { drawerStore } from '@skeletonlabs/skeleton'
+    import { inertia, page } from '@inertiajs/svelte'
+
+    type NavItem = {
+        title: string
+        route: string
+    }
+
+    const navItems: NavItem[] = [
+        {
+            title: 'Dashboard',
+            route: route('user.dashboard'),
+        },
+        {
+            title: ' My Profile',
+            route: route('user.dashboard'),
+        },
+        {
+            title: 'Go Home',
+            route: '/',
+        },
+    ]
+
+    function drawerClose(): void {
+        drawerStore.close()
+    }
+</script>
+
+<nav class="list-nav">
+    <ul>
+        {#each navItems as item}
+            <li>
+                <a
+                    class="!rounded hover:rounded focus:rounded"
+                    class:bg-primary-active-token={item.route.endsWith($page.url)}
+                    href={item.route}
+                    use:inertia
+                    on:click={drawerClose}
+                    >{item.title}
+                </a>
+            </li>
+        {/each}
+    </ul>
+</nav>

resources/ts/Layouts/DashboardLayout.svelte

@@ -1,8 +1,9 @@
-<script>
+<script lang="ts">
     import MainLayout from './MainLayout.svelte'
-    import { AppBar } from '@skeletonlabs/skeleton'
+    import { AppBar, AppShell } from '@skeletonlabs/skeleton'
     import { page, inertia, useForm } from '@inertiajs/svelte'
-    import { LightSwitch } from '@skeletonlabs/skeleton'
+    import { LightSwitch, Drawer, drawerStore } from '@skeletonlabs/skeleton'
+    import UserSidebar from '@/Components/UserSidebar.svelte'
 
     $: auth = $page.props.auth.user
 
@@ -13,33 +14,67 @@
 
         $form.post(route('logout'))
     }
+
+    function drawerOpen(): void {
+        drawerStore.open({})
+    }
 </script>
 
 <MainLayout>
-    <svelte:fragment slot="header">
-        <div class="bg-surface-100-800-token">
-            <div class="container">
-                <AppBar background="bg-transparent">
-                    <svelte:fragment slot="lead">
-                        <a href={route('user.dashboard')} use:inertia>
-                            <strong class="text-xl uppercase">{$page.props.siteName}</strong>
-                        </a>
-                    </svelte:fragment>
-
-                    <svelte:fragment slot="trail">
-                        <LightSwitch />
-
-                        <form on:submit|preventDefault={handleLogout}>
-                            <button type="submit" class="btn btn-sm variant-ghost-surface"> Logout </button>
-                        </form>
-
-                        <a class="btn btn-sm variant-ghost-surface" href="/dashboard" use:inertia> Profile </a>
-                    </svelte:fragment>
-                </AppBar>
+    <AppShell
+        slotSidebarLeft="bg-surface-500/5 w-0 lg:w-64"
+        regionPage="overflow-y-auto relative h-screen scrollbar-hidden"
+    >
+        <svelte:fragment slot="header">
+            <div class="bg-surface-100-800-token">
+                <div class="container">
+                    <AppBar background="bg-transparent">
+                        <svelte:fragment slot="lead">
+                            <button class="lg:hidden btn btn-sm mr-4" on:click={drawerOpen}>
+                                <span>
+                                    <svg viewBox="0 0 100 80" class="fill-token w-4 h-4">
+                                        <rect width="100" height="20" />
+                                        <rect y="30" width="100" height="20" />
+                                        <rect y="60" width="100" height="20" />
+                                    </svg>
+                                </span>
+                            </button>
+                            <a href={route('user.dashboard')} use:inertia>
+                                <strong class="text-xl uppercase">{$page.props.siteName}</strong>
+                            </a>
+                        </svelte:fragment>
+
+                        <svelte:fragment slot="trail">
+                            <LightSwitch />
+
+                            <form on:submit|preventDefault={handleLogout}>
+                                <button type="submit" class="btn btn-sm variant-ghost-surface"> Logout </button>
+                            </form>
+
+                            <span class="hidden lg:block">
+                                <a class="btn btn-sm variant-ghost-surface" href="/dashboard" use:inertia> Profile </a>
+                            </span>
+                        </svelte:fragment>
+                    </AppBar>
+                </div>
+            </div>
+        </svelte:fragment>
+
+        <!-- sidebar -->
+        <Drawer regionDrawer="mt-16 w-56 pb-16">
+            <UserSidebar />
+        </Drawer>
+
+        <svelte:fragment slot="sidebarLeft">
+            <div id="sidebar-left" class="hidden lg:block">
+                <div class="overflow-y-auto h-screen">
+                    <UserSidebar />
+                </div>
             </div>
-        </div>
-    </svelte:fragment>
+        </svelte:fragment>
 
-    <!-- content -->
-    <slot />
+        <!-- content -->
+        <slot />
+        <div class="my-4" />
+    </AppShell>
 </MainLayout>

resources/ts/Pages/User/Dashboard.svelte

@@ -13,7 +13,6 @@
     {#if ready}
         <div in:fly={{ y: -70, duration: 300, easing: quintOut }}>
             <Title>User Dashboard</Title>
-            <a href="/" use:inertia>Go Home</a>
         </div>
     {/if}
 </div>