diff --git a/src/modules/core/components/core.navigation.component.vue b/src/modules/core/components/core.navigation.component.vue index 060c1408d..2e023614c 100644 --- a/src/modules/core/components/core.navigation.component.vue +++ b/src/modules/core/components/core.navigation.component.vue @@ -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 > ({ app: { title: 'Test App', icon: 'fa-solid fa-cube', logoFile: null, ...(overrides.app || {}) }, - header: { socials: [] }, + header: { socials: [], ...(overrides.header || {}) }, vuetify: { theme: { flat: false, @@ -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'); + }); });