Skip to content

feat(core): sidenav logo — support SVG/image file + make clickable to homepage #3986

Description

@PierreBrisorgueil

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

  • `config.app.logoFile` path → `` rendered in sidenav with proper sizing/accessibility (alt text from `config.app.title`)
  • `config.app.logoFile` unset → FA icon rendered as today (back-compat)
  • Logo is a router-link to `/` in both branches
  • Default dev config documents the new field
  • Unit test: logoFile present → `` in DOM; absent → FA icon in DOM
  • Unit test: clicking logo triggers navigation to `/`
  • No breaking change for existing downstream configs

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)

Activity

  1. added a commit that references this issue on Apr 18, 2026
    4178053
  2. added a commit that references this issue on Apr 18, 2026
    958b1a5
  3. added a commit that references this issue on May 1, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions