Context
`src/modules/core/components/core.navigation.component.vue:34-42` renders the sidenav logo as a bare `` with `:icon="config.app.icon"` — Font Awesome string only, not clickable.
The header component already supports both patterns:
- SVG/image via `config.header.logo.file` (`core.header.component.vue:12`)
- Router link to `/` (`core.header.component.vue:12-17`)
The sidenav should mirror these. Two downstream projects already want a proper brand logo (SVG) and the "click logo → home" UX.
Scope
1. Support SVG/image in sidenav logo
Mirror the header pattern. Resolution order in `core.navigation.component.vue`:
- If `config.app.logoFile` is set → render `<img :src="config.app.logoFile" :alt="config.app.title" />` with consistent sizing
- Else → fall back to existing `<v-list-item :icon="config.app.icon" />` (unchanged default)
Keep FA as the default — all existing downstream projects rely on it. New field is purely additive.
2. Make sidenav logo clickable to homepage
Wrap the logo in `<router-link to="/">` (or add `to="/"` prop to `` — Vuetify supports it natively and avoids an extra wrapper).
Applies to both the SVG and FA branches.
3. Config documentation
Update `src/config/defaults/development.config.js` to document the new optional `app.logoFile` field alongside `app.icon`:
```js
app: {
icon: 'fa-solid fa-earth-americas', // FontAwesome icon class (fallback when logoFile unset)
logoFile: null, // Optional: path to SVG/PNG in /public for a branded logo (takes precedence over icon)
// ...
}
```
Acceptance
Downstream impact
Zero breaking changes. Existing projects (pierreb_vue, comes_vue, trawl_vue, montaine_vue) continue working with their `app.icon` setting untouched. Projects wanting an SVG brand logo just set `app.logoFile`.
Complexity: S (~half day)
Context
`src/modules/core/components/core.navigation.component.vue:34-42` renders the sidenav logo as a bare `` with `:icon="config.app.icon"` — Font Awesome string only, not clickable.
The header component already supports both patterns:
The sidenav should mirror these. Two downstream projects already want a proper brand logo (SVG) and the "click logo → home" UX.
Scope
1. Support SVG/image in sidenav logo
Mirror the header pattern. Resolution order in `core.navigation.component.vue`:
Keep FA as the default — all existing downstream projects rely on it. New field is purely additive.
2. Make sidenav logo clickable to homepage
Wrap the logo in `<router-link to="/">` (or add `to="/"` prop to `` — Vuetify supports it natively and avoids an extra wrapper).
Applies to both the SVG and FA branches.
3. Config documentation
Update `src/config/defaults/development.config.js` to document the new optional `app.logoFile` field alongside `app.icon`:
```js
app: {
icon: 'fa-solid fa-earth-americas', // FontAwesome icon class (fallback when logoFile unset)
logoFile: null, // Optional: path to SVG/PNG in /public for a branded logo (takes precedence over icon)
// ...
}
```
Acceptance
Downstream impact
Zero breaking changes. Existing projects (pierreb_vue, comes_vue, trawl_vue, montaine_vue) continue working with their `app.icon` setting untouched. Projects wanting an SVG brand logo just set `app.logoFile`.
Complexity: S (~half day)