Add sprinkle-admin

app/assets/components/NavBar.vue

@@ -1,22 +1,25 @@
 <script setup>
 import { useAuthStore } from '@userfrosting/sprinkle-account/stores'
+import { useRouter } from 'vue-router'
+const router = useRouter()
 
 // Logout API variables
 const auth = useAuthStore()
 </script>
 
 <template>
-    <UFNavBar title="Userfrosting">
-        <UFNavBarItem :to="{ name: 'home' }" label="Home" />
+    <UFNavBar title="Userfrosting" :to="{ name: 'home' }">
         <UFNavBarItem :to="{ name: 'about' }" label="About" />
         <UFNavBarItem :to="{ name: 'auth' }" label="Auth" />
-        <UFNavBarItem :to="{ name: 'register' }" label="Register" v-if="!auth.isAuthenticated" />
+        <UFNavBarItem :to="{ name: 'account.register' }" label="Register" v-if="!auth.isAuthenticated" />
         <UFNavBarLogin v-if="!auth.isAuthenticated" />
         <UFNavBarUserCard
             v-if="auth.isAuthenticated"
             :username="auth.user.full_name"
             :avatar="auth.user.avatar"
             :meta="auth.user.user_name">
+            <UFNavBarUserCardButton label="Dashboard" @click="router.push({ name: 'admin.dashboard' })" />
+            <UFNavBarUserCardButton label="My Account" @click="router.push({ name: 'admin.dashboard' })" />
             <UFNavBarUserCardButton label="Logout" @click="auth.logout()" />
         </UFNavBarUserCard>
     </UFNavBar>

app/assets/layouts/LayoutDashboard.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import NavBar from '../components/NavBar.vue'
 import FooterContent from '../components/FooterContent.vue'
+import AdminSidebarMenuItems from '@userfrosting/sprinkle-admin/components/SidebarMenuItems.vue'
 </script>
 
 <template>
     <NavBar />
     <UFSideBar>
         <UFSideBarLabel label="NAVIGATION" />
+        <AdminSidebarMenuItems />
     </UFSideBar>
     <UFMainContent>
         <RouterView />

app/assets/router/index.ts

@@ -1,3 +1,5 @@
+import AccountRoutes from '@userfrosting/sprinkle-account/routes'
+import AdminRoutes from '@userfrosting/sprinkle-admin/routes'
 import { createRouter, createWebHistory } from 'vue-router'
 
 const router = createRouter({
@@ -18,7 +20,7 @@ const router = createRouter({
                     name: 'about',
                     meta: {
                         auth: {
-                            redirect: { name: 'login' },
+                            redirect: { name: 'account.login' },
                         }
                     },
                     component: () => import('../views/AboutView.vue')
@@ -28,26 +30,15 @@ const router = createRouter({
                     name: 'auth',
                     component: () => import('../views/AuthView.vue')
                 },
-                {
-                    path: '/login',
-                    name: 'login',
-                    meta: {
-                        guest: {
-                            redirect: { name: 'home' }
-                        }
-                    },
-                    component: () => import('../views/LoginView.vue')
-                },
-                {
-                    path: '/register',
-                    name: 'register',
-                    meta: {
-                        guest: {
-                            redirect: { name: 'home' }
-                        }
-                    },
-                    component: () => import('../views/RegisterView.vue')
-                }
+                // Include sprinkles routes
+                ...AccountRoutes,
+            ]
+        },
+        {
+            path: '',
+            component: () => import('../layouts/LayoutDashboard.vue'),
+            children: [
+                ...AdminRoutes
             ]
         }
     ]