Add a persistent left sidebar to the signed-in layout
App.vue now renders a left AppSidebar beside the routed view for any
requiresAuth page, staying mounted as you move between the dashboard and
projects. The sidebar has a Dashboard link (icon), a divider, the project list
(each an icon link, current page highlighted via RouterLink active-class), and a
compact new-project form that jumps to the created project.
- New /dashboard route + DashboardView ("under construction"); / and unknown
paths redirect there. HomeView removed -- its project list and form moved into
the sidebar.
- <RouterView :key="route.path"> so navigating project -> project via the
sidebar remounts and reloads instead of reusing the instance.
- Signed-out routes (login/register/verify-email) render without the sidebar.
Icons are inline SVG -- no new dependency.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -4,10 +4,11 @@ import { useAuthStore } from '../stores/auth'
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{ path: '/', redirect: { name: 'dashboard' } },
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: () => import('../views/HomeView.vue'),
|
||||
path: '/dashboard',
|
||||
name: 'dashboard',
|
||||
component: () => import('../views/DashboardView.vue'),
|
||||
meta: { requiresAuth: true },
|
||||
},
|
||||
{
|
||||
@@ -40,22 +41,24 @@ const router = createRouter({
|
||||
component: () => import('../views/RegisterView.vue'),
|
||||
meta: { guestOnly: true },
|
||||
},
|
||||
{ path: '/:pathMatch(.*)*', redirect: { name: 'home' } },
|
||||
{ path: '/:pathMatch(.*)*', redirect: { name: 'dashboard' } },
|
||||
],
|
||||
})
|
||||
|
||||
const DEFAULT_PATHS = new Set(['/', '/dashboard'])
|
||||
|
||||
router.beforeEach((to) => {
|
||||
const auth = useAuthStore()
|
||||
|
||||
if (to.meta.requiresAuth && !auth.isAuthenticated) {
|
||||
return {
|
||||
name: 'login',
|
||||
query: to.fullPath === '/' ? {} : { redirect: to.fullPath },
|
||||
query: DEFAULT_PATHS.has(to.path) ? {} : { redirect: to.fullPath },
|
||||
}
|
||||
}
|
||||
|
||||
if (to.meta.guestOnly && auth.isAuthenticated) {
|
||||
return { name: 'home' }
|
||||
return { name: 'dashboard' }
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user