docs: deprecate legacy navigation frames

packages/angular-test-app/src/app/app-routing.module.ts

@@ -146,8 +146,12 @@ import Loading from '../preview-examples/loading';
 import MapNavigation from '../preview-examples/map-navigation';
 import MapNavigationOverlay from '../preview-examples/map-navigation-overlay';
 import MenuCategory from '../preview-examples/menu-category';
+import MenuWithBottomTabs from '../preview-examples/menu-with-bottom-tabs';
+import Message from '../preview-examples/message';
 import MessageBar from '../preview-examples/message-bar';
 import ModalByInstance from '../preview-examples/modal-by-instance';
+import ModalByInstanceContent from '../preview-examples/modal-by-instance-content';
+import ModalByTemplate from '../preview-examples/modal-by-template';
 import ModalSizes from '../preview-examples/modal-sizes';
 import NumberInput from '../preview-examples/number-input';
 import NumberInputDisabled from '../preview-examples/number-input-disabled';
@@ -156,6 +160,7 @@ import NumberInputReadonly from '../preview-examples/number-input-readonly';
 import NumberInputStepperButton from '../preview-examples/number-input-stepper-button';
 import NumberInputValidation from '../preview-examples/number-input-validation';
 import Pagination from '../preview-examples/pagination';
+import PaginationAdvanced from '../preview-examples/pagination-advanced';
 import Pane from '../preview-examples/pane';
 import PaneLayout from '../preview-examples/pane-layout';
 import Pill from '../preview-examples/pill';
@@ -204,8 +209,10 @@ import ToggleButtonPrimaryOutline from '../preview-examples/toggle-button-primar
 import ToggleButtonSecondary from '../preview-examples/toggle-button-secondary';
 import ToggleButtonSecondaryGhost from '../preview-examples/toggle-button-secondary-ghost';
 import ToggleButtonSecondaryOutline from '../preview-examples/toggle-button-secondary-outline';
+import ToggleChecked from '../preview-examples/toggle-checked';
 import ToggleCustomLabel from '../preview-examples/toggle-custom-label';
 import ToggleDisabled from '../preview-examples/toggle-disabled';
+import ToggleIndeterminate from '../preview-examples/toggle-indeterminate';
 import ToggleNgModel from '../preview-examples/toggle-ng-model';
 import Tooltip from '../preview-examples/tooltip';
 import Tree from '../preview-examples/tree';
@@ -217,14 +224,8 @@ import VerticalTabs from '../preview-examples/vertical-tabs';
 import VerticalTabsWithAvatar from '../preview-examples/vertical-tabs-with-avatar';
 import Workflow from '../preview-examples/workflow';
 import WorkflowVertical from '../preview-examples/workflow-vertical';
