fix(side-panel): fix tabbed navigation

playwright/snapshots/si-notification-item.spec.ts-snapshots/si-notification-item--si-notification-item-side-panel--popover.yaml

@@ -1,3 +1,11 @@
+- banner:
+  - link "Siemens logo":
+    - /url: "#/"
+  - text: Application name
+  - button "Tenant 1"
+  - button "4 Notifications"
+  - button "Support"
+  - button "John Doe"
 - paragraph: Notifications
 - menubar:
   - menuitem "Mark all as read"
@@ -77,12 +85,4 @@
   - text: Two months ago Security audit completed Annual security review has been completed successfully. All access controls and permissions have been verified and updated.
 - button "Read"
 - button "Archive"
-- button "Delete"
-- banner:
-  - link "Siemens logo":
-    - /url: "#/"
-  - text: Application name
-  - button "Tenant 1"
-  - button "4 Notifications"
-  - button "Support"
-  - button "John Doe"
+- button "Delete"

playwright/snapshots/si-page-header.spec.ts-snapshots/si-page-header--si-page-header--large.yaml

@@ -1,6 +1,5 @@
 - link "Jump to Main content"
 - link "Jump to Navigation"
-- button "Toggle"
 - banner:
   - link "Siemens logo":
     - /url: "#/"
@@ -39,4 +38,5 @@
   - checkbox "Actions" [checked]
   - text: Actions
   - checkbox "Toolbar" [checked]
-  - text: Toolbar
+  - text: Toolbar
+- button "Toggle"

playwright/snapshots/si-page-header.spec.ts-snapshots/si-page-header--si-page-header--small-nav-indented.yaml

@@ -1,6 +1,5 @@
 - link "Jump to Main content"
 - link "Jump to Navigation"
-- button "Toggle"
 - banner:
   - link "Siemens logo":
     - /url: "#/"
@@ -38,4 +37,5 @@
   - checkbox "Actions" [checked]
   - text: Actions
   - checkbox "Toolbar" [checked]
-  - text: Toolbar
+  - text: Toolbar
+- button "Toggle"

playwright/snapshots/si-page-header.spec.ts-snapshots/si-page-header--si-page-header--small-title-indented.yaml

@@ -1,6 +1,5 @@
 - link "Jump to Main content"
 - link "Jump to Navigation"
-- button "Toggle"
 - banner:
   - link "Siemens logo":
     - /url: "#/"
@@ -27,4 +26,5 @@
   - checkbox "Actions" [checked]
   - text: Actions
   - checkbox "Toolbar" [checked]
-  - text: Toolbar
+  - text: Toolbar
+- button "Toggle"

playwright/snapshots/si-page-header.spec.ts-snapshots/si-page-header--si-page-header--small.yaml

@@ -1,6 +1,5 @@
 - link "Jump to Main content"
 - link "Jump to Navigation"
-- button "Toggle"
 - banner:
   - link "Siemens logo":
     - /url: "#/"
@@ -40,4 +39,5 @@
   - checkbox "Actions" [checked]
   - text: Actions
   - checkbox "Toolbar" [checked]
-  - text: Toolbar
+  - text: Toolbar
+- button "Toggle"

playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode-no-backdrop.yaml

@@ -1,12 +1,3 @@
-- paragraph: Title
-- button "Enter fullscreen"
-- button "Close"
-- button "Hey there" [expanded]
-- region "Hey there": And here we have some content
-- button "Another one"
-- region "Another one"
-- button "Number three"
-- region "Number three"
 - banner:
   - link "Siemens logo":
     - /url: "#/"
@@ -55,4 +46,13 @@
   - code: disableBackdrop
   - text: input.
 - checkbox "disableBackdrop" [checked]
-- text: disableBackdrop
+- text: disableBackdrop
+- paragraph: Title
+- button "Enter fullscreen"
+- button "Close"
+- button "Hey there" [expanded]
+- region "Hey there": And here we have some content
+- button "Another one"
+- region "Another one"
+- button "Number three"
+- region "Number three"

playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode.yaml

