Feat/navbar vertical next flat submenu

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

@@ -64,6 +64,7 @@ export class SiNavbarVerticalNextHeaderComponent {
 
 // @public (undocumented)
 export class SiNavbarVerticalNextItemComponent implements OnInit {
+    constructor();
     readonly active: _angular_core.Signal<boolean>;
     readonly activeOverride: _angular_core.InputSignal<boolean | undefined>;
     readonly badge: _angular_core.InputSignal<string | number | undefined>;

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

@@ -116,29 +116,97 @@ test.describe('navbar vertical next', () => {
     await expect(tooltip).not.toBeVisible();
   });
 
-  test(example + ' mobile collapsed', async ({ page, si }) => {
-    await page.setViewportSize({ width: 570, height: 600 });
-    await si.visitExample(example, false);
-
-    await expect(page.locator('.mobile-drawer')).toBeVisible();
-
-    await si.waitForAllAnimationsToComplete();
-    await si.runVisualAndA11yTests('mobile-collapsed');
-  });
-
-  test(example + ' mobile expanded', async ({ page, si }) => {
-    await page.setViewportSize({ width: 570, height: 600 });
-    await si.visitExample(example, false);
-
-    await page.locator('.mobile-drawer > button').click();
-    await expect(page.locator('si-navbar-vertical-next:not(.nav-collapsed)')).toBeVisible();
-    await page.getByText('Documentation').click();
-    await page.getByRole('link', { name: 'Sub item 4' }).click();
-    await expect(page.locator('si-navbar-vertical-next:not(.nav-collapsed)')).toHaveCount(0);
-    await page.locator('.mobile-drawer > button').click();
-
-    await si.waitForAllAnimationsToComplete();
-    await si.runVisualAndA11yTests('mobile-expanded');
+  test.describe('mobile', () => {
+    test.beforeEach(async ({ page, si }) => {
+      await page.setViewportSize({ width: 570, height: 600 });
+      await si.visitExample(example, false);
+    });
+
+    test(example + ' collapsed', async ({ page, si }) => {
+      await expect(page.locator('.mobile-drawer')).toBeVisible();
+
+      await si.waitForAllAnimationsToComplete();
+      await si.runVisualAndA11yTests('mobile-collapsed');
+    });
+
+    test.describe('flat group', () => {
+      test.beforeEach(async ({ page }) => {
+        // Expand the drawer and open the Documentation flat group.
+        await page.locator('.mobile-drawer > button').click();
+        await expect(page.locator('si-navbar-vertical-next:not(.nav-collapsed)')).toBeVisible();
+        await page.getByRole('button', { name: 'Documentation' }).click();
+        await expect(page.locator('si-navbar-vertical-next.nav-flat-group-open')).toBeVisible();
+        await expect(page.getByRole('button', { name: 'Back' })).toBeVisible();
+      });
+
+      test(example + ' opened', async ({ page, si }) => {
+        // Sub-items of the opened flat group are visible. The trigger button itself
+        // is hidden in flat-group-open state (only the header label + back button show).
+        await expect(page.getByRole('link', { name: 'Sub item 4' })).toBeVisible();
+        await expect(page.getByRole('link', { name: 'Sub item 5' })).toBeVisible();
+        await expect(page.getByRole('link', { name: 'Sub item 6' })).toBeVisible();
+
+        await si.waitForAllAnimationsToComplete();
+        await si.runVisualAndA11yTests('mobile-flat-group-opened');
+      });
+
+      test(example + ' expanded', async ({ page, si }) => {
+        await expect(page.getByRole('link', { name: 'Sub item 4' })).toBeVisible();
+        await expect(page.getByRole('link', { name: 'Sub item 5' })).toBeVisible();
+        await expect(page.getByRole('link', { name: 'Sub item 6' })).toBeVisible();
+
+        // Click Sub item 4: navigates and collapses the drawer on mobile.
+        await page.getByRole('link', { name: 'Sub item 4' }).click();
+        await expect(page).toHaveURL(/subItem4/);
+
+        // Re-open the drawer: the flat group state is preserved and the
+        // active item is highlighted.
+        await page.locator('.mobile-drawer > button').click();
+        await expect(page.locator('si-navbar-vertical-next.nav-flat-group-open')).toBeVisible();
+        await expect(page.getByRole('link', { name: 'Sub item 4' })).toHaveClass(/active/);
+
+        await si.waitForAllAnimationsToComplete();
+        await si.runVisualAndA11yTests('mobile-expanded');
+      });
+
+      test(example + ' back navigation closes the submenu', async ({ page, si }) => {
+        await page.getByRole('button', { name: 'Back' }).click();
+
+        await expect(page.getByRole('button', { name: 'Back' })).toHaveCount(0);
+        await expect(page.locator('si-navbar-vertical-next.nav-flat-group-open')).toHaveCount(0);
+        await expect(page.getByRole('button', { name: 'Documentation' })).toHaveAttribute(
+          'aria-expanded',
+          'false'
+        );
+
+        await si.waitForAllAnimationsToComplete();
+        await si.runVisualAndA11yTests('mobile-flat-group-closed');
+      });
+
+      test(
+        example + ' is preserved across drawer collapse and auto-closes on resize',
+        async ({ page, si }) => {
+          // Collapse the drawer: flat group state is preserved.
+          await page.locator('.mobile-drawer > button').click();
+          await expect(page.locator('si-navbar-vertical-next.nav-collapsed')).toBeVisible();
+
+          // Re-open the drawer: the same flat group is still open.
+          await page.locator('.mobile-drawer > button').click();
+          await expect(page.locator('si-navbar-vertical-next.nav-flat-group-open')).toBeVisible();
+          await expect(page.getByRole('button', { name: 'Back' })).toBeVisible();
+
+          // Resize to desktop: flat group auto-closes and the group falls back to flyout.
+          await page.setViewportSize({ width: 1200, height: 800 });
+          await expect(page.locator('si-navbar-vertical-next.nav-flat-group-open')).toHaveCount(0);
+          await expect(page.getByRole('button', { name: 'Back' })).toHaveCount(0);
+          await page.getByRole('button', { name: 'Documentation' }).click();
+          await expect(page.getByRole('group', { name: 'Documentation' })).toBeVisible();
+
+          await si.waitForAllAnimationsToComplete();
+          await si.runVisualAndA11yTests('mobile-flat-group-resize-out');
+        }
+      );
+    });
   });
 });
 

playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--mobile-expanded.yaml

@@ -6,29 +6,19 @@
   - heading "Navbar Vertical Next Example" [level=1]
 - navigation:
   - button "Toggle" [expanded]
-  - textbox "Search..."
-  - link "Home":
-    - /url: "#/viewer/viewer/home"
-  - text: Modules
-  - link "Energy & sustainability":
-    - /url: "#/viewer/viewer/energy"
-  - button "User management"
-  - group "User management"
-  - link "Test coverage":
-    - /url: "#/viewer/viewer/coverage"
-  - button "Documentation" [expanded]
+  - button "Back"
+  - heading "Documentation" [level=2]
   - group "Documentation":
     - link "Sub item 4":
       - /url: "#/viewer/viewer/subItem4"
     - link "Sub item 5":
       - /url: "#/viewer/viewer/subItem5"
     - link "Sub item 6":
       - /url: "#/viewer/viewer/subItem6"
-  - button "Action"
-  - link "Configuration":
-    - /url: "#/viewer/viewer/configuration"
 - main:
   - heading "Here is a title" [level=2]
   - text: Content with path 'subItem4' Control panel
   - checkbox "Always flyout"
-  - text: Always flyout
+  - text: Always flyout
+  - checkbox "Inline collapse"
+  - text: Inline collapse

playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--mobile-flat-group-closed.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" [expanded]
+  - textbox "Search..."
+  - link "Home":
+    - /url: "#/viewer/viewer/home"
+  - text: Modules
+  - 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"
+- main:
+  - heading "Here is a title" [level=2]
+  - text: Content with path 'home' Control panel
+  - checkbox "Always flyout"
+  - text: Always flyout
+  - checkbox "Inline collapse"
+  - text: Inline collapse

playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--mobile-flat-group-opened.yaml

@@ -0,0 +1,24 @@
+- link "Jump to Main content"
+- link "Jump to Navigation"
+- banner:
+  - link "Siemens logo":
+    - /url: "#/"
+  - heading "Navbar Vertical Next Example" [level=1]
+- navigation:
+  - button "Toggle" [expanded]
+  - button "Back"
+  - heading "Documentation" [level=2]
+  - group "Documentation":
+    - link "Sub item 4":
+      - /url: "#/viewer/viewer/subItem4"
+    - link "Sub item 5":
+      - /url: "#/viewer/viewer/subItem5"
+    - link "Sub item 6":
+      - /url: "#/viewer/viewer/subItem6"
+- main:
+  - heading "Here is a title" [level=2]
+  - text: Content with path 'home' Control panel
+  - checkbox "Always flyout"
+  - text: Always flyout
+  - checkbox "Inline collapse"
+  - text: Inline collapse

playwright/snapshots/navbar-vertical-next.spec.ts-snapshots/si-navbar-vertical-next--si-navbar-vertical-next--mobile-flat-group-resize-out.yaml

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

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

@@ -0,0 +1,43 @@
+@use 'sass:map';
+@use '@siemens/element-theme/src/styles/variables';
+
+:host {
+  display: flex;
+  flex-direction: column;
+  min-block-size: 0;
+  flex: 1 0 0;
+}
+
+.flat-group-header {
+  display: flex;
+  align-items: center;
+  // `gap` keeps the back button's focus outline (6px wide + 1px offset) clear of the title.
+  gap: map.get(variables.$spacers, 4);
+  // Horizontal padding gives the focus outline clearance against the drawer edge and
+  // visually aligns the back button with the icon position of regular navbar items.
+  padding-inline: map.get(variables.$spacers, 5);
+  color: variables.$element-text-primary;
+  opacity: 1;
+  transform: translateY(0);
+  transition:
+    opacity variables.element-transition-duration(200ms) ease,
+    transform variables.element-transition-duration(200ms) ease;
+
+  @starting-style {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+
+  &.flat-group-header-leave {
+    opacity: 0;
+    transform: translateY(-4px);
+    transition-duration: variables.element-transition-duration(150ms);
+  }
+
+  // Keep the flat-group state alive while the mobile drawer is collapsed,
+  // but hide the header so it doesn't bleed out of the 0-width nav.
+  // When the drawer re-opens, the header reappears together with the items.
+  :host-context(.nav-collapsed) & {
+    display: none;
+  }
+}