Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion src/modules/core/components/core.navigation.component.vue
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
:alt="config.app.title"
:width="config.header.logo?.width || '32px'"
:height="config.header.logo?.width || '32px'"
class="ms-n1"
:style="logoOffsetStyle"
inline
></v-img>
<v-icon
Expand Down Expand Up @@ -188,6 +188,16 @@ export default {
logoFile() {
return this.config.header?.logo?.file || this.config.app.logoFile || null;
},
/**
* @desc Keeps the logo centered in the rail whatever its configured width:
* the base -4px offset centers a 32px logo, wider ones are pulled back by half the extra width.
* `maxWidth: none` lifts v-img's `max-width: 100%`, which would shrink a wide logo to the rail's prepend slot.
* @returns {Object}
*/
logoOffsetStyle() {
const width = this.config.header?.logo?.width || '32px';
return { marginInlineStart: `calc(-4px - (${width} - 32px) / 2)`, maxWidth: 'none' };
Comment thread
coderabbitai[bot] marked this conversation as resolved.
},
/**
* @desc Whether the liquid glass mode is enabled.
* @returns {Boolean}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ import CoreNavigation from '../components/core.navigation.component.vue';
*/
const makeConfig = (overrides = {}) => ({
app: { title: 'Test App', icon: 'fa-solid fa-cube', logoFile: null, ...(overrides.app || {}) },
header: { socials: [] },
header: { socials: [], ...(overrides.header || {}) },
vuetify: {
theme: {
flat: false,
Expand Down Expand Up @@ -371,4 +371,10 @@ describe('core.navigation.component — sidenav logo', () => {
const logoItemImg = wrapperImg.findAllComponents({ name: 'VListItem' })[0];
expect(logoItemImg.props('to')).toBe('/');
});

it('offsets the logo by half its extra width so it stays centered in the rail', () => {
const wrapper = mountNav({ configOverrides: { app: { logoFile: '/images/logo.svg' }, header: { logo: { width: '42px' } } } });
expect(wrapper.vm.logoOffsetStyle.marginInlineStart).toBe('calc(-4px - (42px - 32px) / 2)');
expect(wrapper.vm.logoOffsetStyle.maxWidth).toBe('none');
});
Comment thread
coderabbitai[bot] marked this conversation as resolved.
});
Loading