@@ -1,12 +1,3 @@
-- paragraph: Title
-- button "Enter fullscreen"
-- button "Close"
-- button "Hey there" [expanded]
-- region "Hey there": And here we have some content
-- button "Another one"
-- region "Another one"
-- button "Number three"
-- region "Number three"
 - banner:
   - link "Siemens logo":
     - /url: "#/"
@@ -55,4 +46,13 @@
   - code: disableBackdrop
   - text: input.
 - checkbox "disableBackdrop"
-- text: disableBackdrop
+- text: disableBackdrop
+- paragraph: Title
+- button "Enter fullscreen"
+- button "Close"
+- button "Hey there" [expanded]
+- region "Hey there": And here we have some content
+- button "Another one"
+- region "Another one"
+- button "Number three"
+- region "Number three"

playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--scroll-mode.yaml

@@ -1,12 +1,3 @@
-- paragraph: Title
-- button "Enter fullscreen"
-- button "Close"
-- button "Hey there" [expanded]
-- region "Hey there": And here we have some content
-- button "Another one"
-- region "Another one"
-- button "Number three"
-- region "Number three"
 - banner:
   - link "Siemens logo":
     - /url: "#/"
@@ -55,4 +46,13 @@
   - code: disableBackdrop
   - text: input.
 - checkbox "disableBackdrop"
-- text: disableBackdrop
+- text: disableBackdrop
+- paragraph: Title
+- button "Enter fullscreen"
+- button "Close"
+- button "Hey there" [expanded]
+- region "Hey there": And here we have some content
+- button "Another one"
+- region "Another one"
+- button "Number three"
+- region "Number three"

playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--closed.yaml

@@ -1,9 +1,3 @@
-- button "Toggle"
-- button "Out of Service"
-- button "Event source active, ack"
-- button "Properties"
-- button "Documents"
-- button "Graphics"
 - banner:
   - link "Siemens logo":
     - /url: "#/"
@@ -46,3 +40,10 @@
   - text: Expanded width for complex forms and content.
   - code: "Extended (Responsive):"
   - text: Adaptive width scaling from mobile full-width to desktop 912px max.
+- button "Toggle"
+- button "Properties"
+- button "Documents"
+- button "Graphics"
+- button "Out of Service"
+- button "•" [disabled]
+- button "Event source active, ack"

playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--open.yaml

@@ -1,19 +1,3 @@
-- paragraph: Cooling coil
-- menubar:
-  - menuitem "Path"
-  - menuitem "Edit"
-  - menuitem "Toggle"
-- button "Enter fullscreen"
-- button "Toggle"
-- button "Out of Service"
-- button "Event source active, ack"
-- textbox "Search..."
-- button "Properties 5" [expanded]
-- region "Properties 5": And here we have some content
-- button "Documents"
-- region "Documents"
-- button "Graphics"
-- region "Graphics"
 - banner:
   - link "Siemens logo":
     - /url: "#/"
@@ -56,3 +40,20 @@
   - text: Expanded width for complex forms and content.
   - code: "Extended (Responsive):"
   - text: Adaptive width scaling from mobile full-width to desktop 912px max.
+- paragraph: Cooling coil
+- menubar:
+  - menuitem "Path"
+  - menuitem "Edit"
+  - menuitem "Toggle"
+- button "Enter fullscreen"
+- button "Toggle" [expanded]
+- textbox "Search..."
+- button "Properties 5" [expanded]
+- region "Properties 5": And here we have some content
+- button "Documents"
+- region "Documents"
+- button "Graphics"
+- region "Graphics"
+- button "Out of Service"
+- button "•" [disabled]
+- button "Event source active, ack"

playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible-legacy-status-actions--legacy-closed.yaml

@@ -1,11 +1,3 @@
-- button "Toggle"
-- link "Out of Service":
-  - /url: ""
-- link "Event source active, ack":
-  - /url: ""
-- button "Properties"
-- button "Documents"
-- button "Graphics"
 - banner:
   - link "Siemens logo":
     - /url: "#/"
@@ -47,4 +39,12 @@
   - code: "Wide (500px):"
   - text: Expanded width for complex forms and content.
   - code: "Extended (Responsive):"
