+ @if (icon) {
+
+ }
+
+
-}
-
-
-@if (formattedBadge()) {
-
- {{ formattedBadge() }}
-
+@if (!navbar.textOnly() && formattedBadge()) {
+
{{ formattedBadge() }}
}
@if (group) {
-
+
}
diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.scss b/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.scss
index 7d55ab80f..d7c991cd7 100644
--- a/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.scss
+++ b/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.scss
@@ -1,6 +1,8 @@
@use 'sass:map';
@use '@siemens/element-theme/src/styles/variables';
+$transition-duration: variables.$element-default-transition-duration;
+
:host(.navbar-vertical-item) {
display: flex;
align-items: center;
@@ -16,20 +18,34 @@
inline-size: 100%;
border-radius: 0;
+ .item-content {
+ overflow: hidden;
+ }
+
.item-title {
margin-inline-start: map.get(variables.$spacers, 5);
}
.icon {
+ position: absolute;
margin-inline-start: map.get(variables.$spacers, 5);
}
.icon + .item-title {
- margin-inline-start: map.get(variables.$spacers, 5);
+ margin-inline-start: map.get(variables.$spacers, 5) + map.get(variables.$spacers, 4) + 24px;
+ }
+
+ &.show .badge:not(.badge-collapsed) {
+ display: none;
+ }
+
+ &:not(.show) .badge + .dropdown-caret {
+ margin-inline: 0;
+ padding-inline: 0;
}
&.active {
- color: variables.$element-text-active;
+ color: variables.$element-action-primary-hover;
background: variables.$element-base-1-selected;
&::after {
@@ -38,7 +54,7 @@
inset-block: 0;
inset-inline-start: 0;
inline-size: 4px;
- background: variables.$element-ui-0;
+ background: variables.$element-action-primary-hover;
}
}
@@ -73,12 +89,41 @@
}
}
-:host-context(.nav-collapsed) :is(.badge, .dropdown-caret) {
- display: none;
+.dropdown-caret {
+ opacity: 1;
+ transform-origin: center;
+ transition-property: opacity, inline-size, transform;
+ transition-duration:
+ calc($transition-duration / 2), calc($transition-duration / 2), $transition-duration;
+ transition-delay: calc($transition-duration / 2), 0s, 0s;
+ transition-timing-function: ease;
+}
+
+.item-title {
+ opacity: 1;
+ transition: opacity calc($transition-duration / 2) calc($transition-duration / 2) ease;
}
-:host-context(si-navbar-vertical:not(.nav-collapsed)) .badge-text {
- display: none;
+:host-context(.nav-collapsed) :is(.dropdown-caret) {
+ opacity: 0;
+ inline-size: 0;
+ transition:
+ opacity 0s,
+ inline-size calc($transition-duration / 2) ease;
+}
+
+:host-context(.nav-collapsed) :is(.item-title) {
+ opacity: 0;
+ transition: opacity calc($transition-duration / 2) ease;
+}
+
+:host-context(.nav-collapsed) :is(.icon) {
+ animation: none;
+}
+
+:host-context(.nav-collapsed).hide-badge-collapsed .badge {
+ opacity: 0;
+ visibility: hidden;
}
:host-context(.link-with-items) > :host(button) {
@@ -107,7 +152,7 @@
}
.icon {
- display: block;
+ display: flex;
}
}
@@ -117,11 +162,40 @@
}
.badge {
+ position: relative;
margin-inline: auto 0;
+ transform: translate(0, 0);
+ transition-property:
+ transform, opacity, visibility, block-size, min-inline-size, border-radius, line-height,
+ padding, font-weight, color, font-size;
+ transition-duration:
+ $transition-duration, $transition-duration, $transition-duration, $transition-duration,
+ $transition-duration, $transition-duration, $transition-duration, $transition-duration,
+ $transition-duration, calc($transition-duration / 2), calc($transition-duration / 2);
+ transition-timing-function: ease-out;
}
-.badge-text {
+.badge-collapsed:not(.dropdown-item .badge) {
position: absolute;
- inset-block-start: map.get(variables.$spacers, 2);
- inset-inline-end: map.get(variables.$spacers, 3);
+ // Values calculated for smooth badge positioning during navbar collapse/expand
+ inset-inline-end: 12px;
+ transform: translate(6px, -9px);
+ block-size: 14px;
+ min-inline-size: 14px;
+ border-radius: 7px;
+ font-size: variables.$si-font-size-caption;
+ line-height: 14px;
+ padding-block: 0;
+ padding-inline: map.get(variables.$spacers, 2);
+ font-weight: variables.$si-font-weight-semibold;
+
+ :host(.dropdown-toggle) & {
+ inset-inline-end: 36px;
+ transform: translate(30px, -9px);
+ }
+
+ &.badge-text-only {
+ color: transparent;
+ font-size: 0;
+ }
}
diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.spec.ts b/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.spec.ts
index ce91fa0c8..1075adce6 100644
--- a/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.spec.ts
+++ b/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.spec.ts
@@ -21,16 +21,33 @@ class TestHostComponent {
});
}
+@Component({
+ imports: [SiNavbarVerticalItemComponent],
+ template: `
Test Item `
+})
+class TestHostWithBadgeVisibilityComponent {
+ readonly item = signal
({
+ type: 'link',
+ label: 'Test Item',
+ href: '#'
+ });
+}
+
describe('SiNavbarVerticalItemComponent', () => {
let component: TestHostComponent;
let fixture: ComponentFixture;
const mockNavbar = {
collapsed: signal(false),
+ textOnly: signal(false),
itemTriggered: jasmine.createSpy('itemTriggered')
};
beforeEach(async () => {
+ mockNavbar.collapsed.set(false);
+ mockNavbar.textOnly.set(false);
+ mockNavbar.itemTriggered.calls.reset();
+
await TestBed.configureTestingModule({
imports: [TestHostComponent],
providers: [{ provide: SI_NAVBAR_VERTICAL, useValue: mockNavbar }]
@@ -81,7 +98,7 @@ describe('SiNavbarVerticalItemComponent', () => {
label: 'Test',
href: '#',
badge,
- badgeColor: 'primary'
+ badgeColor: 'info'
});
fixture.detectChanges();
@@ -100,7 +117,7 @@ describe('SiNavbarVerticalItemComponent', () => {
label: 'Test',
href: '#',
badge,
- badgeColor: 'primary'
+ badgeColor: 'info'
});
fixture.detectChanges();
@@ -138,7 +155,7 @@ describe('SiNavbarVerticalItemComponent', () => {
label: 'Test',
href: '#',
badge,
- badgeColor: 'primary'
+ badgeColor: 'info'
});
fixture.detectChanges();
@@ -149,59 +166,63 @@ describe('SiNavbarVerticalItemComponent', () => {
});
});
- describe('badge-text behavior (collapsed view)', () => {
- it('should display badge-text with formatted value when icon is present', () => {
+ describe('badge behavior (collapsed view)', () => {
+ it('should display badge with collapsed class when navbar is collapsed', () => {
+ // Set navbar to collapsed mode
+ mockNavbar.collapsed.set(true);
+
component.item.set({
type: 'link',
label: 'Test',
href: '#',
icon: 'element-test',
- badge: 250
+ badge: 250,
+ badgeColor: 'info'
});
fixture.detectChanges();
- const badgeTextElement = fixture.nativeElement.querySelector('.badge-text');
- expect(badgeTextElement).toBeTruthy();
- expect(badgeTextElement.textContent.trim()).toBe('+99');
+ const badgeElement = fixture.nativeElement.querySelector('.badge');
+ expect(badgeElement).toBeTruthy();
+ expect(badgeElement.classList.contains('badge-collapsed')).toBe(true);
+ expect(badgeElement.textContent.trim()).toBe('+99');
});
- it('should not display badge-text when no icon is present', () => {
+ it('should not display badge when navbar is textOnly', () => {
+ // Set navbar to textOnly mode
+ mockNavbar.textOnly.set(true);
+
component.item.set({
type: 'link',
label: 'Test',
href: '#',
- badge: 5
+ badge: 5,
+ badgeColor: 'info'
});
fixture.detectChanges();
- const badgeTextElement = fixture.nativeElement.querySelector('.badge-text');
- expect(badgeTextElement).toBeFalsy();
+ const badgeElement = fixture.nativeElement.querySelector('.badge');
+ expect(badgeElement).toBeFalsy();
});
- it('should hide item title when navbar is collapsed', () => {
+ it('should display badge when navbar is not textOnly', () => {
+ // Ensure navbar is not in textOnly mode
+ mockNavbar.textOnly.set(false);
+
component.item.set({
type: 'link',
- label: 'Test Item',
+ label: 'Test',
href: '#',
- badge: 5
+ badge: 5,
+ badgeColor: 'info'
});
-
- // Initially expanded
- mockNavbar.collapsed.set(false);
fixture.detectChanges();
- let titleElement = fixture.nativeElement.querySelector('.item-title');
- expect(titleElement.classList.contains('visually-hidden')).toBe(false);
-
- // Switch to collapsed mode
- mockNavbar.collapsed.set(true);
- fixture.detectChanges();
-
- titleElement = fixture.nativeElement.querySelector('.item-title');
- expect(titleElement.classList.contains('visually-hidden')).toBe(true);
+ const badgeElement = fixture.nativeElement.querySelector('.badge');
+ expect(badgeElement).toBeTruthy();
+ expect(badgeElement.textContent.trim()).toBe('5');
});
- it('should format badge-text values consistently with main badge', () => {
+ it('should format badge values consistently with main badge', () => {
const testCases = [
{ badge: 4, expected: '4' },
{ badge: 44, expected: '44' },
@@ -218,14 +239,136 @@ describe('SiNavbarVerticalItemComponent', () => {
label: 'Test',
href: '#',
icon: 'element-test',
- badge
+ badge,
+ badgeColor: 'info'
});
fixture.detectChanges();
- const badgeTextElement = fixture.nativeElement.querySelector('.badge-text');
- expect(badgeTextElement).toBeTruthy();
- expect(badgeTextElement.textContent.trim()).toBe(expected);
+ const badgeElement = fixture.nativeElement.querySelector('.badge');
+ expect(badgeElement).toBeTruthy();
+ expect(badgeElement.textContent.trim()).toBe(expected);
+ });
+ });
+ });
+
+ describe('hideBadgeWhenCollapsed behavior', () => {
+ let badgeTestComponent: TestHostWithBadgeVisibilityComponent;
+ let badgeTestFixture: ComponentFixture;
+
+ beforeEach(async () => {
+ TestBed.resetTestingModule();
+ await TestBed.configureTestingModule({
+ imports: [TestHostWithBadgeVisibilityComponent],
+ providers: [{ provide: SI_NAVBAR_VERTICAL, useValue: mockNavbar }]
+ }).compileComponents();
+
+ badgeTestFixture = TestBed.createComponent(TestHostWithBadgeVisibilityComponent);
+ badgeTestComponent = badgeTestFixture.componentInstance;
+ badgeTestFixture.detectChanges();
+ });
+
+ it('should add class when true', () => {
+ badgeTestComponent.item.set({
+ type: 'link',
+ label: 'Test',
+ href: '#',
+ badge: 5,
+ badgeColor: 'default',
+ hideBadgeWhenCollapsed: true
+ });
+ badgeTestFixture.detectChanges();
+
+ const linkElement = badgeTestFixture.nativeElement.querySelector('a.navbar-vertical-item');
+ expect(linkElement.classList.contains('hide-badge-collapsed')).toBe(true);
+ });
+
+ it('should not add class when false', () => {
+ badgeTestComponent.item.set({
+ type: 'link',
+ label: 'Test',
+ href: '#',
+ badge: 5,
+ badgeColor: 'default',
+ hideBadgeWhenCollapsed: false
+ });
+ badgeTestFixture.detectChanges();
+
+ const linkElement = badgeTestFixture.nativeElement.querySelector('a.navbar-vertical-item');
+ expect(linkElement.classList.contains('hide-badge-collapsed')).toBe(false);
+ });
+
+ it('should default to false', () => {
+ badgeTestComponent.item.set({
+ type: 'link',
+ label: 'Test',
+ href: '#',
+ badge: 5,
+ badgeColor: 'default'
+ });
+ badgeTestFixture.detectChanges();
+
+ const linkElement = badgeTestFixture.nativeElement.querySelector('a.navbar-vertical-item');
+ expect(linkElement.classList.contains('hide-badge-collapsed')).toBe(false);
+ });
+
+ it('should not affect emphasis badges', () => {
+ const emphasisColors = ['primary-emphasis', 'danger-emphasis', 'warning-emphasis'];
+
+ emphasisColors.forEach(badgeColor => {
+ badgeTestComponent.item.set({
+ type: 'link',
+ label: 'Test',
+ href: '#',
+ badge: 5,
+ badgeColor
+ });
+ badgeTestFixture.detectChanges();
+
+ const linkElement = badgeTestFixture.nativeElement.querySelector('a.navbar-vertical-item');
+ expect(linkElement.classList.contains('hide-badge-collapsed')).toBe(false);
+
+ const badgeElement = badgeTestFixture.nativeElement.querySelector('.badge');
+ expect(badgeElement).toBeTruthy();
+ expect(badgeElement.classList.contains(`bg-${badgeColor}`)).toBe(true);
+ });
+ });
+
+ it('should toggle class when value changes', () => {
+ badgeTestComponent.item.set({
+ type: 'link',
+ label: 'Test',
+ href: '#',
+ badge: 5,
+ badgeColor: 'default',
+ hideBadgeWhenCollapsed: false
+ });
+ badgeTestFixture.detectChanges();
+ let linkElement = badgeTestFixture.nativeElement.querySelector('a.navbar-vertical-item');
+ expect(linkElement.classList.contains('hide-badge-collapsed')).toBe(false);
+
+ badgeTestComponent.item.set({
+ type: 'link',
+ label: 'Test',
+ href: '#',
+ badge: 5,
+ badgeColor: 'default',
+ hideBadgeWhenCollapsed: true
+ });
+ badgeTestFixture.detectChanges();
+ linkElement = badgeTestFixture.nativeElement.querySelector('a.navbar-vertical-item');
+ expect(linkElement.classList.contains('hide-badge-collapsed')).toBe(true);
+
+ badgeTestComponent.item.set({
+ type: 'link',
+ label: 'Test',
+ href: '#',
+ badge: 5,
+ badgeColor: 'default',
+ hideBadgeWhenCollapsed: false
});
+ badgeTestFixture.detectChanges();
+ linkElement = badgeTestFixture.nativeElement.querySelector('a.navbar-vertical-item');
+ expect(linkElement.classList.contains('hide-badge-collapsed')).toBe(false);
});
});
});
diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.ts b/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.ts
index 10dbc235b..71da2e85d 100644
--- a/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.ts
+++ b/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.ts
@@ -42,7 +42,8 @@ type NavbarVerticalItemInteractive =
'class': 'focus-inside',
'[class.dropdown-item]': 'this.parent?.group?.flyout()',
'[class.navbar-vertical-item]': '!this.parent?.group?.flyout()',
- '[class.active]': 'active'
+ '[class.active]': 'active',
+ '[class.hide-badge-collapsed]': 'hideBadgeCollapsed()'
}
})
export class SiNavbarVerticalItemComponent implements OnInit {
@@ -64,6 +65,21 @@ export class SiNavbarVerticalItemComponent implements OnInit {
private readonly routerLinkActive = inject(RouterLinkActive, { optional: true });
private readonly siLink = inject(SiLinkDirective, { optional: true });
+ /**
+ * Hides the badge in collapsed state
+ */
+ protected readonly hideBadgeCollapsed = computed(() => {
+ return !!(this.item() as NavbarVerticalItemInteractive).hideBadgeWhenCollapsed;
+ });
+
+ /**
+ * Determines if the badge contains text-only content (not numeric)
+ */
+ protected readonly textOnlyBadge = computed(() => {
+ const badge = this.item().badge;
+ return badge ? typeof badge !== 'number' : false;
+ });
+
/**
* Formats badge value to limit display to "+99" for numbers greater than 99
*/
diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical.component.scss b/projects/element-ng/navbar-vertical/si-navbar-vertical.component.scss
index e8494bca5..3a03b6c14 100644
--- a/projects/element-ng/navbar-vertical/si-navbar-vertical.component.scss
+++ b/projects/element-ng/navbar-vertical/si-navbar-vertical.component.scss
@@ -10,6 +10,11 @@ $vertical-nav-transition-duration: all-variables.$element-default-transition-dur
transition: padding-inline-start $vertical-nav-transition-duration;
--si-layout-header-first-element-offset: 40px;
+ // Prevents initial animation on component load
+ &.component-enter {
+ transition: none;
+ }
+
// This prevents applying the wrong padding-inline-start before the visible class is applied. This would trigger the animation
&.ready:not(.visible) {
padding-inline-start: 0 !important; // stylelint-disable-line declaration-no-important
@@ -28,7 +33,7 @@ nav {
inset-block-end: 0;
inset-inline-start: 0;
inline-size: 0;
- transition: inline-size all-variables.element-transition-duration(0.5s) ease;
+ transition: inline-size $vertical-nav-transition-duration ease;
:host(.nav-collapsed) & {
z-index: all-variables.$zindex-vertical-nav-collapsed;
@@ -64,9 +69,9 @@ nav {
border-end-end-radius: all-variables.$border-radius;
transition:
- inline-size all-variables.element-transition-duration(0.5s) ease,
- background-color all-variables.element-transition-duration(0.5s) ease,
- box-shadow all-variables.element-transition-duration(0.5s) ease;
+ inline-size $vertical-nav-transition-duration ease,
+ background-color $vertical-nav-transition-duration ease,
+ box-shadow $vertical-nav-transition-duration ease;
:host(:not(.nav-collapsed)) & {
inline-size: $vertical-nav-width;
@@ -155,7 +160,8 @@ si-search-bar {
:host {
&.nav-collapsed {
.btn-search {
- display: block;
+ display: flex;
+ inline-size: 100%;
}
}
}
diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical.component.ts b/projects/element-ng/navbar-vertical/si-navbar-vertical.component.ts
index ba746f30a..1bef80922 100644
--- a/projects/element-ng/navbar-vertical/si-navbar-vertical.component.ts
+++ b/projects/element-ng/navbar-vertical/si-navbar-vertical.component.ts
@@ -86,7 +86,8 @@ export class SiNavbarVerticalItemGuardDirective {
class: 'si-layout-inner',
'[class.nav-collapsed]': 'collapsed()',
'[class.nav-text-only]': 'textOnly()',
- '[class.visible]': 'visible()'
+ '[class.visible]': 'visible()',
+ 'animate.enter': 'component-enter'
}
})
export class SiNavbarVerticalComponent implements OnChanges, OnInit {
diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical.model.ts b/projects/element-ng/navbar-vertical/si-navbar-vertical.model.ts
index a80109662..3df77586a 100644
--- a/projects/element-ng/navbar-vertical/si-navbar-vertical.model.ts
+++ b/projects/element-ng/navbar-vertical/si-navbar-vertical.model.ts
@@ -20,6 +20,11 @@ export interface NavbarVerticalItemBase {
* without `bg-` prefix.
*/
badgeColor?: string;
+ /**
+ * Hide badge when navbar is collapsed.
+ * By default, badges are always visible (both expanded and collapsed).
+ */
+ hideBadgeWhenCollapsed?: boolean;
}
/** Use this type to create a group that can hold multiple items. */
diff --git a/src/app/examples/si-navbar-vertical/si-navbar-vertical-badges.html b/src/app/examples/si-navbar-vertical/si-navbar-vertical-badges.html
new file mode 100644
index 000000000..46096ed3b
--- /dev/null
+++ b/src/app/examples/si-navbar-vertical/si-navbar-vertical-badges.html
@@ -0,0 +1,24 @@
+
+
+
+
+ Navbar Vertical Badges Example
+
+
+
+
+
+
+
+
+
+