-
-import MenuWithBottomTabs from '../preview-examples/menu-with-bottom-tabs';
-import Message from '../preview-examples/message';
-import ModalByInstanceContent from '../preview-examples/modal-by-instance-content';
-import ModalByTemplate from '../preview-examples/modal-by-template';
-import PaginationAdvanced from '../preview-examples/pagination-advanced';
-import ToggleChecked from '../preview-examples/toggle-checked';
-import ToggleIndeterminate from '../preview-examples/toggle-indeterminate';
+import MapNavigationMigration from '../preview-examples/map-navigation-migration';
+import BasicNavigationMigration from '../preview-examples/basic-navigation-migration';
 
 const routes: Routes = [
   {
@@ -298,6 +299,10 @@ const routes: Routes = [
         path: 'basic-navigation',
         component: BasicNavigation,
       },
+      {
+        path: 'basic-navigation-migration',
+        component: BasicNavigationMigration,
+      },
       {
         path: 'blind-header-actions',
         component: BlindHeaderActions,
@@ -893,6 +898,7 @@ const routes: Routes = [
       { path: 'workflow-vertical', component: WorkflowVertical },
       { path: 'map-navigation', component: MapNavigation },
       { path: 'map-navigation-overlay', component: MapNavigationOverlay },
+      { path: 'map-navigation-migration', component: MapNavigationMigration },
       { path: 'number-input', component: NumberInput },
       { path: 'number-input-disabled', component: NumberInputDisabled },
       { path: 'number-input-label', component: NumberInputLabel },

packages/angular-test-app/src/app/app.module.ts

@@ -30,6 +30,7 @@ import Avatar from '../preview-examples/avatar';
 import AvatarImage from '../preview-examples/avatar-image';
 import AvatarInitials from '../preview-examples/avatar-initials';
 import BasicNavigation from '../preview-examples/basic-navigation';
+import BasicNavigationMigration from '../preview-examples/basic-navigation-migration';
 import BasicNavigationWithoutHeader from '../preview-examples/basic-navigation-without-header';
 import Blind from '../preview-examples/blind';
 import BlindHeaderActions from '../preview-examples/blind-header-actions';
@@ -233,6 +234,7 @@ import VerticalTabs from '../preview-examples/vertical-tabs';
 import VerticalTabsWithAvatar from '../preview-examples/vertical-tabs-with-avatar';
 import Workflow from '../preview-examples/workflow';
 import WorkflowVertical from '../preview-examples/workflow-vertical';
+import MapNavigationMigration from '../preview-examples/map-navigation-migration';
 
 @NgModule({
   declarations: [
@@ -253,6 +255,7 @@ import WorkflowVertical from '../preview-examples/workflow-vertical';
     Avatar,
     BasicNavigationWithoutHeader,
     BasicNavigation,
+    BasicNavigationMigration,
     BlindHeaderActions,
     BlindVariants,
     Blind,
@@ -445,6 +448,7 @@ import WorkflowVertical from '../preview-examples/workflow-vertical';
     WorkflowVertical,
     MapNavigation,
     MapNavigationOverlay,
+    MapNavigationMigration,
     NumberInput,
     NumberInputDisabled,
     NumberInputLabel,

packages/angular-test-app/src/preview-examples/application-app-switch.html

@@ -10,7 +10,20 @@
 <ix-application [appSwitchConfig]="appSwitchConfig">
   <ix-application-header name="My Application">
     <div class="placeholder-logo" slot="logo"></div>
+
+    <ix-dropdown-button variant="secondary" label="Select config" ghost>
+      <ix-dropdown-item label="Config 1"></ix-dropdown-item>
+      <ix-dropdown-item label="Config 2"></ix-dropdown-item>
+      <ix-dropdown-item label="Config 3"></ix-dropdown-item>
+    </ix-dropdown-button>
+
+    <ix-avatar>
+      <ix-dropdown-item label="Action 1"></ix-dropdown-item>
+      <ix-dropdown-item label="Action 2"></ix-dropdown-item>
+      <ix-dropdown-item label="Action 3"></ix-dropdown-item>
+    </ix-avatar>
   </ix-application-header>
+
   <ix-menu>
     <ix-menu-item>Item 1</ix-menu-item>
     <ix-menu-item>Item 2</ix-menu-item>

packages/angular-test-app/src/preview-examples/application-breakpoints.html

@@ -28,6 +28,7 @@
     <ix-menu-item>Item 1</ix-menu-item>
     <ix-menu-item>Item 2</ix-menu-item>
   </ix-menu>
+
   <ix-content>
     <ix-content-header slot="header" header-title="Choose breakpoint">
     </ix-content-header>

packages/angular-test-app/src/preview-examples/application.html

@@ -11,6 +11,7 @@
   <ix-application-header name="My Application">
     <div class="placeholder-logo" slot="logo"></div>
   </ix-application-header>
+
   <ix-menu>
     <ix-menu-item>Item 1</ix-menu-item>
     <ix-menu-item>Item 2</ix-menu-item>

packages/angular-test-app/src/preview-examples/basic-navigation-migration.css

@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * Styles get overwritten by html-test-app css files each build or dev task.
+ * If you want to modify the example styles do this only inside the html-test-app
+ */
+
+ix-application {
+  width: 100vw;
+  height: 100vh;
+}

packages/angular-test-app/src/preview-examples/basic-navigation-migration.html

@@ -0,0 +1,20 @@
+<!--
+SPDX-FileCopyrightText: 2024 Siemens AG
+
+SPDX-License-Identifier: MIT
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<ix-application>
+  <!--{KEEP} Compare hideHeader property -->
+  <ix-application-header name="My Application">
+    <div class="placeholder-logo" slot="logo"></div>
+  </ix-application-header>
+
+  <ix-menu>
+    <ix-menu-item>Item 1</ix-menu-item>
+    <ix-menu-item>Item 2</ix-menu-item>
+  </ix-menu>
+</ix-application>

packages/angular-test-app/src/preview-examples/basic-navigation-migration.ts

@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './basic-navigation-migration.html',
+  styleUrls: ['./basic-navigation-migration.css'],
+})
+export default class BasicNavigationMigration {}

packages/angular-test-app/src/preview-examples/map-navigation-migration.css

@@ -0,0 +1,27 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * Styles get overwritten by html-test-app css files each build or dev task.
+ * If you want to modify the example styles do this only inside the html-test-app
+ */
+
+.application {
+  height: 100vh;
+  width: 100vw;
+
+  .overlay {
+    position: absolute;
+    right: 0;
+    z-index: 1;
+  }
+
+  .content {
+    box-sizing: border-box;
+  }
+}

packages/angular-test-app/src/preview-examples/map-navigation-migration.html

@@ -0,0 +1,46 @@
+<ix-application class="application">
+  <ix-application-header name="My Application">
+    <div class="placeholder-logo" slot="logo"></div>
+
+    <!--{KEEP} Compare context menu -->
+    <ix-dropdown-button variant="secondary" label="Select config" ghost>
+      <ix-dropdown-item label="Config 1"></ix-dropdown-item>
+      <ix-dropdown-item label="Config 2"></ix-dropdown-item>
+      <ix-dropdown-item label="Config 3"></ix-dropdown-item>
+    </ix-dropdown-button>
+  </ix-application-header>
+
+  <ix-menu>
+    <ix-menu-item>Item 1</ix-menu-item>
+    <ix-menu-item>Item 2</ix-menu-item>
+  </ix-menu>
+
+  <!--{KEEP} Compare overlay -->
+  <ix-pane
+    class="overlay"
+    composition="right"
+    heading="Custom overlay"
+    icon="bulb"
+    size="320px"
+    variant="floating"
+    hide-on-collapse
+    [expanded]="expanded"
+    (expandedChanged)="resetExpanded($event)"
+  >
+    Overlay content
+  </ix-pane>
+
+  <ix-pane-layout>
+    <!--{KEEP} Compare sidebar -->
+    <ix-pane slot="left" heading="Navigation title" size="320px" expanded>
+      Sidebar content
+    </ix-pane>
+
+    <ix-content class="content">
+      <ix-content-header slot="header" header-title="My Content Page">
+      </ix-content-header>
+
+      <ix-button (click)="toggleOverlay()">Open overlay</ix-button>
+    </ix-content>
+  </ix-pane-layout>
+</ix-application>

packages/angular-test-app/src/preview-examples/map-navigation-migration.ts

@@ -0,0 +1,29 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './map-navigation-migration.html',
+  styleUrls: ['./map-navigation-migration.css'],
+})
+export default class MapNavigationMigration {
+  expanded = false;
+
+  resetExpanded(event: Event) {
+    requestAnimationFrame(() => {
+      this.expanded = (event as CustomEvent).detail.expanded;
+    });
+  }
+
+  toggleOverlay() {
+    this.expanded = !this.expanded;
+  }
+}

packages/angular-test-app/src/preview-examples/map-navigation-overlay.ts

@@ -13,24 +13,37 @@ import { Component } from '@angular/core';
   selector: 'app-example',
   template: `
     <ix-map-navigation
-      application-name="Test Application"
-      navigation-title="Some other content"
+      application-name="My Application"
+      navigation-title="Navigation title"
+      hide-context-menu="false"
     >
       <div class="placeholder-logo" slot="logo"></div>
+
       <ix-menu>
         <ix-menu-item>Item 1</ix-menu-item>
         <ix-menu-item>Item 2</ix-menu-item>
-        <ix-menu-item>Item 3</ix-menu-item>
       </ix-menu>
-      <div slot="sidebar-content">Sidebar content</div>
-      <ix-button (click)="showOverlay = true">Show overlay</ix-button>
+
+      <ix-content slot="sidebar-content">Sidebar content</ix-content>
+
+      <ix-content>
+        <ix-content-header
+          slot="header"
+          header-title="My Content Page"
+        ></ix-content-header>
+
+        <ix-button (click)="showOverlay = true">Show overlay</ix-button>
+      </ix-content>
+
       <ix-map-navigation-overlay
         *ngIf="showOverlay"
-        name="Custom overlay title"
-        icon="bulb"
         slot="overlay"
+        name="Custom overlay"
+        icon="bulb"
         (closeClick)="showOverlay = false"
-      ></ix-map-navigation-overlay>
+      >
+        <ix-content>Overlay content</ix-content>
+      </ix-map-navigation-overlay>
     </ix-map-navigation>
   `,
 })

packages/angular-test-app/src/preview-examples/map-navigation.ts

@@ -13,17 +13,25 @@ import { Component } from '@angular/core';
   selector: 'app-example',
   template: `
     <ix-map-navigation
-      application-name="Test Application"
-      navigation-title="Some other content"
+      application-name="My Application"
+      navigation-title="Navigation title"
+      hide-context-menu="false"
     >
       <div class="placeholder-logo" slot="logo"></div>
+
       <ix-menu>
         <ix-menu-item>Item 1</ix-menu-item>
         <ix-menu-item>Item 2</ix-menu-item>
-        <ix-menu-item>Item 3</ix-menu-item>
       </ix-menu>
-      <div slot="sidebar-content">Sidebar content</div>
-      <div>Content</div>
+
+      <ix-content slot="sidebar-content">Sidebar content</ix-content>
+
+      <ix-content>
+        <ix-content-header
+          slot="header"
+          header-title="My Content Page"
+        ></ix-content-header>
+      </ix-content>
     </ix-map-navigation>
   `,
 })

packages/documentation/docs/controls/_breadcrumb_styleguide.md

@@ -46,6 +46,6 @@ Interactive items can take one of four states: Default, hover, active and focuse
 ### Related patterns:
 
 - [Dropdown](dropdown.md)
-- [Basic navigation](application-frame/basic-navigation.md)
-- [Map navigation](application-frame/map-navigation.md)
+- [Basic navigation](../legacy/basic-navigation.md)
+- [Map navigation](../legacy/map-navigation.md)
 - [Workflow](workflow.md)