-  - text: Adaptive width scaling from mobile full-width to desktop 912px max.
+  - text: Adaptive width scaling from mobile full-width to desktop 912px max.
+- button "Toggle"
+- link "Out of Service":
+  - /url: ""
+- link "Event source active, ack":
+  - /url: ""
+- button "Properties"
+- button "Documents"
+- button "Graphics"

playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible-legacy-status-actions--legacy-open.yaml

@@ -1,21 +1,3 @@
-- paragraph: Cooling coil
-- menubar:
-  - menuitem "Path"
-  - menuitem "Edit"
-  - menuitem "Toggle"
-- button "Enter fullscreen"
-- button "Toggle"
-- link "Out of Service":
-  - /url: ""
-- link "Event source active, ack":
-  - /url: ""
-- textbox "Search..."
-- button "Properties 5" [expanded]
-- region "Properties 5": And here we have some content
-- button "Documents"
-- region "Documents"
-- button "Graphics"
-- region "Graphics"
 - banner:
   - link "Siemens logo":
     - /url: "#/"
@@ -57,4 +39,22 @@
   - code: "Wide (500px):"
   - text: Expanded width for complex forms and content.
   - code: "Extended (Responsive):"
-  - text: Adaptive width scaling from mobile full-width to desktop 912px max.
+  - text: Adaptive width scaling from mobile full-width to desktop 912px max.
+- paragraph: Cooling coil
+- menubar:
+  - menuitem "Path"
+  - menuitem "Edit"
+  - menuitem "Toggle"
+- button "Enter fullscreen"
+- button "Toggle" [expanded]
+- link "Out of Service":
+  - /url: ""
+- link "Event source active, ack":
+  - /url: ""
+- textbox "Search..."
+- button "Properties 5" [expanded]
+- region "Properties 5": And here we have some content
+- button "Documents"
+- region "Documents"
+- button "Graphics"
+- region "Graphics"

playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel.yaml

@@ -1,11 +1,3 @@
-- paragraph: Title
-- button "Close"
-- button "Hey there" [expanded]
-- region "Hey there": And here we have some content
-- button "Another one"
-- region "Another one"
-- button "Number three"
-- region "Number three"
 - banner:
   - heading "Side panel" [level=1]
   - button "Layout"
@@ -52,4 +44,12 @@
   - code: disableBackdrop
   - text: input.
 - checkbox "disableBackdrop"
-- text: disableBackdrop
+- text: disableBackdrop
+- paragraph: Title
+- button "Close"
+- button "Hey there" [expanded]
+- region "Hey there": And here we have some content
+- button "Another one"
+- region "Another one"
+- button "Number three"
+- region "Number three"

playwright/snapshots/si-tour.spec.ts-snapshots/si-tour--si-tour--first-step.yaml

@@ -18,10 +18,6 @@
   - link "Test Coverage":
     - /url: "#/viewer/viewer/coverage"
 - main:
-  - button "Toggle"
-  - button "Properties"
-  - button "Documents"
-  - button "Graphics"
   - text: /4 Security \d+ Update \d+ Information/
   - navigation "Breadcrumbs":
     - list:
@@ -41,6 +37,10 @@
   - textbox "Search"
   - button "Toolbar item"
   - text: Placeholder for the content of the page, using the fixed height layout.
+  - button "Toggle"
+  - button "Properties"
+  - button "Documents"
+  - button "Graphics"
 - text: Status bar Page title Thank you
 - dialog "Status bar":
   - text: 1 of 7 Status bar

playwright/snapshots/si-tour.spec.ts-snapshots/si-tour--si-tour--last-step.yaml

@@ -18,10 +18,6 @@
   - link "Test Coverage":
     - /url: "#/viewer/viewer/coverage"
 - main:
-  - button "Toggle"
-  - button "Properties"
-  - button "Documents"
-  - button "Graphics"
   - text: /4 Security \d+ Update \d+ Information/
   - navigation "Breadcrumbs":
     - list:
@@ -41,6 +37,10 @@
   - textbox "Search"
   - button "Toolbar item"
   - text: Placeholder for the content of the page, using the fixed height layout.
+  - button "Toggle"
+  - button "Properties"
+  - button "Documents"
+  - button "Graphics"
 - text: Status bar Page title Thank you
 - dialog "Tour completed":
   - text: 7 of 7 Tour completed