Feat/navbar vertical next inline collapse

api-goldens/element-ng/navbar-vertical-next/index.api.md

@@ -19,6 +19,7 @@ export class SiNavbarVerticalNextComponent implements OnChanges, OnInit {
     collapse(): void;
     readonly collapsed: _angular_core.ModelSignal<boolean>;
     expand(): void;
+    readonly inlineCollapse: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly skipLinkMainContentLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
     readonly skipLinkNavigationLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
     readonly stateId: _angular_core.InputSignal<string | undefined>;

playwright/e2e/element-examples/navbar-vertical-next.spec.ts

@@ -54,6 +54,22 @@ test.describe('navbar vertical next', () => {
     await si.runVisualAndA11yTests('always-flyout');
   });
 
+  test(example + ' inline collapse toggle', async ({ page, si }) => {
+    await si.visitExample(example);
+
+    await page.getByRole('checkbox', { name: 'Inline collapse' }).check();
+
+    await page.locator('si-navbar-vertical-next nav .collapse-toggle button').click();
+    await expect(
+      page.locator('si-navbar-vertical-next.nav-inline-collapse.nav-collapsed')
+    ).toBeVisible();
+    await expect(page.locator('si-navbar-vertical-next .nav-content[inert]')).toHaveCount(1);
+    await expect(page.locator('si-navbar-vertical-next .inline-collapse-toggle')).toBeVisible();
+
+    await si.waitForAllAnimationsToComplete();
+    await si.runVisualAndA11yTests('inline-collapse');
+  });
+
   test.skip('it should show tooltip only on keyboard interaction', async ({ page, si }) => {
     await si.visitExample(example);
     await page.getByLabel('Toggle', { exact: true }).click();

playwright/e2e/element-examples/static.spec.ts

@@ -80,6 +80,7 @@ test('si-layouts/content-full-layout-fixed-height', ({ si }) => si.static());
 test('si-layouts/content-tile-layout-full-scroll', ({ si }) => si.static());
 test('si-loading-spinner/si-loading-spinner', ({ si }) => si.static({ maxDiffPixels: 31 }));
 test('si-navbar-vertical/si-navbar-vertical-text', ({ si }) => si.static());
+test('si-navbar-vertical-next/si-navbar-vertical-next-text', ({ si }) => si.static());
 test('si-ncharts/si-micro-charts', ({ si }) => si.static());
 test('si-pagination/si-pagination', ({ si }) => si.static());
 test('si-phone-number-input/si-phone-number-input', ({ si }) => si.static());

playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--inline-collapse.yaml

@@ -0,0 +1,30 @@
+- link "Jump to Main content"
+- link "Jump to Navigation"
+- banner:
+  - link "Siemens logo":
+    - /url: "#/"
+  - heading "Navbar Vertical Next Example" [level=1]
+- navigation:
+  - button "Toggle"
+  - button "Search..."
+  - link "Home":
+    - /url: "#/viewer/viewer/home"
+  - link "Energy & sustainability":
+    - /url: "#/viewer/viewer/energy"
+  - button "User management"
+  - group "User management"
+  - link "Test coverage":
+    - /url: "#/viewer/viewer/coverage"
+  - button "Documentation"
+  - group "Documentation"
+  - button "Action"
+  - link "Configuration":
+    - /url: "#/viewer/viewer/configuration"
+- button "Toggle"
+- main:
+  - heading "Here is a title" [level=2]
+  - text: Content with path 'home' Control panel
+  - checkbox "Always flyout"
+  - text: Always flyout
+  - checkbox "Inline collapse" [checked]
+  - text: Inline collapse

playwright/snapshots/static.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next-text.yaml

@@ -0,0 +1,27 @@
+- link "Jump to Main content"
+- link "Jump to Navigation"
+- banner:
+  - link "Siemens logo":
+    - /url: "#/"
+  - heading "Navbar vertical next text only" [level=1]
+  - button "Jane Smith"
+- navigation:
+  - button "Toggle" [expanded]
+  - button "Home"
+  - group "Home"
+  - button "Documentation"
+  - group "Documentation"
+  - text: All the rest
+  - link "Energy & Operations":
+    - /url: "#/viewer/viewer/energy"
+  - link "Test Coverage":
+    - /url: "#/viewer/viewer/coverage"
+  - link "Configuration":
+    - /url: "#/viewer/viewer/configuration"
+- main:
+  - heading "Here is a title" [level=2]
+  - text: Here goes the content Control panel
+  - checkbox "Always flyout"
+  - text: Always flyout
+  - checkbox "Inline collapse"
+  - text: Inline collapse

projects/element-ng/navbar-vertical-next/si-navbar-vertical-next.component.html

@@ -2,6 +2,7 @@
   @if (smallScreen() && !collapsed()) {
     <div class="modal-backdrop" animate.leave="backdrop-leave" (click)="toggleCollapse()"></div>
   }
+  @let inlineCollapsed = inlineCollapse() && collapsed();
   <nav
     tabindex="-1"
     class="bg-base-1 focus-sub-inside"
@@ -12,23 +13,37 @@
     <div class="collapse-toggle ms-auto">
       <div class="mobile-drawer focus-inside navbar-vertical-no-collapse">
         <button
+          #navToggleButton
           type="button"
           class="btn btn-icon btn-tertiary-ghost"
           [attr.aria-label]="toggleButtonText() | translate"
           [attr.aria-expanded]="!collapsed()"
           (click)="toggleCollapse()"
         >
-          <si-icon
-            class="flip-rtl"
-            [icon]="collapsed() ? icons.elementDoubleRight : icons.elementDoubleLeft"
-          />
+          <si-icon class="flip-rtl" [icon]="toggleIcon()" />
         </button>
       </div>
     </div>
-    <ng-content select="si-navbar-vertical-next-search" />
-    <ng-content select="si-navbar-vertical-next-items" />
-    <ng-content select="si-navbar-vertical-next-footer-items" />
+    <div class="nav-content" [attr.inert]="inlineCollapsed ? '' : null">
+      <ng-content select="si-navbar-vertical-next-search" />
+      <ng-content select="si-navbar-vertical-next-items" />
+      <ng-content select="si-navbar-vertical-next-footer-items" />
+    </div>
   </nav>
+  @if (inlineCollapsed) {
+    <button
+      #inlineToggleButton
+      type="button"
+      class="btn btn-icon btn-tertiary-ghost bg-base-1 inline-collapse-toggle"
+      animate.enter="fade-enter"
+      animate.leave="fade-leave"
+      [attr.aria-label]="toggleButtonText() | translate"
+      [attr.aria-expanded]="false"
+      (click)="toggleCollapse()"
+    >
+      <si-icon class="flip-rtl" [icon]="icons.elementLayoutPane2" />
+    </button>
+  }
 }
 <main
   class="si-layout-inner focus-none"

projects/element-ng/navbar-vertical-next/si-navbar-vertical-next.component.scss

@@ -95,7 +95,7 @@ nav {
     --si-layout-header-first-element-offset: 0;
   }
 
-  :host:not(.nav-text-only) {
+  :host:not(.nav-text-only):not(.nav-inline-collapse) {
     padding-inline-start: $vertical-nav-collapsed-width;
 
     .mobile-drawer {
@@ -104,7 +104,7 @@ nav {
     }
   }
 
-  :host:not(.nav-text-only) {
+  :host:not(.nav-text-only):not(.nav-inline-collapse) {
     nav {
       inline-size: $vertical-nav-collapsed-width;
 
@@ -116,7 +116,58 @@ nav {
 }
 
 @include all-variables.media-breakpoint-up(lg) {
-  :host:not(.nav-collapsed) {
+  :host:not(.nav-collapsed):not(.nav-inline-collapse) {
     padding-inline-start: $vertical-nav-width;
   }
 }
+
+.nav-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-block-size: 0;
+}
+
+:host(.nav-inline-collapse) {
+  nav {
+    // The in-nav toggle must clip out as the nav collapses to inline-size 0.
+    overflow: hidden;
+  }
+
+  &.nav-collapsed .mobile-drawer {
+    inline-size: 0;
+  }
+
+  @include all-variables.media-breakpoint-up(lg) {
+    &:not(.nav-collapsed) {
+      padding-inline-start: $vertical-nav-width;
+    }
+  }
+}
+
+.inline-collapse-toggle {
+  display: block;
+  margin-block-start: map.get(all-variables.$spacers, 6);
+  margin-inline-start: map.get(all-variables.$spacers, 9);
+  block-size: calc(1lh + (2 * map.get(all-variables.$spacers, 2)));
+  opacity: 1;
+  transition-property: opacity, block-size, margin-block-start;
+  transition-duration: all-variables.element-transition-duration(0.25s);
+  transition-delay: all-variables.element-transition-duration(0.25s);
+  transition-timing-function: ease;
+
+  &.fade-enter {
+    @starting-style {
+      opacity: 0;
+      block-size: 0;
+      margin-block-start: 0;
+    }
+  }
+
+  &.fade-leave {
+    opacity: 0;
+    block-size: 0;
+    margin-block-start: 0;
+    transition-delay: 0s;
+  }
+}

projects/element-ng/navbar-vertical-next/si-navbar-vertical-next.component.ts

@@ -8,17 +8,25 @@ import {
   booleanAttribute,
   ChangeDetectionStrategy,
   Component,
+  computed,
+  ElementRef,
   inject,
   Injector,
   input,
   model,
   OnChanges,
   OnInit,
   signal,
-  SimpleChanges
+  SimpleChanges,
+  viewChild
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { elementDoubleLeft, elementDoubleRight } from '@siemens/element-icons';
+import {
+  elementDoubleLeft,
+  elementDoubleRight,
+  elementLayoutPane2,
+  elementLayoutPane2Right
+} from '@siemens/element-icons';
 import { SI_UI_STATE_SERVICE } from '@siemens/element-ng/common';
 import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
 import { BOOTSTRAP_BREAKPOINTS } from '@siemens/element-ng/resize-observer';
@@ -45,12 +53,19 @@ interface UIState {
     class: 'si-layout-inner ready',
     '[class.nav-collapsed]': 'collapsed()',
     '[class.nav-text-only]': 'textOnly()',
+    '[class.nav-inline-collapse]': 'inlineCollapse()',
     '[class.visible]': 'visible()',
     '[class.ready]': 'ready()'
   }
 })
 export class SiNavbarVerticalNextComponent implements OnChanges, OnInit {
-  protected readonly icons = addIcons({ elementDoubleLeft, elementDoubleRight });
+  protected readonly icons = addIcons({
+    elementDoubleLeft,
+    elementDoubleRight,
+    elementLayoutPane2,
+    elementLayoutPane2Right
+  });
+
   /**
    * Whether the navbar-vertical is collapsed.
    *
@@ -65,10 +80,18 @@ export class SiNavbarVerticalNextComponent implements OnChanges, OnInit {
    */
   readonly textOnly = input(false, { transform: booleanAttribute });
 
+  /**
+   * Enables an alternative inline collapsed mode.
+   *
+   * inline control bar without rendering items, headers, the search slot or
+   * footer items.
+   *
+   * @defaultValue false
+   */
+  readonly inlineCollapse = input(false, { transform: booleanAttribute });
+
   /**
    * When `true`, item-groups always open as a transient flyout panel adjacent to the
-   * trigger, regardless of whether the navbar is collapsed or expanded.
-   * Flyouts open and close on click.
    *
    * @defaultValue false
    */
@@ -131,6 +154,10 @@ export class SiNavbarVerticalNextComponent implements OnChanges, OnInit {
   protected readonly ready = signal(false);
   protected readonly smallScreen = signal(false);
 
+  private readonly navToggleButton = viewChild<ElementRef<HTMLButtonElement>>('navToggleButton');
+  private readonly inlineToggleButton =
+    viewChild<ElementRef<HTMLButtonElement>>('inlineToggleButton');
+
   /**
    * @defaultValue
    * ```
@@ -142,6 +169,13 @@ export class SiNavbarVerticalNextComponent implements OnChanges, OnInit {
   // Indicates if the user prefers a collapsed navbar. Relevant for resizing.
   private preferCollapse = false;
 
+  protected readonly toggleIcon = computed(() => {
+    if (this.inlineCollapse()) {
+      return this.collapsed() ? this.icons.elementLayoutPane2 : this.icons.elementLayoutPane2Right;
+    }
+    return this.collapsed() ? this.icons.elementDoubleRight : this.icons.elementDoubleLeft;
+  });
+
   constructor() {
     this.breakpointObserver
       .observe(`(max-width: ${BOOTSTRAP_BREAKPOINTS.lgMinimum}px)`)
@@ -177,11 +211,27 @@ export class SiNavbarVerticalNextComponent implements OnChanges, OnInit {
   }
 
   protected toggleCollapse(): void {
-    if (this.collapsed()) {
+    const wasCollapsed = this.collapsed();
+    if (wasCollapsed) {
       this.expand();
     } else {
       this.collapse();
     }
+    // In inline-collapse mode the visible toggle button swaps between the
+    // in-nav button (expanded) and the in-page button (collapsed). Move focus
+    // to the newly visible one after the view updates so keyboard users don't
+    // lose their place.
+    if (this.inlineCollapse()) {
+      afterNextRender(
+        () => {
+          const next = wasCollapsed
+            ? this.navToggleButton()?.nativeElement
+            : this.inlineToggleButton()?.nativeElement;
+          next?.focus();
+        },
+        { injector: this.injector }
+      );
+    }
   }
 
   /** Expands the vertical navbar. */