cloud/project-manager
3
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Add a persistent left sidebar to the signed-in layout

Browse Source 
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:
aneurin
2026-09-04 13:55:31 +01:00
co-authored by Claude Sonnet 5
parent 9c1768ddb2
commit cd54b41ab7
8 changed files with 303 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1
View File
@@ -18,6 +18,7 @@ Each user owns **projects**, and each project holds ordered **cards**.
| 8 | Passwordless login — magic-link by default, password login behind a toggle | ✅ done |
| 9 | Per-project card statuses ("To do" / "Doing" / "Done"); status chip, new cards start with none | ✅ done |
| 10 | Project view — full-width, tabbed: alphabetical "All tasks" list + "Kanban" board, per-column drag ordering | ✅ done |
| 11 | Persistent left sidebar — Dashboard link + project list/new-project form; `/` → dashboard placeholder | ✅ done |
Registration signs the user in immediately and emails a magic link that verifies
the address; `user.email_verified` stays `false` until the link is opened. See
web/README.md
+17 -2
View File
@@ -35,12 +35,27 @@ src/stores/auth.ts Pinia store: token in localStorage, register/login/fetch
src/stores/projects.ts Pinia store: the user's projects (fetch + create)
src/stores/cards.ts Pinia store: one project's cards (CRUD + reorderColumn)
src/lib/api.ts fetch wrapper, bearer token, typed ApiError
src/components/AppSidebar.vue left nav: Dashboard link, divider, project list + new-project form
src/components/CardRow.vue editable text + status chip + delete, one card
src/components/KanbanCard.vue small draggable card for the board columns
src/views/ HomeView, ProjectView, LoginView, RegisterView,
src/views/ DashboardView, ProjectView, LoginView, RegisterView,
ProfileView, VerifyEmailView
```
## Layout
Signed-in "app" routes (`meta.requiresAuth`) render inside a persistent shell:
the top bar, then a left **sidebar** (`AppSidebar.vue`) beside the routed view.
The sidebar stays mounted across navigation — it holds a **Dashboard** link, a
divider, the project list, and a compact new-project form (creating one jumps to
it). The current page is highlighted via RouterLink's `active-class`.
`<RouterView :key="route.path">` remounts the view on every path change so
sidebar → project → project navigation always does a fresh load.
`/` redirects to `/dashboard` (`DashboardView.vue`, an "under construction"
placeholder). Signed-out routes (`/login`, `/register`, `/verify-email`) render
without the sidebar.
## Project detail
`/projects/:id` shows one project. It renders on a **full-width** layout (the
@@ -48,7 +63,7 @@ route sets `meta.wide`, which widens `.app__main` in `App.vue`). The title and
description are inline-editable (saved on blur via `PATCH /api/projects/:id`; the
description shows an "Add a description" placeholder when empty). A **Manage**
menu (top right) has a **Delete project** action that opens a confirmation modal;
confirming calls `DELETE /api/projects/:id` and returns to the all-projects view.
confirming calls `DELETE /api/projects/:id` and returns to the dashboard.
Below the header are two tabs (local `activeTab` state, `v-show` so both stay
mounted):
web/src/App.vue
+13 -1
View File
@@ -1,5 +1,7 @@
<script setup lang="ts">
import { computed } from 'vue'
import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router'
import AppSidebar from './components/AppSidebar.vue'
import { useAuthStore } from './stores/auth'
import { useCardsStore } from './stores/cards'
import { useProjectsStore } from './stores/projects'
@@ -10,6 +12,10 @@ const cards = useCardsStore()
const router = useRouter()
const route = useRoute()
// The sidebar rides along with every signed-in "app" page (dashboard, projects,
// profile) and stays mounted as you navigate between them.
const showSidebar = computed(() => auth.isAuthenticated && route.meta.requiresAuth === true)
async function onLogout() {
auth.logout()
projects.reset()
@@ -32,8 +38,14 @@ async function onLogout() {
</div>
</header>
<div class="app__body">
<AppSidebar v-if="showSidebar" />
<main class="app__main" :class="{ 'app__main--wide': route.meta.wide }">
<RouterView />
<!-- Key by path so navigating between projects via the sidebar remounts
the view (each :id is a fresh load) rather than reusing the instance. -->
<RouterView :key="route.path" />
</main>
</div>
</div>
</template>
web/src/components/AppSidebar.vue
+109
View File
@@ -0,0 +1,109 @@
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { RouterLink, useRouter } from 'vue-router'
import { ApiError } from '../lib/api'
import { MAX_PROJECTS, useProjectsStore } from '../stores/projects'
const projects = useProjectsStore()
const router = useRouter()
const title = ref('')
const createError = ref<ApiError | null>(null)
const submitting = ref(false)
const loadError = ref<string | null>(null)
const atLimit = computed(() => projects.projects.length >= MAX_PROJECTS)
onMounted(() => {
if (!projects.loaded) void load()
})
async function load() {
loadError.value = null
try {
await projects.fetchProjects()
} catch (e) {
loadError.value = e instanceof ApiError ? e.message : 'Could not load your projects.'
}
}
async function onCreate() {
submitting.value = true
createError.value = null
try {
const project = await projects.createProject(title.value)
title.value = ''
await router.push({ name: 'project', params: { id: project.id } })
} catch (e) {
createError.value = e instanceof ApiError ? e : new ApiError('Could not create the project.', 0)
} finally {
submitting.value = false
}
}
</script>
<template>
<aside class="sidebar">
<nav class="sidebar__nav">
<RouterLink :to="{ name: 'dashboard' }" class="sidebar__link" active-class="sidebar__link--active">
<svg class="sidebar__icon" viewBox="0 0 16 16" aria-hidden="true">
<rect x="1" y="1" width="6" height="6" rx="1.2" />
<rect x="9" y="1" width="6" height="6" rx="1.2" />
<rect x="1" y="9" width="6" height="6" rx="1.2" />
<rect x="9" y="9" width="6" height="6" rx="1.2" />
</svg>
<span>Dashboard</span>
</RouterLink>
</nav>
<hr class="sidebar__divider" />
<p class="sidebar__heading">Projects</p>
<p v-if="loadError" class="sidebar__note form-error">{{ loadError }}</p>
<p v-else-if="projects.loading && !projects.loaded" class="sidebar__note muted">Loading…</p>
<p v-else-if="projects.projects.length === 0" class="sidebar__note muted">No projects yet.</p>
<nav v-else class="sidebar__nav sidebar__projects">
<RouterLink
v-for="project in projects.projects"
:key="project.id"
:to="{ name: 'project', params: { id: project.id } }"
class="sidebar__link sidebar__link--project"
active-class="sidebar__link--active"
>
<svg class="sidebar__icon" viewBox="0 0 16 16" aria-hidden="true">
<rect x="1" y="2" width="3.5" height="12" rx="1" />
<rect x="6.25" y="2" width="3.5" height="9" rx="1" />
<rect x="11.5" y="2" width="3.5" height="6" rx="1" />
</svg>
<span class="sidebar__link-text">{{ project.title }}</span>
</RouterLink>
</nav>
<form class="sidebar__form" @submit.prevent="onCreate">
<input
v-model="title"
type="text"
maxlength="255"
required
:disabled="atLimit"
placeholder="New project"
aria-label="New project title"
/>
<small v-if="createError?.fieldError('title')" class="field-error">
{{ createError.fieldError('title') }}
</small>
<small
v-else-if="createError && Object.keys(createError.details).length === 0"
class="field-error"
>
{{ createError.message }}
</small>
<button type="submit" :disabled="submitting || atLimit">
{{ submitting ? 'Creating…' : 'Add project' }}
</button>
<small v-if="atLimit" class="hint">Limit of {{ MAX_PROJECTS }} projects reached.</small>
</form>
</aside>
</template>
web/src/router/index.ts
+9 -6
View File
@@ -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' }
}
})
web/src/style.css
+130 -38
View File
@@ -72,7 +72,14 @@ a.badge {
text-decoration: none;
}
.app__body {
display: flex;
align-items: flex-start;
}
.app__main {
flex: 1;
min-width: 0;
max-width: 32rem;
margin: 2.5rem auto;
padding: 0 1.25rem;
@@ -84,6 +91,112 @@ a.badge {
margin: 1.5rem auto;
}
/* --- left sidebar (signed-in app pages) ------------------------------ */
.sidebar {
flex: 0 0 15rem;
align-self: stretch;
position: sticky;
top: 0;
max-height: 100vh;
overflow-y: auto;
padding: 1rem 0.75rem 1.5rem;
border-right: 1px solid var(--border);
background: var(--surface);
}
.sidebar__nav {
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.sidebar__link {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.45rem 0.6rem;
border-radius: 7px;
color: var(--text);
text-decoration: none;
font-size: 0.9rem;
}
.sidebar__link:hover {
background: var(--bg);
}
.sidebar__link--active,
.sidebar__link--active:hover {
background: var(--accent);
color: var(--accent-text);
}
.sidebar__icon {
flex: none;
width: 1rem;
height: 1rem;
fill: currentColor;
}
.sidebar__link-text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sidebar__divider {
border: none;
border-top: 1px solid var(--border);
margin: 0.75rem 0;
}
.sidebar__heading {
margin: 0 0 0.35rem;
padding: 0 0.6rem;
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--muted);
}
.sidebar__projects {
max-height: 45vh;
overflow-y: auto;
}
.sidebar__note {
padding: 0 0.6rem;
font-size: 0.85rem;
}
.sidebar__form {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--border);
}
.sidebar__form input {
font: inherit;
font-size: 0.9rem;
padding: 0.4rem 0.55rem;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--bg);
color: var(--text);
}
.sidebar__form button[type='submit'] {
padding: 0.45rem 0.7rem;
font-size: 0.9rem;
border-radius: 6px;
}
.card {
background: var(--surface);
border: 1px solid var(--border);
@@ -110,6 +223,23 @@ h1 {
font-size: 0.9rem;
}
.under-construction {
margin-top: 1.5rem;
padding: 2.5rem 1rem;
text-align: center;
border: 1px dashed var(--border);
border-radius: 10px;
}
.under-construction__icon {
font-size: 2rem;
line-height: 1;
}
.under-construction p {
margin: 0.5rem 0 0;
}
.badge {
padding: 0.1rem 0.45rem;
border-radius: 999px;
@@ -126,43 +256,6 @@ h1 {
color: inherit;
}
.projects {
list-style: none;
margin: 1.5rem 0 0;
padding: 0;
display: grid;
gap: 0.75rem;
}
.projects__item {
border: 1px solid var(--border);
border-radius: 8px;
}
.projects__link {
display: block;
padding: 0.75rem 0.9rem;
color: inherit;
text-decoration: none;
border-radius: 8px;
}
.projects__link:hover {
background: var(--bg);
}
.projects__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.projects__title {
font-weight: 600;
word-break: break-word;
}
/* --- project detail: cards ------------------------------------------ */
.cards {
@@ -546,7 +639,6 @@ h1 {
margin: 1.25rem 0;
}
.form--new-project,
.form--new-card {
margin-top: 1.5rem;
padding-top: 1.25rem;
web/src/views/DashboardView.vue
+22
View File
@@ -0,0 +1,22 @@
<script setup lang="ts">
import { useAuthStore } from '../stores/auth'
const auth = useAuthStore()
</script>
<template>
<section class="card">
<h1>Dashboard</h1>
<div v-if="!auth.emailVerified" class="notice">
Your email address <strong>{{ auth.user?.email }}</strong> has not been
verified yet.
</div>
<div class="under-construction">
<span class="under-construction__icon" aria-hidden="true">🚧</span>
<p>This page is under construction.</p>
<p class="muted">Pick a project from the sidebar to get started.</p>
</div>
</section>
</template>
web/src/views/HomeView.vue
-100
View File
@@ -1,100 +0,0 @@
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { ApiError } from '../lib/api'
import { useAuthStore } from '../stores/auth'
import { MAX_PROJECTS, useProjectsStore } from '../stores/projects'
const auth = useAuthStore()
const projects = useProjectsStore()
const loadError = ref<string | null>(null)
const title = ref('')
const createError = ref<ApiError | null>(null)
const submitting = ref(false)
const atLimit = computed(() => projects.projects.length >= MAX_PROJECTS)
const summary = computed(() => {
const n = projects.projects.length
return `You have ${n} ${n === 1 ? 'project' : 'projects'}.`
})
onMounted(load)
async function load() {
loadError.value = null
try {
await projects.fetchProjects()
} catch (e) {
loadError.value = e instanceof ApiError ? e.message : 'Could not load your projects.'
}
}
async function onCreate() {
submitting.value = true
createError.value = null
try {
await projects.createProject(title.value)
title.value = ''
} catch (e) {
createError.value = e instanceof ApiError ? e : new ApiError('Could not create the project.', 0)
} finally {
submitting.value = false
}
}
</script>
<template>
<section class="card">
<h1>Your projects</h1>
<div v-if="!auth.emailVerified" class="notice">
Your email address <strong>{{ auth.user?.email }}</strong> has not been
verified yet.
</div>
<p v-if="loadError" class="form-error">{{ loadError }}</p>
<p v-else-if="projects.loading && !projects.loaded" class="muted">Loading…</p>
<template v-else>
<p class="muted">{{ summary }}</p>
<p v-if="projects.projects.length === 0" class="muted">
No projects yet — create your first one below.
</p>
<ul v-else class="projects">
<li v-for="project in projects.projects" :key="project.id" class="projects__item">
<RouterLink :to="{ name: 'project', params: { id: project.id } }" class="projects__link">
<div class="projects__head">
<span class="projects__title">{{ project.title }}</span>
<span class="badge">{{ project.completed_count }} / {{ project.card_count }} done</span>
</div>
</RouterLink>
</li>
</ul>
<form class="form form--new-project" @submit.prevent="onCreate">
<label>
<span>New project title</span>
<input v-model="title" type="text" maxlength="255" required :disabled="atLimit" />
<small v-if="createError?.fieldError('title')" class="field-error">
{{ createError.fieldError('title') }}
</small>
</label>
<p v-if="createError && Object.keys(createError.details).length === 0" class="form-error">
{{ createError.message }}
</p>
<button type="submit" :disabled="submitting || atLimit">
{{ submitting ? 'Creating…' : 'Create project' }}
</button>
<p v-if="atLimit" class="hint">
You have reached the maximum of {{ MAX_PROJECTS }} projects.
</p>
</form>
</template>
</section>
</template>