From 6a8983b17aa4275fa0b255c409de8a8cc854a17d Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Wed, 20 Mar 2024 16:11:59 +0100
Subject: [PATCH 1/9] chore(demo, intranet-header-workspace): Refactor
 intranet-header demo

---
 packages/demo/src/app/app-routing.module.ts   |  34 +-
 packages/demo/src/app/app.component.html      | 469 +-----------------
 packages/demo/src/app/app.component.ts        |  38 +-
 packages/demo/src/app/app.module.ts           |   9 +-
 ...et-header-demo-big-sidebar.component.html} |   4 +-
 ...header-demo-big-sidebar.component.spec.ts} |  10 +-
 ...anet-header-demo-big-sidebar.component.ts} |   4 +-
 ...ntranet-header-demo-regular.component.html |  19 +
 .../intranet-header-demo-regular.component.ts |   8 +
 ...-header-demo-small-sidebar.component.html} |   8 +-
 ...ader-demo-small-sidebar.component.spec.ts} |  10 +-
 ...et-header-demo-small-sidebar.component.ts} |   4 +-
 .../intranet-components.module.ts             |  17 +-
 .../intranet-layout.component.css             |  63 ---
 .../intranet-layout.component.html            |  60 +--
 .../intranet-layout.component.ts              |  29 +-
 .../layout-container.component.html           | 468 +++++++++++++++++
 .../layout-container.component.scss}          |   0
 .../layout-container.component.ts             |  39 ++
 .../alert-demo-page.component.html            |   2 +-
 .../intranet-header-workspace/angular.json    |  44 +-
 .../intranet-header-workspace/package.json    |   1 +
 .../src/app.component.ts                      |   9 +
 .../src/app.module.ts                         |  32 ++
 .../src/app/app.component.ts                  |  13 -
 .../src/app/app.module.ts                     |  14 -
 .../intranet-header-showcase/src/main.ts      |   5 +-
 .../navigation/navigation.component.html}     |   0
 .../navigation/navigation.component.scss}     |   0
 .../navigation/navigation.component.spec.ts}  |  16 +-
 .../navigation/navigation.component.ts        |  12 +
 .../src/samples/samples-index.component.ts    |  13 +
 .../sidebar-with-searchbar.component.html     |  71 +++
 .../sidebar-with-searchbar.component.ts       |  10 +
 .../samples/sidebar/sidebar.component.html    |  63 +++
 .../src/samples/sidebar/sidebar.component.ts  |  10 +
 .../intranet-header-showcase/src/styles.scss  |   4 -
 .../swisspost-intranet-header.component.html  | 246 +++++----
 .../swisspost-intranet-header.component.scss  |  63 ---
 .../swisspost-intranet-header.component.ts    |   3 +-
 pnpm-lock.yaml                                |  93 +---
 41 files changed, 1000 insertions(+), 1017 deletions(-)
 rename packages/demo/src/app/intranet-layout/components/{intranet-header-big/intranet-header-big.component.html => intranet-header-demo-big-sidebar/intranet-header-demo-big-sidebar.component.html} (96%)
 rename packages/demo/src/app/intranet-layout/components/{intranet-header-big/intranet-header-big.component.spec.ts => intranet-header-demo-big-sidebar/intranet-header-demo-big-sidebar.component.spec.ts} (62%)
 rename packages/demo/src/app/intranet-layout/components/{intranet-header-big/intranet-header-big.component.ts => intranet-header-demo-big-sidebar/intranet-header-demo-big-sidebar.component.ts} (89%)
 create mode 100644 packages/demo/src/app/intranet-layout/components/intranet-header-demo-regular/intranet-header-demo-regular.component.html
 create mode 100644 packages/demo/src/app/intranet-layout/components/intranet-header-demo-regular/intranet-header-demo-regular.component.ts
 rename packages/demo/src/app/intranet-layout/components/{intranet-header-small/intranet-header-small.component.html => intranet-header-demo-small-sidebar/intranet-header-demo-small-sidebar.component.html} (93%)
 rename packages/demo/src/app/intranet-layout/components/{intranet-header-small/intranet-header-small.component.spec.ts => intranet-header-demo-small-sidebar/intranet-header-demo-small-sidebar.component.spec.ts} (57%)
 rename packages/demo/src/app/intranet-layout/components/{intranet-header-small/intranet-header-small.component.ts => intranet-header-demo-small-sidebar/intranet-header-demo-small-sidebar.component.ts} (84%)
 create mode 100644 packages/demo/src/app/layout-container/layout-container.component.html
 rename packages/demo/src/app/{app.component.scss => layout-container/layout-container.component.scss} (100%)
 create mode 100644 packages/demo/src/app/layout-container/layout-container.component.ts
 create mode 100644 packages/intranet-header-workspace/projects/intranet-header-showcase/src/app.component.ts
 create mode 100644 packages/intranet-header-workspace/projects/intranet-header-showcase/src/app.module.ts
 delete mode 100644 packages/intranet-header-workspace/projects/intranet-header-showcase/src/app/app.component.ts
 delete mode 100644 packages/intranet-header-workspace/projects/intranet-header-showcase/src/app/app.module.ts
 rename packages/intranet-header-workspace/projects/intranet-header-showcase/src/{app/app.component.html => samples/navigation/navigation.component.html} (100%)
 rename packages/intranet-header-workspace/projects/intranet-header-showcase/src/{app/app.component.scss => samples/navigation/navigation.component.scss} (100%)
 rename packages/intranet-header-workspace/projects/intranet-header-showcase/src/{app/app.component.spec.ts => samples/navigation/navigation.component.spec.ts} (59%)
 create mode 100644 packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/navigation/navigation.component.ts
 create mode 100644 packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/samples-index.component.ts
 create mode 100644 packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar-with-searchbar/sidebar-with-searchbar.component.html
 create mode 100644 packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar-with-searchbar/sidebar-with-searchbar.component.ts
 create mode 100644 packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar/sidebar.component.html
 create mode 100644 packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar/sidebar.component.ts

diff --git a/packages/demo/src/app/app-routing.module.ts b/packages/demo/src/app/app-routing.module.ts
index 71440d3bb9..d127b80876 100644
--- a/packages/demo/src/app/app-routing.module.ts
+++ b/packages/demo/src/app/app-routing.module.ts
@@ -50,14 +50,24 @@ import { StepperDemoPageComponent } from './post-sample/components/stepper/stepp
 import { DatatableDemoPageComponent } from './post-sample/components/datatable/datatable-demo-page/datatable-demo-page.component';
 import { FormsDemoPageComponent } from './post-sample/components/forms/forms-demo-page/forms-demo-page.component';
 import { PostCardsDemoPageComponent } from './post-sample/components/post-cards/post-cards-demo-page/post-cards-demo-page.component';
+import { LayoutContainerComponent } from './layout-container/layout-container.component';
+import { IntranetHeaderDemoRegularComponent } from './intranet-layout/components/intranet-header-demo-regular/intranet-header-demo-regular.component';
+import { IntranetHeaderDemoBigSidebarComponent } from './intranet-layout/components/intranet-header-demo-big-sidebar/intranet-header-demo-big-sidebar.component';
+import { IntranetHeaderDemoSmallSidebarComponent } from './intranet-layout/components/intranet-header-demo-small-sidebar/intranet-header-demo-small-sidebar.component';
 /* tslint:enable:max-line-length */
 
 const routes: Routes = [
   { path: '', redirectTo: 'home', pathMatch: 'full' },
-  { path: 'home', component: HomeComponent, data: { fullWidth: true } },
+  {
+    path: 'home',
+    component: LayoutContainerComponent,
+    data: { fullWidth: true },
+    children: [{ path: '', component: HomeComponent, data: { fullWidth: true } }],
+  },
 
   {
     path: 'bootstrap-samples',
+    component: LayoutContainerComponent,
     children: [
       { path: 'accordion', component: AccordionDemoPageComponent },
       { path: 'alerts', component: AlertDemoPageComponent },
@@ -90,6 +100,7 @@ const routes: Routes = [
   },
   {
     path: 'ng-bootstrap-samples',
+    component: LayoutContainerComponent,
     children: [
       { path: 'accordion', component: NgbAccordionDemoPageComponent },
       { path: 'rating', component: NgbRatingDemoPageComponent },
@@ -114,6 +125,7 @@ const routes: Routes = [
   },
   {
     path: 'post-samples',
+    component: LayoutContainerComponent,
     children: [
       { path: 'accordion', component: AccordionDemoPageComponent },
       { path: 'datatable', component: DatatableDemoPageComponent },
@@ -135,10 +147,24 @@ const routes: Routes = [
       { path: 'custom-select', component: CustomSelectDemoPageComponent },
       { path: 'stepper', component: StepperDemoPageComponent },
       { path: 'forms', component: FormsDemoPageComponent },
+      { path: 'intranet-layout', component: IntranetLayoutComponent, data: { fullWidth: true } },
+    ],
+  },
+
+  {
+    path: 'samples',
+    children: [
       {
-        path: 'intranet-layout',
-        component: IntranetLayoutComponent,
-        data: { fullWidth: true },
+        path: 'intranet-layout-regular',
+        component: IntranetHeaderDemoRegularComponent,
+      },
+      {
+        path: 'intranet-layout-sidebar-big-sidebar',
+        component: IntranetHeaderDemoBigSidebarComponent,
+      },
+      {
+        path: 'intranet-layout-sidebar-small-sidebar',
+        component: IntranetHeaderDemoSmallSidebarComponent,
       },
     ],
   },
diff --git a/packages/demo/src/app/app.component.html b/packages/demo/src/app/app.component.html
index 504c069775..0680b43f9c 100644
--- a/packages/demo/src/app/app.component.html
+++ b/packages/demo/src/app/app.component.html
@@ -1,468 +1 @@
-<div class="layout-container header-big">
-  <ng-template #versionDropdown>
-    <div class="version-switch" ngbDropdown>
-      <label class="visually-hidden" for="versionDropdownButton" id="versionDropdown">
-        Version Selection for older documentation versions
-      </label>
-      <button class="btn btn-link dropdown-button" id="versionDropdownButton" ngbDropdownToggle>
-        {{ (currentVersion$ | async)?.title }}
-      </button>
-      <div ngbDropdownMenu aria-labelledby="versionDropdown">
-        <a
-          *ngFor="let version of versions$ | async"
-          [href]="isLatest ? 'https://design-system.post.ch' : version.url"
-          [class.active]="version.isCurrent"
-          ngbDropdownItem
-        >
-          <span class="bold">{{ version.title }}</span>
-          <div class="small mt-2 icons" *ngIf="version.dependencies">
-            <span
-              title="Angular"
-              *ngIf="version.dependencies.get('@angular/core') as angularVersion"
-            >
-              <img src="assets/images/angular.png" alt="Angular Logo" />
-              {{ angularVersion.format('x.x') }}
-            </span>
-            <span
-              title="Bootstrap"
-              *ngIf="version.dependencies.get('bootstrap') as bootstrapVersion"
-            >
-              <img src="assets/images/bootstrap.png" alt="Bootstrap Logo" />
-              {{ bootstrapVersion.format('x.x') }}
-            </span>
-            <span
-              title="ng-bootstrap"
-              *ngIf="version.dependencies.get('@ng-bootstrap/ng-bootstrap') as ngBootstrapVersion"
-            >
-              <img src="assets/images/ng-bootstrap.svg" alt="ng-bootstrap Logo" />
-              {{ ngBootstrapVersion.format('x.x') }}
-            </span>
-          </div>
-        </a>
-      </div>
-    </div>
-  </ng-template>
-
-  <sp-intranet-header
-    [optionHeaderContent]="(versions$ | async) ? versionDropdown : null"
-    siteTitle="Swiss Post Design System"
-    languages="en"
-    logoUrl="/"
-  >
-    <li class="nav-item">
-      <a
-        class="nav-link"
-        [ngClass]="{ active: router.url.indexOf('/home') > -1 }"
-        [routerLink]="'home'"
-      >
-        Home
-      </a>
-    </li>
-    <li class="nav-item" ngbDropdown>
-      <button
-        [ngClass]="{ active: router.url.indexOf('/bootstrap-samples') > -1 }"
-        class="nav-link"
-        id="id01"
-        ngbDropdownToggle
-        type="button"
-      >
-        Bootstrap
-      </button>
-      <div aria-labelledby="id01" ngbDropdownMenu>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/accordion') > -1 }"
-          [routerLink]="'bootstrap-samples/accordion'"
-        >
-          Accordion
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/alerts') > -1 }"
-          [routerLink]="'bootstrap-samples/alerts'"
-        >
-          Alerts / Notifications
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/background') > -1 }"
-          [routerLink]="'bootstrap-samples/background'"
-        >
-          Background
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/badge') > -1 }"
-          [routerLink]="'bootstrap-samples/badge'"
-        >
-          Badge
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/blockquotes') > -1 }"
-          [routerLink]="'bootstrap-samples/blockquotes'"
-        >
-          Blockquotes
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/buttons') > -1 }"
-          [routerLink]="'bootstrap-samples/buttons'"
-        >
-          Buttons
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/button-group') > -1 }"
-          [routerLink]="'bootstrap-samples/button-group'"
-        >
-          Button Group
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/card') > -1 }"
-          [routerLink]="'bootstrap-samples/card'"
-        >
-          Cards
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/forms') > -1 }"
-          [routerLink]="'bootstrap-samples/forms'"
-        >
-          Forms
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/form-check') > -1 }"
-          [routerLink]="'bootstrap-samples/form-check'"
-        >
-          Form checkbox
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/form-control') > -1 }"
-          [routerLink]="'bootstrap-samples/form-control'"
-        >
-          Form control
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/form-file') > -1 }"
-          [routerLink]="'bootstrap-samples/form-file'"
-        >
-          Form file
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/form-radio') > -1 }"
-          [routerLink]="'bootstrap-samples/form-radio'"
-        >
-          Form radio button
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/form-range') > -1 }"
-          [routerLink]="'bootstrap-samples/form-range'"
-        >
-          Form range
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/form-select') > -1 }"
-          [routerLink]="'bootstrap-samples/form-select'"
-        >
-          Form select
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/form-multiple-select') > -1 }"
-          [routerLink]="'bootstrap-samples/form-multiple-select'"
-        >
-          Form select multiple
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/form-switch') > -1 }"
-          [routerLink]="'bootstrap-samples/form-switch'"
-        >
-          Form switch
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/form-textarea') > -1 }"
-          [routerLink]="'bootstrap-samples/form-textarea'"
-        >
-          Form textarea
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/tables') > -1 }"
-          [routerLink]="'bootstrap-samples/tables'"
-        >
-          Tables
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/typography') > -1 }"
-          [routerLink]="'bootstrap-samples/typography'"
-        >
-          Typography
-        </a>
-      </div>
-    </li>
-    <li class="nav-item" ngbDropdown>
-      <button
-        [ngClass]="{ active: router.url.indexOf('/ng-bootstrap-samples') > -1 }"
-        class="nav-link"
-        id="id02"
-        ngbDropdownToggle
-        type="button"
-      >
-        NgBootstrap
-      </button>
-      <div aria-labelledby="id02" ngbDropdownMenu>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/ng-bootstrap-samples/accordion') > -1 }"
-          [routerLink]="'ng-bootstrap-samples/accordion'"
-        >
-          Accordion
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/ng-bootstrap-samples/alert') > -1 }"
-          [routerLink]="'ng-bootstrap-samples/alert'"
-        >
-          Alerts
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/ng-bootstrap-samples/carousel') > -1 }"
-          [routerLink]="'ng-bootstrap-samples/carousel'"
-        >
-          Carousel
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/ng-bootstrap-samples/collapse') > -1 }"
-          [routerLink]="'ng-bootstrap-samples/collapse'"
-        >
-          Collapse
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/ng-bootstrap-samples/datepicker') > -1 }"
-          [routerLink]="'ng-bootstrap-samples/datepicker'"
-        >
-          Datepicker
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/ng-bootstrap-samples/dropdown') > -1 }"
-          [routerLink]="'ng-bootstrap-samples/dropdown'"
-        >
-          Dropdown
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/ng-bootstrap-samples/modal') > -1 }"
-          [routerLink]="'ng-bootstrap-samples/modal'"
-        >
-          Modal
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/ng-bootstrap-samples/pagination') > -1 }"
-          [routerLink]="'ng-bootstrap-samples/pagination'"
-        >
-          Pagination
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/ng-bootstrap-samples/popover') > -1 }"
-          [routerLink]="'ng-bootstrap-samples/popover'"
-        >
-          Popover
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/ng-bootstrap-samples/progressbar') > -1 }"
-          [routerLink]="'ng-bootstrap-samples/progressbar'"
-        >
-          Progressbar
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/ng-bootstrap-samples/rating') > -1 }"
-          [routerLink]="'ng-bootstrap-samples/rating'"
-        >
-          Rating
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/ng-bootstrap-samples/tabs') > -1 }"
-          [routerLink]="'ng-bootstrap-samples/tabs'"
-        >
-          Tabs
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/ng-bootstrap-samples/timepicker') > -1 }"
-          [routerLink]="'ng-bootstrap-samples/timepicker'"
-        >
-          Timepicker
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/ng-bootstrap-samples/tooltip') > -1 }"
-          [routerLink]="'ng-bootstrap-samples/tooltip'"
-        >
-          Tooltip
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/ng-bootstrap-samples/typeahead') > -1 }"
-          [routerLink]="'ng-bootstrap-samples/typeahead'"
-        >
-          Typeahead
-        </a>
-      </div>
-    </li>
-    <li class="nav-item" ngbDropdown>
-      <button
-        [ngClass]="{ active: router.url.indexOf('/post-samples') > -1 }"
-        class="nav-link"
-        id="id04"
-        ngbDropdownToggle
-        type="button"
-      >
-        Post
-      </button>
-      <div aria-labelledby="id01" ngbDropdownMenu>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/post-samples/custom-select') > -1 }"
-          [routerLink]="'post-samples/custom-select'"
-        >
-          Custom select
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/post-samples/datatable') > -1 }"
-          [routerLink]="'post-samples/datatable'"
-        >
-          Datatable
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/post-samples/feedback') > -1 }"
-          [routerLink]="'post-samples/feedback'"
-        >
-          Feedback
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/post-samples/forms') > -1 }"
-          [routerLink]="'post-samples/forms'"
-        >
-          Forms
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/post-samples/icons') > -1 }"
-          [routerLink]="'post-samples/icons'"
-        >
-          Icons
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/post-samples/intranet-layout') > -1 }"
-          href="https://design-system.post.ch/?path=/docs/9b02bcb2-3b6a-4271-b550-675a62ff3890--docs"
-        >
-          Internet header
-          <i style="height: 1em" aria-hidden="true" class="pi pi-2038"></i>
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/post-samples/intranet-layout') > -1 }"
-          [routerLink]="'/post-samples/intranet-layout'"
-        >
-          Intranet header
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/post-samples/notification-overlay') > -1 }"
-          [routerLink]="'post-samples/notification-overlay'"
-        >
-          Notification overlay
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/post-samples/card') > -1 }"
-          [routerLink]="'post-samples/card'"
-        >
-          Post cards
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/post-samples/sizing') > -1 }"
-          [routerLink]="'post-samples/sizing'"
-        >
-          Sizing
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/post-samples/spinner') > -1 }"
-          [routerLink]="'post-samples/spinner'"
-        >
-          Spinner
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/post-samples/stepper') > -1 }"
-          [routerLink]="'post-samples/stepper'"
-        >
-          Stepper
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/post-samples/subnavigation') > -1 }"
-          [routerLink]="'post-samples/subnavigation'"
-        >
-          Subnavigation
-        </a>
-        <a
-          ngbDropdownItem
-          [ngClass]="{ active: router.url.indexOf('/post-samples/topic-teaser') > -1 }"
-          [routerLink]="'post-samples/topic-teaser'"
-        >
-          Topic teaser
-        </a>
-      </div>
-    </li>
-  </sp-intranet-header>
-  <div
-    data-spy="scroll"
-    data-target="#component-list"
-    data-offset="0"
-    mainContent
-    [ngClass]="{ container: !setFullwidthContainer }"
-    id="mainContent"
-  ></div>
-  <div
-    [ngClass]="
-      setFullwidthContainer ? 'site-content header-margin' : 'site-content container header-margin'
-    "
-  >
-    <main role="main">
-      <router-outlet></router-outlet>
-    </main>
-  </div>
-
-  <app-footer></app-footer>
-</div>
-<script type="text/javascript" src="runtime.js"></script>
-<script type="text/javascript" src="polyfills.js"></script>
-<script type="text/javascript" src="scripts.js"></script>
-<script type="text/javascript" src="main.js"></script>
+<router-outlet></router-outlet>
diff --git a/packages/demo/src/app/app.component.ts b/packages/demo/src/app/app.component.ts
index 0020e7bc14..7c802bdc05 100644
--- a/packages/demo/src/app/app.component.ts
+++ b/packages/demo/src/app/app.component.ts
@@ -1,43 +1,9 @@
-import { Component, OnInit } from '@angular/core';
-import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
-import { filter, map, mergeMap } from 'rxjs/operators';
-import { VersionService } from './common/version.service';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
 })
-export class AppComponent implements OnInit {
-  public setFullwidthContainer: boolean = false;
+export class AppComponent {
   public title = 'app';
-  public versions$;
-  public currentVersion$;
-
-  constructor(
-    private versionService: VersionService,
-    public router: Router,
-    private route: ActivatedRoute,
-  ) {}
-
-  ngOnInit() {
-    this.versions$ = this.versionService.versions;
-    this.currentVersion$ = this.versionService.currentVersion;
-
-    this.router.events
-      .pipe(
-        filter(e => e instanceof NavigationEnd),
-        map(() => this.route),
-        map(route => {
-          while (route.firstChild) {
-            route = route.firstChild;
-          }
-          return route;
-        }),
-        mergeMap(route => route.data),
-      )
-      .subscribe(data => {
-        this.setFullwidthContainer = !!data.fullWidth;
-      });
-  }
 }
diff --git a/packages/demo/src/app/app.module.ts b/packages/demo/src/app/app.module.ts
index de9e1223da..ae280f1155 100644
--- a/packages/demo/src/app/app.module.ts
+++ b/packages/demo/src/app/app.module.ts
@@ -27,6 +27,7 @@ import { SwissPostIntranetHeaderModule } from '@swisspost/design-system-intranet
 import { HomeComponent } from './home/home.component';
 import { PostCommonModule } from './common/post-common.module';
 import { HttpClientModule } from '@angular/common/http';
+import { LayoutContainerComponent } from './layout-container/layout-container.component';
 
 registerLocaleData(localeDe);
 registerLocaleData(localeFr);
@@ -34,7 +35,13 @@ registerLocaleData(localeIt);
 registerLocaleData(localeEn);
 
 @NgModule({
-  declarations: [AppComponent, IntranetLayoutComponent, HomeComponent, CopyToClipboardDirective],
+  declarations: [
+    AppComponent,
+    IntranetLayoutComponent,
+    LayoutContainerComponent,
+    HomeComponent,
+    CopyToClipboardDirective,
+  ],
   imports: [
     BrowserModule,
     AppRoutingModule,
diff --git a/packages/demo/src/app/intranet-layout/components/intranet-header-big/intranet-header-big.component.html b/packages/demo/src/app/intranet-layout/components/intranet-header-demo-big-sidebar/intranet-header-demo-big-sidebar.component.html
similarity index 96%
rename from packages/demo/src/app/intranet-layout/components/intranet-header-big/intranet-header-big.component.html
rename to packages/demo/src/app/intranet-layout/components/intranet-header-demo-big-sidebar/intranet-header-demo-big-sidebar.component.html
index e011539e23..f47b45e54c 100644
--- a/packages/demo/src/app/intranet-layout/components/intranet-header-big/intranet-header-big.component.html
+++ b/packages/demo/src/app/intranet-layout/components/intranet-header-demo-big-sidebar/intranet-header-demo-big-sidebar.component.html
@@ -1,5 +1,5 @@
-<section class="layout-container header-big with-searchbar preview">
-  <sp-intranet-header siteTitle="PostWeb" [showIntranetSearch]="true" [isPreview]="true">
+<section class="layout-container header-big with-searchbar">
+  <sp-intranet-header siteTitle="PostWeb" [showIntranetSearch]="true">
     <li class="nav-item"><a href="/postweb" class="nav-link">Home</a></li>
     <li class="nav-item">
       <a href="/postweb/post-informatik" class="nav-link" target="_self">Post Informatik</a>
diff --git a/packages/demo/src/app/intranet-layout/components/intranet-header-big/intranet-header-big.component.spec.ts b/packages/demo/src/app/intranet-layout/components/intranet-header-demo-big-sidebar/intranet-header-demo-big-sidebar.component.spec.ts
similarity index 62%
rename from packages/demo/src/app/intranet-layout/components/intranet-header-big/intranet-header-big.component.spec.ts
rename to packages/demo/src/app/intranet-layout/components/intranet-header-demo-big-sidebar/intranet-header-demo-big-sidebar.component.spec.ts
index 7c46feb6ba..254be4b7ae 100644
--- a/packages/demo/src/app/intranet-layout/components/intranet-header-big/intranet-header-big.component.spec.ts
+++ b/packages/demo/src/app/intranet-layout/components/intranet-header-demo-big-sidebar/intranet-header-demo-big-sidebar.component.spec.ts
@@ -1,23 +1,23 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
-import { IntranetHeaderBigComponent } from './intranet-header-big.component';
+import { IntranetHeaderDemoBigSidebarComponent } from './intranet-header-demo-big-sidebar.component';
 import { ErrorService } from '../../services/error.service';
 import { RouterTestingModule } from '@angular/router/testing';
 
 describe('IntranetHeaderBigComponent', () => {
-  let component: IntranetHeaderBigComponent;
-  let fixture: ComponentFixture<IntranetHeaderBigComponent>;
+  let component: IntranetHeaderDemoBigSidebarComponent;
+  let fixture: ComponentFixture<IntranetHeaderDemoBigSidebarComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [RouterTestingModule],
-      declarations: [IntranetHeaderBigComponent],
+      declarations: [IntranetHeaderDemoBigSidebarComponent],
       providers: [ErrorService],
     }).compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(IntranetHeaderBigComponent);
+    fixture = TestBed.createComponent(IntranetHeaderDemoBigSidebarComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/packages/demo/src/app/intranet-layout/components/intranet-header-big/intranet-header-big.component.ts b/packages/demo/src/app/intranet-layout/components/intranet-header-demo-big-sidebar/intranet-header-demo-big-sidebar.component.ts
similarity index 89%
rename from packages/demo/src/app/intranet-layout/components/intranet-header-big/intranet-header-big.component.ts
rename to packages/demo/src/app/intranet-layout/components/intranet-header-demo-big-sidebar/intranet-header-demo-big-sidebar.component.ts
index 8a33dd2678..af41a95b5b 100644
--- a/packages/demo/src/app/intranet-layout/components/intranet-header-big/intranet-header-big.component.ts
+++ b/packages/demo/src/app/intranet-layout/components/intranet-header-demo-big-sidebar/intranet-header-demo-big-sidebar.component.ts
@@ -6,10 +6,10 @@ import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-intranet-header-big',
-  templateUrl: './intranet-header-big.component.html',
+  templateUrl: './intranet-header-demo-big-sidebar.component.html',
   styleUrls: ['../../intranet-layout.component.css'],
 })
-export class IntranetHeaderBigComponent {
+export class IntranetHeaderDemoBigSidebarComponent {
   openedMenu = false;
   appTitle = 'testwebapp';
   initialLanguage = 'de';
diff --git a/packages/demo/src/app/intranet-layout/components/intranet-header-demo-regular/intranet-header-demo-regular.component.html b/packages/demo/src/app/intranet-layout/components/intranet-header-demo-regular/intranet-header-demo-regular.component.html
new file mode 100644
index 0000000000..492a8f1dcd
--- /dev/null
+++ b/packages/demo/src/app/intranet-layout/components/intranet-header-demo-regular/intranet-header-demo-regular.component.html
@@ -0,0 +1,19 @@
+<sp-intranet-header siteTitle="SiteTitle" languages="de,fr,it">
+  <li class="nav-item">
+    <a class="nav-link" href="#">Testlink</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Testlink</a>
+  </li>
+  <li class="nav-item" ngbDropdown>
+    <button class="nav-link" id="testid01" ngbDropdownToggle type="button">Dropdown</button>
+    <div aria-labelledby="testid01" ngbDropdownMenu>
+      <a ngbDropdownItem href="#" ngbDropdownItem>Link 1</a>
+      <a ngbDropdownItem href="#" ngbDropdownItem>Link 2</a>
+      <a ngbDropdownItem href="#" ngbDropdownItem>Link 3</a>
+    </div>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Testlink</a>
+  </li>
+</sp-intranet-header>
diff --git a/packages/demo/src/app/intranet-layout/components/intranet-header-demo-regular/intranet-header-demo-regular.component.ts b/packages/demo/src/app/intranet-layout/components/intranet-header-demo-regular/intranet-header-demo-regular.component.ts
new file mode 100644
index 0000000000..eca75ac4b2
--- /dev/null
+++ b/packages/demo/src/app/intranet-layout/components/intranet-header-demo-regular/intranet-header-demo-regular.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-intranet-header',
+  templateUrl: './intranet-header-demo-regular.component.html',
+  styleUrls: ['../../intranet-layout.component.css'],
+})
+export class IntranetHeaderDemoRegularComponent {}
diff --git a/packages/demo/src/app/intranet-layout/components/intranet-header-small/intranet-header-small.component.html b/packages/demo/src/app/intranet-layout/components/intranet-header-demo-small-sidebar/intranet-header-demo-small-sidebar.component.html
similarity index 93%
rename from packages/demo/src/app/intranet-layout/components/intranet-header-small/intranet-header-small.component.html
rename to packages/demo/src/app/intranet-layout/components/intranet-header-demo-small-sidebar/intranet-header-demo-small-sidebar.component.html
index 59876b3bc7..4266e9757a 100644
--- a/packages/demo/src/app/intranet-layout/components/intranet-header-small/intranet-header-small.component.html
+++ b/packages/demo/src/app/intranet-layout/components/intranet-header-demo-small-sidebar/intranet-header-demo-small-sidebar.component.html
@@ -1,9 +1,5 @@
-<section class="layout-container header-small preview">
-  <sp-intranet-header
-    [hasNavbar]="false"
-    [isPreview]="true"
-    siteTitle="Site Title"
-  ></sp-intranet-header>
+<section class="layout-container header-small">
+  <sp-intranet-header [hasNavbar]="false" siteTitle="Site Title"></sp-intranet-header>
   <div class="container-fluid header-margin">
     <div class="row flex-grow-1">
       <nav
diff --git a/packages/demo/src/app/intranet-layout/components/intranet-header-small/intranet-header-small.component.spec.ts b/packages/demo/src/app/intranet-layout/components/intranet-header-demo-small-sidebar/intranet-header-demo-small-sidebar.component.spec.ts
similarity index 57%
rename from packages/demo/src/app/intranet-layout/components/intranet-header-small/intranet-header-small.component.spec.ts
rename to packages/demo/src/app/intranet-layout/components/intranet-header-demo-small-sidebar/intranet-header-demo-small-sidebar.component.spec.ts
index cd1841af8a..97195ad74f 100644
--- a/packages/demo/src/app/intranet-layout/components/intranet-header-small/intranet-header-small.component.spec.ts
+++ b/packages/demo/src/app/intranet-layout/components/intranet-header-demo-small-sidebar/intranet-header-demo-small-sidebar.component.spec.ts
@@ -1,21 +1,21 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
-import { IntranetHeaderSmallComponent } from './intranet-header-small.component';
+import { IntranetHeaderDemoSmallSidebarComponent } from './intranet-header-demo-small-sidebar.component';
 import { ErrorService } from '../../services/error.service';
 
 describe('IntranetHeaderSmallComponent', () => {
-  let component: IntranetHeaderSmallComponent;
-  let fixture: ComponentFixture<IntranetHeaderSmallComponent>;
+  let component: IntranetHeaderDemoSmallSidebarComponent;
+  let fixture: ComponentFixture<IntranetHeaderDemoSmallSidebarComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [IntranetHeaderSmallComponent],
+      declarations: [IntranetHeaderDemoSmallSidebarComponent],
       providers: [ErrorService],
     }).compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(IntranetHeaderSmallComponent);
+    fixture = TestBed.createComponent(IntranetHeaderDemoSmallSidebarComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/packages/demo/src/app/intranet-layout/components/intranet-header-small/intranet-header-small.component.ts b/packages/demo/src/app/intranet-layout/components/intranet-header-demo-small-sidebar/intranet-header-demo-small-sidebar.component.ts
similarity index 84%
rename from packages/demo/src/app/intranet-layout/components/intranet-header-small/intranet-header-small.component.ts
rename to packages/demo/src/app/intranet-layout/components/intranet-header-demo-small-sidebar/intranet-header-demo-small-sidebar.component.ts
index 58ce34e158..8e44327fd4 100644
--- a/packages/demo/src/app/intranet-layout/components/intranet-header-small/intranet-header-small.component.ts
+++ b/packages/demo/src/app/intranet-layout/components/intranet-header-demo-small-sidebar/intranet-header-demo-small-sidebar.component.ts
@@ -4,10 +4,10 @@ import { ErrorService } from '../../services/error.service';
 
 @Component({
   selector: 'app-intranet-header-small',
-  templateUrl: './intranet-header-small.component.html',
+  templateUrl: './intranet-header-demo-small-sidebar.component.html',
   styleUrls: ['../../intranet-layout.component.css'],
 })
-export class IntranetHeaderSmallComponent {
+export class IntranetHeaderDemoSmallSidebarComponent {
   openedMenu = false;
 
   constructor(@Inject(LOCALE_ID) public language: string, private errorService: ErrorService) {
diff --git a/packages/demo/src/app/intranet-layout/intranet-components.module.ts b/packages/demo/src/app/intranet-layout/intranet-components.module.ts
index 4de10ef71b..4dcfcd43f8 100644
--- a/packages/demo/src/app/intranet-layout/intranet-components.module.ts
+++ b/packages/demo/src/app/intranet-layout/intranet-components.module.ts
@@ -1,18 +1,27 @@
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { IntranetHeaderBigComponent } from './components/intranet-header-big/intranet-header-big.component';
-import { IntranetHeaderSmallComponent } from './components/intranet-header-small/intranet-header-small.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { SwissPostIntranetHeaderModule } from '@swisspost/design-system-intranet-header';
 import { HighlightModule } from 'ngx-highlightjs';
 import { HighlightProvider } from '../common/highlight.provider';
+import { IntranetHeaderDemoRegularComponent } from './components/intranet-header-demo-regular/intranet-header-demo-regular.component';
+import { IntranetHeaderDemoBigSidebarComponent } from './components/intranet-header-demo-big-sidebar/intranet-header-demo-big-sidebar.component';
+import { IntranetHeaderDemoSmallSidebarComponent } from './components/intranet-header-demo-small-sidebar/intranet-header-demo-small-sidebar.component';
 
 @NgModule({
   imports: [CommonModule, RouterModule, NgbModule, SwissPostIntranetHeaderModule, HighlightModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  declarations: [IntranetHeaderBigComponent, IntranetHeaderSmallComponent],
-  exports: [IntranetHeaderBigComponent, IntranetHeaderSmallComponent],
+  declarations: [
+    IntranetHeaderDemoRegularComponent,
+    IntranetHeaderDemoBigSidebarComponent,
+    IntranetHeaderDemoSmallSidebarComponent,
+  ],
+  exports: [
+    IntranetHeaderDemoRegularComponent,
+    IntranetHeaderDemoBigSidebarComponent,
+    IntranetHeaderDemoSmallSidebarComponent,
+  ],
   providers: [HighlightProvider.Config],
 })
 export class IntranetComponentsModule {}
diff --git a/packages/demo/src/app/intranet-layout/intranet-layout.component.css b/packages/demo/src/app/intranet-layout/intranet-layout.component.css
index c749c4e7d6..b3ce6b01cd 100644
--- a/packages/demo/src/app/intranet-layout/intranet-layout.component.css
+++ b/packages/demo/src/app/intranet-layout/intranet-layout.component.css
@@ -1,66 +1,3 @@
-section.layout-container.preview {
-  height: auto;
-}
-
-section.layout-container.preview #sidebar .sidebar-sticky,
-section.layout-container.preview header,
-section.layout-container.preview header.navbar {
-  position: relative;
-}
-
-section.layout-container.preview header,
-section.layout-container.preview header.navbar {
-  z-index: 1010;
-}
-
-section.layout-container.preview #sidebar .sidebar-sticky {
-  max-width: none;
-  padding: 0;
-  width: calc(100% + 2rem);
-}
-
-section.layout-container.preview .sidebar-sticky > ul {
-  padding-right: 0;
-}
-
-section.layout-container.preview .header-margin {
-  margin-top: 0;
-}
-
-@media all and (max-width: 767.98px) {
-  section.layout-container.preview #sidebar {
-    padding-right: 0;
-  }
-
-  section.layout-container.preview #sidebar:not(.closed) {
-    padding-bottom: 1rem;
-  }
-
-  section.layout-container.preview #sidebar + main {
-    margin-top: 0;
-  }
-
-  section.layout-container.preview #sidebar > div > ul > li:first-child {
-    padding-top: 2rem;
-    margin-right: 0px;
-  }
-
-  section.layout-container.preview .sidebar-sticky {
-    width: 100%;
-    margin-left: 0px;
-  }
-
-  section.layout-container.preview #sidebar .sidebar-sticky > ul {
-    padding-right: 0;
-  }
-
-  section.layout-container.preview #sidebar .sidebar-sticky {
-    max-width: none;
-    padding: 0;
-    width: calc(100% + 1rem);
-  }
-}
-
 .alert .pi.placing {
   margin-top: -0.3rem;
   margin-left: -0.6rem;
diff --git a/packages/demo/src/app/intranet-layout/intranet-layout.component.html b/packages/demo/src/app/intranet-layout/intranet-layout.component.html
index fb924e1d43..300ac6bcf8 100644
--- a/packages/demo/src/app/intranet-layout/intranet-layout.component.html
+++ b/packages/demo/src/app/intranet-layout/intranet-layout.component.html
@@ -11,7 +11,9 @@ <h2 class="bold">Installation</h2>
   </p>
   <div class="table-responsive">
     <table class="table caption-top mb-regular-r">
-      <caption>List of compatible version numbers with external dependencies.</caption>
+      <caption>
+        List of compatible version numbers with external dependencies.
+      </caption>
       <thead>
         <tr>
           <th scope="col">Intranet-header</th>
@@ -187,18 +189,6 @@ <h3 class="bold mt-5" id="intranet-layout-options">Options</h3>
           </td>
           <td>Whether the navigation is rendered or not.</td>
         </tr>
-        <tr class="table-danger">
-          <td>
-            <code>isPreview</code>
-          </td>
-          <td>
-            <code>boolean</code>
-          </td>
-          <td>
-            <code>false</code>
-          </td>
-          <td>This is only used for presentational purposes. Do not use it in production!</td>
-        </tr>
         <tr>
           <td>
             <code>languages</code>
@@ -315,14 +305,6 @@ <h3 class="bold mt-5" id="intranet-layout-options">Options</h3>
     </table>
   </div>
   <h3 class="bold mt-5">Examples</h3>
-  <div class="alert-container mt-3">
-    <div class="alert alert-warning" _ngcontent-c2="">
-      <p>
-        You will need to remove the class "preview" from the outermost section and property
-        "isPreview" from post-intranet-header to use the layout in your application!
-      </p>
-    </div>
-  </div>
   <h4 class="bold mt-5">With top navigation, without sidenav</h4>
   <p class="light font-curve-regular">
     Add
@@ -335,25 +317,11 @@ <h4 class="bold mt-5">With top navigation, without sidenav</h4>
 
 <div class="header-showcase-container p-huge-r">
   <div class="header-showcase-page">
-    <sp-intranet-header siteTitle="SiteTitle" [isPreview]="true" languages="de,fr,it">
-      <li class="nav-item">
-        <a class="nav-link" href="#">Testlink</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" href="#">Testlink</a>
-      </li>
-      <li class="nav-item" ngbDropdown>
-        <button class="nav-link" id="testid01" ngbDropdownToggle type="button">Dropdown</button>
-        <div aria-labelledby="testid01" ngbDropdownMenu>
-          <a ngbDropdownItem href="#" ngbDropdownItem>Link 1</a>
-          <a ngbDropdownItem href="#" ngbDropdownItem>Link 2</a>
-          <a ngbDropdownItem href="#" ngbDropdownItem>Link 3</a>
-        </div>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" href="#">Testlink</a>
-      </li>
-    </sp-intranet-header>
+    <iframe
+      src="/#/samples/intranet-layout-regular"
+      class="w-100"
+      style="min-height: 300px"
+    ></iframe>
   </div>
 </div>
 
@@ -369,7 +337,11 @@ <h4 class="bold mt-5">Without top navigation, with sidenav</h4>
 
 <div class="header-showcase-container p-huge-r">
   <div class="header-showcase-page">
-    <app-intranet-header-small></app-intranet-header-small>
+    <iframe
+      src="/#/samples/intranet-layout-sidebar-small-sidebar"
+      class="w-100"
+      style="min-height: 500px"
+    ></iframe>
   </div>
 </div>
 
@@ -391,7 +363,11 @@ <h4 class="bold mt-5">Intranet-Header "postweb"</h4>
 
 <div class="header-showcase-container p-huge-r">
   <div class="header-showcase-page">
-    <app-intranet-header-big></app-intranet-header-big>
+    <iframe
+      src="/#/samples/intranet-layout-sidebar-big-sidebar"
+      class="w-100"
+      style="min-height: 500px"
+    ></iframe>
   </div>
 </div>
 
diff --git a/packages/demo/src/app/intranet-layout/intranet-layout.component.ts b/packages/demo/src/app/intranet-layout/intranet-layout.component.ts
index ec5ecbc149..6f0ccb9be5 100644
--- a/packages/demo/src/app/intranet-layout/intranet-layout.component.ts
+++ b/packages/demo/src/app/intranet-layout/intranet-layout.component.ts
@@ -1,8 +1,11 @@
 import { Component } from '@angular/core';
-const codeTemplateSmall =
-  require('!!raw-loader!./components/intranet-header-small/intranet-header-small.component.html').default;
-const codeTemplateBig =
-  require('!!raw-loader!./components/intranet-header-big/intranet-header-big.component.html').default;
+
+const CODE_TEMPLATE_REG =
+  require('!!raw-loader!./components/intranet-header-demo-regular/intranet-header-demo-regular.component.html').default;
+const CODE_TEMPLATE_SMALL =
+  require('!!raw-loader!./components/intranet-header-demo-small-sidebar/intranet-header-demo-small-sidebar.component.html').default;
+const CODE_TEMPLATE_BIG =
+  require('!!raw-loader!./components/intranet-header-demo-big-sidebar/intranet-header-demo-big-sidebar.component.html').default;
 
 @Component({
   selector: 'app-intranet-layout',
@@ -24,19 +27,7 @@ export class IntranetLayoutComponent {
     // ...
   })
   export class AppModule {}`;
-  codeTemplateSmall = codeTemplateSmall;
-  codeTemplateBig = codeTemplateBig;
-  codeTemplateReg = `<sp-intranet-header siteTitle="SiteTitle" isPreview="true" languages="de,fr,it">
-      <li class="nav-item"><a class="nav-link" href="#">Testlink</a></li>
-      <li class="nav-item"><a class="nav-link" href="#">Testlink</a></li>
-      <li class="nav-item" ngbDropdown>
-            <span class="nav-link" id="testid01" href="#" ngbDropdownToggle>Dropdown</span>
-            <div class="dropdown-menu" aria-labelledby="testid01" ngbDropdownMenu>
-                  <a class="dropdown-item" href="#" ngbDropdownItem>Link 1</a>
-                  <a class="dropdown-item" href="#" ngbDropdownItem>Link 2</a>
-                  <a class="dropdown-item" href="#" ngbDropdownItem>Link 3</a>
-            </div>
-      </li>
-      <li class="nav-item"><a class="nav-link" href="#">Testlink</a></li>
-</sp-intranet-header>`;
+  codeTemplateSmall = CODE_TEMPLATE_SMALL;
+  codeTemplateBig = CODE_TEMPLATE_BIG;
+  codeTemplateReg = CODE_TEMPLATE_REG;
 }
diff --git a/packages/demo/src/app/layout-container/layout-container.component.html b/packages/demo/src/app/layout-container/layout-container.component.html
new file mode 100644
index 0000000000..69b24296dc
--- /dev/null
+++ b/packages/demo/src/app/layout-container/layout-container.component.html
@@ -0,0 +1,468 @@
+<div class="layout-container header-big">
+  <ng-template #versionDropdown>
+    <div class="version-switch" ngbDropdown>
+      <label class="visually-hidden" for="versionDropdownButton" id="versionDropdown">
+        Version Selection for older documentation versions
+      </label>
+      <button class="btn btn-link dropdown-button" id="versionDropdownButton" ngbDropdownToggle>
+        {{ (currentVersion$ | async)?.title }}
+      </button>
+      <div ngbDropdownMenu aria-labelledby="versionDropdown">
+        <a
+          *ngFor="let version of versions$ | async"
+          [href]="isLatest ? 'https://design-system.post.ch' : version.url"
+          [class.active]="version.isCurrent"
+          ngbDropdownItem
+        >
+          <span class="bold">{{ version.title }}</span>
+          <div class="small mt-2 icons" *ngIf="version.dependencies">
+            <span
+              title="Angular"
+              *ngIf="version.dependencies.get('@angular/core') as angularVersion"
+            >
+              <img src="assets/images/angular.png" alt="Angular Logo" />
+              {{ angularVersion.format('x.x') }}
+            </span>
+            <span
+              title="Bootstrap"
+              *ngIf="version.dependencies.get('bootstrap') as bootstrapVersion"
+            >
+              <img src="assets/images/bootstrap.png" alt="Bootstrap Logo" />
+              {{ bootstrapVersion.format('x.x') }}
+            </span>
+            <span
+              title="ng-bootstrap"
+              *ngIf="version.dependencies.get('@ng-bootstrap/ng-bootstrap') as ngBootstrapVersion"
+            >
+              <img src="assets/images/ng-bootstrap.svg" alt="ng-bootstrap Logo" />
+              {{ ngBootstrapVersion.format('x.x') }}
+            </span>
+          </div>
+        </a>
+      </div>
+    </div>
+  </ng-template>
+
+  <sp-intranet-header
+    [optionHeaderContent]="(versions$ | async) ? versionDropdown : null"
+    siteTitle="Swiss Post Design System"
+    languages="en"
+    logoUrl="/"
+  >
+    <li class="nav-item">
+      <a
+        class="nav-link"
+        [ngClass]="{ active: router.url.indexOf('/home') > -1 }"
+        [routerLink]="'/home'"
+      >
+        Home
+      </a>
+    </li>
+    <li class="nav-item" ngbDropdown>
+      <button
+        [ngClass]="{ active: router.url.indexOf('/bootstrap-samples') > -1 }"
+        class="nav-link"
+        id="id01"
+        ngbDropdownToggle
+        type="button"
+      >
+        Bootstrap
+      </button>
+      <div aria-labelledby="id01" ngbDropdownMenu>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/accordion') > -1 }"
+          [routerLink]="'/bootstrap-samples/accordion'"
+        >
+          Accordion
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/alerts') > -1 }"
+          [routerLink]="'/bootstrap-samples/alerts'"
+        >
+          Alerts / Notifications
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/background') > -1 }"
+          [routerLink]="'/bootstrap-samples/background'"
+        >
+          Background
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/badge') > -1 }"
+          [routerLink]="'/bootstrap-samples/badge'"
+        >
+          Badge
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/blockquotes') > -1 }"
+          [routerLink]="'/bootstrap-samples/blockquotes'"
+        >
+          Blockquotes
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/buttons') > -1 }"
+          [routerLink]="'/bootstrap-samples/buttons'"
+        >
+          Buttons
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/button-group') > -1 }"
+          [routerLink]="'/bootstrap-samples/button-group'"
+        >
+          Button Group
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/card') > -1 }"
+          [routerLink]="'/bootstrap-samples/card'"
+        >
+          Cards
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/forms') > -1 }"
+          [routerLink]="'/bootstrap-samples/forms'"
+        >
+          Forms
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/form-check') > -1 }"
+          [routerLink]="'/bootstrap-samples/form-check'"
+        >
+          Form checkbox
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/form-control') > -1 }"
+          [routerLink]="'/bootstrap-samples/form-control'"
+        >
+          Form control
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/form-file') > -1 }"
+          [routerLink]="'/bootstrap-samples/form-file'"
+        >
+          Form file
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/form-radio') > -1 }"
+          [routerLink]="'/bootstrap-samples/form-radio'"
+        >
+          Form radio button
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/form-range') > -1 }"
+          [routerLink]="'/bootstrap-samples/form-range'"
+        >
+          Form range
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/form-select') > -1 }"
+          [routerLink]="'/bootstrap-samples/form-select'"
+        >
+          Form select
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/form-multiple-select') > -1 }"
+          [routerLink]="'/bootstrap-samples/form-multiple-select'"
+        >
+          Form select multiple
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/form-switch') > -1 }"
+          [routerLink]="'/bootstrap-samples/form-switch'"
+        >
+          Form switch
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/form-textarea') > -1 }"
+          [routerLink]="'/bootstrap-samples/form-textarea'"
+        >
+          Form textarea
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/tables') > -1 }"
+          [routerLink]="'/bootstrap-samples/tables'"
+        >
+          Tables
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/typography') > -1 }"
+          [routerLink]="'/bootstrap-samples/typography'"
+        >
+          Typography
+        </a>
+      </div>
+    </li>
+    <li class="nav-item" ngbDropdown>
+      <button
+        [ngClass]="{ active: router.url.indexOf('/ng-bootstrap-samples') > -1 }"
+        class="nav-link"
+        id="id02"
+        ngbDropdownToggle
+        type="button"
+      >
+        NgBootstrap
+      </button>
+      <div aria-labelledby="id02" ngbDropdownMenu>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/ng-bootstrap-samples/accordion') > -1 }"
+          [routerLink]="'/ng-bootstrap-samples/accordion'"
+        >
+          Accordion
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/ng-bootstrap-samples/alert') > -1 }"
+          [routerLink]="'/ng-bootstrap-samples/alert'"
+        >
+          Alerts
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/ng-bootstrap-samples/carousel') > -1 }"
+          [routerLink]="'/ng-bootstrap-samples/carousel'"
+        >
+          Carousel
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/ng-bootstrap-samples/collapse') > -1 }"
+          [routerLink]="'/ng-bootstrap-samples/collapse'"
+        >
+          Collapse
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/ng-bootstrap-samples/datepicker') > -1 }"
+          [routerLink]="'/ng-bootstrap-samples/datepicker'"
+        >
+          Datepicker
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/ng-bootstrap-samples/dropdown') > -1 }"
+          [routerLink]="'/ng-bootstrap-samples/dropdown'"
+        >
+          Dropdown
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/ng-bootstrap-samples/modal') > -1 }"
+          [routerLink]="'/ng-bootstrap-samples/modal'"
+        >
+          Modal
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/ng-bootstrap-samples/pagination') > -1 }"
+          [routerLink]="'/ng-bootstrap-samples/pagination'"
+        >
+          Pagination
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/ng-bootstrap-samples/popover') > -1 }"
+          [routerLink]="'/ng-bootstrap-samples/popover'"
+        >
+          Popover
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/ng-bootstrap-samples/progressbar') > -1 }"
+          [routerLink]="'/ng-bootstrap-samples/progressbar'"
+        >
+          Progressbar
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/ng-bootstrap-samples/rating') > -1 }"
+          [routerLink]="'/ng-bootstrap-samples/rating'"
+        >
+          Rating
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/ng-bootstrap-samples/tabs') > -1 }"
+          [routerLink]="'/ng-bootstrap-samples/tabs'"
+        >
+          Tabs
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/ng-bootstrap-samples/timepicker') > -1 }"
+          [routerLink]="'/ng-bootstrap-samples/timepicker'"
+        >
+          Timepicker
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/ng-bootstrap-samples/tooltip') > -1 }"
+          [routerLink]="'/ng-bootstrap-samples/tooltip'"
+        >
+          Tooltip
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/ng-bootstrap-samples/typeahead') > -1 }"
+          [routerLink]="'/ng-bootstrap-samples/typeahead'"
+        >
+          Typeahead
+        </a>
+      </div>
+    </li>
+    <li class="nav-item" ngbDropdown>
+      <button
+        [ngClass]="{ active: router.url.indexOf('/post-samples') > -1 }"
+        class="nav-link"
+        id="id04"
+        ngbDropdownToggle
+        type="button"
+      >
+        Post
+      </button>
+      <div aria-labelledby="id01" ngbDropdownMenu>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/post-samples/custom-select') > -1 }"
+          [routerLink]="'/post-samples/custom-select'"
+        >
+          Custom select
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/post-samples/datatable') > -1 }"
+          [routerLink]="'/post-samples/datatable'"
+        >
+          Datatable
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/post-samples/feedback') > -1 }"
+          [routerLink]="'/post-samples/feedback'"
+        >
+          Feedback
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/post-samples/forms') > -1 }"
+          [routerLink]="'/post-samples/forms'"
+        >
+          Forms
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/post-samples/icons') > -1 }"
+          [routerLink]="'/post-samples/icons'"
+        >
+          Icons
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/post-samples/intranet-layout') > -1 }"
+          href="https://design-system.post.ch/?path=/docs/9b02bcb2-3b6a-4271-b550-675a62ff3890--docs"
+        >
+          Internet header
+          <i style="height: 1em" aria-hidden="true" class="pi pi-2038"></i>
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/post-samples/intranet-layout') > -1 }"
+          [routerLink]="'/post-samples/intranet-layout'"
+        >
+          Intranet header
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/post-samples/notification-overlay') > -1 }"
+          [routerLink]="'/post-samples/notification-overlay'"
+        >
+          Notification overlay
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/post-samples/card') > -1 }"
+          [routerLink]="'/post-samples/card'"
+        >
+          Post cards
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/post-samples/sizing') > -1 }"
+          [routerLink]="'/post-samples/sizing'"
+        >
+          Sizing
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/post-samples/spinner') > -1 }"
+          [routerLink]="'/post-samples/spinner'"
+        >
+          Spinner
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/post-samples/stepper') > -1 }"
+          [routerLink]="'/post-samples/stepper'"
+        >
+          Stepper
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/post-samples/subnavigation') > -1 }"
+          [routerLink]="'/post-samples/subnavigation'"
+        >
+          Subnavigation
+        </a>
+        <a
+          ngbDropdownItem
+          [ngClass]="{ active: router.url.indexOf('/post-samples/topic-teaser') > -1 }"
+          [routerLink]="'/post-samples/topic-teaser'"
+        >
+          Topic teaser
+        </a>
+      </div>
+    </li>
+  </sp-intranet-header>
+  <div
+    data-spy="scroll"
+    data-target="#component-list"
+    data-offset="0"
+    mainContent
+    [ngClass]="{ container: !setFullwidthContainer }"
+    id="mainContent"
+  ></div>
+  <div
+    [ngClass]="
+      setFullwidthContainer ? 'site-content header-margin' : 'site-content container header-margin'
+    "
+  >
+    <main role="main">
+      <router-outlet></router-outlet>
+    </main>
+  </div>
+
+  <app-footer></app-footer>
+</div>
+<script type="text/javascript" src="runtime.js"></script>
+<script type="text/javascript" src="polyfills.js"></script>
+<script type="text/javascript" src="scripts.js"></script>
+<script type="text/javascript" src="main.js"></script>
diff --git a/packages/demo/src/app/app.component.scss b/packages/demo/src/app/layout-container/layout-container.component.scss
similarity index 100%
rename from packages/demo/src/app/app.component.scss
rename to packages/demo/src/app/layout-container/layout-container.component.scss
diff --git a/packages/demo/src/app/layout-container/layout-container.component.ts b/packages/demo/src/app/layout-container/layout-container.component.ts
new file mode 100644
index 0000000000..b36cd61907
--- /dev/null
+++ b/packages/demo/src/app/layout-container/layout-container.component.ts
@@ -0,0 +1,39 @@
+import { Component } from '@angular/core';
+import { VersionService } from '../common/version.service';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { filter, map, mergeMap } from 'rxjs/operators';
+
+@Component({
+  templateUrl: 'layout-container.component.html',
+  styleUrls: ['layout-container.component.scss'],
+})
+export class LayoutContainerComponent {
+  public setFullwidthContainer: boolean = false;
+  public versions$;
+  public currentVersion$;
+
+  constructor(
+    private versionService: VersionService,
+    public router: Router,
+    private route: ActivatedRoute,
+  ) {
+    this.versions$ = this.versionService.versions;
+    this.currentVersion$ = this.versionService.currentVersion;
+
+    this.router.events
+      .pipe(
+        filter(e => e instanceof NavigationEnd),
+        map(() => this.route),
+        map(route => {
+          while (route.firstChild) {
+            route = route.firstChild;
+          }
+          return route;
+        }),
+        mergeMap(route => route.data),
+      )
+      .subscribe(data => {
+        this.setFullwidthContainer = !!data.fullWidth;
+      });
+  }
+}
diff --git a/packages/demo/src/app/ng-bootstrap/components/alert/alert-demo-page/alert-demo-page.component.html b/packages/demo/src/app/ng-bootstrap/components/alert/alert-demo-page/alert-demo-page.component.html
index 6a86979b8c..16e28698bd 100644
--- a/packages/demo/src/app/ng-bootstrap/components/alert/alert-demo-page/alert-demo-page.component.html
+++ b/packages/demo/src/app/ng-bootstrap/components/alert/alert-demo-page/alert-demo-page.component.html
@@ -24,7 +24,7 @@ <h1 class="bold font-curve-large">Alerts</h1>
 
 <p>
   For more information about available alerts/notifications, check the
-  <a [routerLink]="'../../bootstrap-samples/alert'">
+  <a [routerLink]="'../../bootstrap-samples/alerts'">
     Alert/Notification page under the "Bootstrap" Menu
   </a>
   .
diff --git a/packages/intranet-header-workspace/angular.json b/packages/intranet-header-workspace/angular.json
index 1fae49d328..1db01e4085 100644
--- a/packages/intranet-header-workspace/angular.json
+++ b/packages/intranet-header-workspace/angular.json
@@ -3,46 +3,6 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "intranet-header": {
-      "projectType": "library",
-      "root": "projects/intranet-header",
-      "sourceRoot": "projects/intranet-header/src",
-      "prefix": "lib",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
-          "options": {
-            "project": "projects/intranet-header/ng-package.json"
-          },
-          "configurations": {
-            "production": {
-              "tsConfig": "projects/intranet-header/tsconfig.lib.prod.json"
-            },
-            "development": {
-              "tsConfig": "projects/intranet-header/tsconfig.lib.json"
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "projects/intranet-header/src/test.ts",
-            "tsConfig": "projects/intranet-header/tsconfig.spec.json",
-            "karmaConfig": "projects/intranet-header/karma.conf.js"
-          }
-        },
-        "lint": {
-          "builder": "@angular-eslint/builder:lint",
-          "options": {
-            "lintFilePatterns": [
-              "projects/intranet-header/**/*.ts",
-              "projects/intranet-header/**/*.html"
-            ]
-          }
-        }
-      }
-    },
     "intranet-header-showcase": {
       "projectType": "application",
       "schematics": {
@@ -139,9 +99,7 @@
               "projects/intranet-header-showcase/src/favicon.ico",
               "projects/intranet-header-showcase/src/assets"
             ],
-            "styles": [
-              "projects/intranet-header-showcase/src/styles.scss"
-            ],
+            "styles": ["projects/intranet-header-showcase/src/styles.scss"],
             "scripts": []
           }
         }
diff --git a/packages/intranet-header-workspace/package.json b/packages/intranet-header-workspace/package.json
index 20997e20d8..5dcafc5593 100644
--- a/packages/intranet-header-workspace/package.json
+++ b/packages/intranet-header-workspace/package.json
@@ -21,6 +21,7 @@
     "@angular/router": "17.3.0",
     "@ng-bootstrap/ng-bootstrap": "16.0.0",
     "@popperjs/core": "2.11.8",
+    "@swisspost/design-system-intranet-header": "workspace:5.0.11",
     "@swisspost/design-system-styles": "workspace:6.6.4",
     "rxjs": "7.8.1",
     "tslib": "2.6.2",
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/app.component.ts b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/app.component.ts
new file mode 100644
index 0000000000..1b647c460c
--- /dev/null
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/app.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <router-outlet></router-outlet>
+  `,
+})
+export class AppComponent {}
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/app.module.ts b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/app.module.ts
new file mode 100644
index 0000000000..b69838702f
--- /dev/null
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/app.module.ts
@@ -0,0 +1,32 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule, Routes } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { SamplesNavigationComponent } from './samples/navigation/navigation.component';
+import { SamplesSidebarComponent } from './samples/sidebar/sidebar.component';
+import { SwissPostIntranetHeaderModule } from '@swisspost/design-system-intranet-header';
+import { SamplesIndexComponent } from './samples/samples-index.component';
+import { SamplesSidebarWithSearchbarComponent } from './samples/sidebar-with-searchbar/sidebar-with-searchbar.component';
+
+const routes: Routes = [
+  { path: '', redirectTo: 'index', pathMatch: 'full' },
+  { path: 'index', component: SamplesIndexComponent },
+
+  { path: 'samples-navigation', component: SamplesNavigationComponent },
+  { path: 'samples-sidebar', component: SamplesSidebarComponent },
+  { path: 'samples-sidebar-with-searchbar', component: SamplesSidebarWithSearchbarComponent },
+];
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    SamplesNavigationComponent,
+    SamplesSidebarComponent,
+    SamplesSidebarWithSearchbarComponent,
+  ],
+  imports: [BrowserModule, RouterModule.forRoot(routes), SwissPostIntranetHeaderModule],
+  providers: [],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/app/app.component.ts b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/app/app.component.ts
deleted file mode 100644
index e60eaf1e8f..0000000000
--- a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/app/app.component.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
-})
-export class AppComponent {
-  title = 'intranet-header-showcase';
-  public loginOptions = null;
-  public headerOptions = null;
-  public count = 0;
-}
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/app/app.module.ts b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/app/app.module.ts
deleted file mode 100644
index 0b28acae3c..0000000000
--- a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/app/app.module.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
-import { SwissPostIntranetHeaderModule } from '../../../intranet-header/src/lib/swisspost-intranet-header.module';
-
-import { AppComponent } from './app.component';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [BrowserModule, RouterModule.forRoot([]), SwissPostIntranetHeaderModule],
-  providers: [],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/main.ts b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/main.ts
index c7b673cf44..79fa12fe8d 100644
--- a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/main.ts
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/main.ts
@@ -1,12 +1,13 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
+import { AppModule } from './app.module';
 import { environment } from './environments/environment';
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
   .catch(err => console.error(err));
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/app/app.component.html b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/navigation/navigation.component.html
similarity index 100%
rename from packages/intranet-header-workspace/projects/intranet-header-showcase/src/app/app.component.html
rename to packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/navigation/navigation.component.html
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/app/app.component.scss b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/navigation/navigation.component.scss
similarity index 100%
rename from packages/intranet-header-workspace/projects/intranet-header-showcase/src/app/app.component.scss
rename to packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/navigation/navigation.component.scss
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/app/app.component.spec.ts b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/navigation/navigation.component.spec.ts
similarity index 59%
rename from packages/intranet-header-workspace/projects/intranet-header-showcase/src/app/app.component.spec.ts
rename to packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/navigation/navigation.component.spec.ts
index b85a2d0e47..16e17d36e7 100644
--- a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/app/app.component.spec.ts
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/navigation/navigation.component.spec.ts
@@ -1,27 +1,21 @@
 import { TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
+import { SamplesNavigationComponent } from './navigation.component';
 
-describe('AppComponent', () => {
+describe('SamplesNavigationComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [AppComponent],
+      declarations: [SamplesNavigationComponent],
     }).compileComponents();
   });
 
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
   it(`should have as title 'intranet-header-showcase'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
+    const fixture = TestBed.createComponent(SamplesNavigationComponent);
     const app = fixture.componentInstance;
     expect(app.title).toEqual('intranet-header-showcase');
   });
 
   it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
+    const fixture = TestBed.createComponent(SamplesNavigationComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
     expect(compiled.querySelector('.content span')?.textContent).toContain(
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/navigation/navigation.component.ts b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/navigation/navigation.component.ts
new file mode 100644
index 0000000000..565a7f6248
--- /dev/null
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/navigation/navigation.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'samples-navigation',
+  templateUrl: './navigation.component.html',
+  styleUrls: ['./navigation.component.scss'],
+})
+export class SamplesNavigationComponent {
+  title = 'samples-navigation';
+  public headerOptions = null;
+  public count = 0;
+}
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/samples-index.component.ts b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/samples-index.component.ts
new file mode 100644
index 0000000000..5fadaaa14b
--- /dev/null
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/samples-index.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'samples-index',
+  template: `
+    <ul>
+      <li><a href="samples-navigation">Samples navigation</a></li>
+      <li><a href="samples-sidebar">Samples sidebar</a></li>
+      <li><a href="samples-sidebar-with-searchbar">Samples sidebar with searchbar</a></li>
+    </ul>
+  `,
+})
+export class SamplesIndexComponent {}
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar-with-searchbar/sidebar-with-searchbar.component.html b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar-with-searchbar/sidebar-with-searchbar.component.html
new file mode 100644
index 0000000000..f47b45e54c
--- /dev/null
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar-with-searchbar/sidebar-with-searchbar.component.html
@@ -0,0 +1,71 @@
+<section class="layout-container header-big with-searchbar">
+  <sp-intranet-header siteTitle="PostWeb" [showIntranetSearch]="true">
+    <li class="nav-item"><a href="/postweb" class="nav-link">Home</a></li>
+    <li class="nav-item">
+      <a href="/postweb/post-informatik" class="nav-link" target="_self">Post Informatik</a>
+    </li>
+    <li class="nav-item"><a class="nav-link">HR-Portal</a></li>
+    <li class="nav-item"><a href="/postweb/service-portal" class="nav-link">Service-Portal</a></li>
+    <li class="nav-item"><a href="/postweb/die-post" class="nav-link">Die Post</a></li>
+  </sp-intranet-header>
+  <div class="site-content container-fluid header-margin">
+    <div class="row flex-grow-1">
+      <nav
+        class="col-md-3 col-lg-2 d-md-flex bg-light sidebar p-md-3"
+        id="sidebar"
+        [ngClass]="{ closed: !openedMenu }"
+      >
+        <div class="sidebar-sticky header-margin bg-light">
+          <!-- left menu -->
+          <ul>
+            <li tabindex="0" class="d-md-none" (click)="openedMenu = !openedMenu">
+              <i class="pi pi-menu"></i>
+              Active Page
+            </li>
+            <li><a routerLink="/">Home</a></li>
+            <li class="separator"></li>
+            <li>
+              Menu Text
+              <ul>
+                <li class="level2">
+                  <a href="#">Link 1</a>
+                </li>
+                <li class="level2">
+                  <a href="#">Link 2</a>
+                </li>
+                <li class="level2">
+                  <a href="#">Link 3</a>
+                </li>
+                <li class="level2">
+                  <a href="#">Link 4</a>
+                </li>
+                <li class="level2">
+                  <a href="#">Link 5</a>
+                </li>
+              </ul>
+            </li>
+          </ul>
+          <span class="spacer d-none d-md-block"></span>
+        </div>
+
+        <div></div>
+      </nav>
+      <main role="main" class="col-md-9 col-lg-10 p-3">
+        <h1>Content</h1>
+        <p>
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+          invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
+          accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
+          sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
+          elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+          diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+          gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
+          amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+          dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
+          et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+          amet.
+        </p>
+      </main>
+    </div>
+  </div>
+</section>
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar-with-searchbar/sidebar-with-searchbar.component.ts b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar-with-searchbar/sidebar-with-searchbar.component.ts
new file mode 100644
index 0000000000..fc7bfb40f0
--- /dev/null
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar-with-searchbar/sidebar-with-searchbar.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'samples-sidebar-with-searchbar',
+  templateUrl: './sidebar-with-searchbar.component.html',
+})
+export class SamplesSidebarWithSearchbarComponent {
+  title = 'samples-sidebar-with-searchbar';
+  protected openedMenu: boolean = false;
+}
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar/sidebar.component.html b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar/sidebar.component.html
new file mode 100644
index 0000000000..4266e9757a
--- /dev/null
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar/sidebar.component.html
@@ -0,0 +1,63 @@
+<section class="layout-container header-small">
+  <sp-intranet-header [hasNavbar]="false" siteTitle="Site Title"></sp-intranet-header>
+  <div class="container-fluid header-margin">
+    <div class="row flex-grow-1">
+      <nav
+        class="col-md-3 col-lg-2 d-md-flex bg-light sidebar site-content p-md-3"
+        id="sidebar"
+        [ngClass]="{ closed: !openedMenu }"
+      >
+        <div class="sidebar-sticky header-margin bg-light">
+          <!-- left menu -->
+          <ul>
+            <li class="d-md-none" (click)="openedMenu = !openedMenu">
+              <i class="pi pi-menu"></i>
+              Home
+            </li>
+            <li><a routerLink="/">Home</a></li>
+            <li class="separator"></li>
+            <li>
+              Menu Text
+              <ul>
+                <li class="level2">
+                  <a href="#">Link 1</a>
+                </li>
+                <li class="level2">
+                  <a href="#">Link 2</a>
+                </li>
+                <li class="level2">
+                  <a href="#">Link 3</a>
+                </li>
+                <li class="level2">
+                  <a href="#">Link 4</a>
+                </li>
+                <li class="level2">
+                  <a href="#">Link 5</a>
+                </li>
+              </ul>
+            </li>
+          </ul>
+          <span class="spacer d-none d-md-block"></span>
+        </div>
+
+        <div></div>
+      </nav>
+      <main role="main" class="col-md-9 col-lg-10 p-3">
+        <h1>Content</h1>
+        <p>
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+          invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
+          accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
+          sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
+          elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+          diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+          gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
+          amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+          dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
+          et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+          amet.
+        </p>
+      </main>
+    </div>
+  </div>
+</section>
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar/sidebar.component.ts b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar/sidebar.component.ts
new file mode 100644
index 0000000000..dc3c9020cb
--- /dev/null
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar/sidebar.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'samples-sidebar',
+  templateUrl: './sidebar.component.html',
+})
+export class SamplesSidebarComponent {
+  title = 'samples-sidebar';
+  protected openedMenu: boolean = false;
+}
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/styles.scss b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/styles.scss
index a03ab46f0a..e69de29bb2 100644
--- a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/styles.scss
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/styles.scss
@@ -1,4 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
-.navbar {
-  position: relative !important;
-}
diff --git a/packages/intranet-header-workspace/projects/intranet-header/src/lib/swisspost-intranet-header.component.html b/packages/intranet-header-workspace/projects/intranet-header/src/lib/swisspost-intranet-header.component.html
index 404d50391e..6bdcca75f5 100644
--- a/packages/intranet-header-workspace/projects/intranet-header/src/lib/swisspost-intranet-header.component.html
+++ b/packages/intranet-header-workspace/projects/intranet-header/src/lib/swisspost-intranet-header.component.html
@@ -1,144 +1,138 @@
-<section *ngIf="isPreview; else intranetHeader" class="layout-container preview">
-  <ng-container [ngTemplateOutlet]="intranetHeader"></ng-container>
-</section>
-
-<ng-template #intranetHeader>
-  <header class="navbar navbar-expand-md flex-md-nowrap p-0" #domWrapper>
-    <div class="nav-down">
-      <div class="intranet-header">
-        <div class="d-flex align-items-center flex-nowrap">
-          <div class="bg-logo d-sm-block">
-            <a [href]="this.logoUrl" class="navbar-brand header-logo">
-              <span class="visually-hidden">{{getPostLogoText()}}</span>
-            </a>
-          </div>
-          <div class="title flex-shrink-1 px-4">
-            <h1 class="m-0 font-weight-bold">{{ siteTitle }}</h1>
-          </div>
-          <div *ngIf="showIntranetSearch" class="col search-textbox d-none d-md-block">
-            <form [action]="searchUrl">
-              <div class="input-group mx-auto">
-                <input
-                  type="text"
-                  name="k"
-                  class="form-control"
-                  placeholder="{{ getPlaceholderSearchIntranet() }}"
-                />
-                <div class="input-group-append d-flex align-items-center">
-                  <button class="btn pr-4" type="submit">
-                    <span><em class="pi pi-2069"></em></span>
-                  </button>
-                </div>
+<header class="navbar navbar-expand-md flex-md-nowrap p-0" #domWrapper>
+  <div class="nav-down">
+    <div class="intranet-header">
+      <div class="d-flex align-items-center flex-nowrap">
+        <div class="bg-logo d-sm-block">
+          <a [href]="this.logoUrl" class="navbar-brand header-logo">
+            <span class="visually-hidden">{{ getPostLogoText() }}</span>
+          </a>
+        </div>
+        <div class="title flex-shrink-1 px-4">
+          <h1 class="m-0 font-weight-bold">{{ siteTitle }}</h1>
+        </div>
+        <div *ngIf="showIntranetSearch" class="col search-textbox d-none d-md-block">
+          <form [action]="searchUrl">
+            <div class="input-group mx-auto">
+              <input
+                type="text"
+                name="k"
+                class="form-control"
+                placeholder="{{ getPlaceholderSearchIntranet() }}"
+              />
+              <div class="input-group-append d-flex align-items-center">
+                <button class="btn pr-4" type="submit">
+                  <span><em class="pi pi-2069"></em></span>
+                </button>
               </div>
-            </form>
-          </div>
-          <div
-            *ngIf="optionHeaderContent"
-            class="settings ms-auto flex-shrink-0 d-flex align-self-stretch"
-          >
-            <div class="align-self-stretch d-flex" display="dynamic" container="body">
-              <div class="align-self-center p-3">
-                <div #headerExtraContent>
-                  <ng-container
-                    [ngTemplateOutlet]="optionHeaderContent"
-                    [ngTemplateOutletContext]="headerExtraContent"
-                  ></ng-container>
-                </div>
+            </div>
+          </form>
+        </div>
+        <div
+          *ngIf="optionHeaderContent"
+          class="settings ms-auto flex-shrink-0 d-flex align-self-stretch"
+        >
+          <div class="align-self-stretch d-flex" display="dynamic" container="body">
+            <div class="align-self-center p-3">
+              <div #headerExtraContent>
+                <ng-container
+                  [ngTemplateOutlet]="optionHeaderContent"
+                  [ngTemplateOutletContext]="headerExtraContent"
+                ></ng-container>
               </div>
             </div>
           </div>
+        </div>
+        <div
+          [ngClass]="{ 'ms-auto': !optionHeaderContent }"
+          class="settings flex-shrink-0 d-flex align-self-stretch"
+        >
           <div
-            [ngClass]="{ 'ms-auto': !optionHeaderContent }"
-            class="settings flex-shrink-0 d-flex align-self-stretch"
+            class="align-self-stretch d-flex"
+            #optionDropdown="ngbDropdown"
+            ngbDropdown
+            autoClose="outside"
+            display="dynamic"
+            container="body"
+            placement="bottom-right"
           >
             <div
-              class="align-self-stretch d-flex"
-              #optionDropdown="ngbDropdown"
-              ngbDropdown
-              autoClose="outside"
-              display="dynamic"
-              container="body"
-              placement="bottom-right"
+              class="d-flex justify-content-center align-self-stretch px-3 no-toggle-arrow"
+              id="profileMenu"
+              ngbDropdownToggle
             >
-              <div
-                class="d-flex justify-content-center align-self-stretch px-3 no-toggle-arrow"
-                id="profileMenu"
-                ngbDropdownToggle
-              >
-                <img [src]="avatarUrl" class="profile-image align-self-center" alt="" />
+              <img [src]="avatarUrl" class="profile-image align-self-center" alt="" />
+            </div>
+            <div class="dropdown-menu" id="languageParent" ngbDropdownMenu>
+              <div class="language-menu">
+                <ng-container *ngFor="let appLang of appLangs">
+                  <button
+                    type="button"
+                    class="btn btn-secondary dropdown-item"
+                    *ngIf="!isLanguageActive(appLang)"
+                    (click)="handleLanguageChange(appLang)"
+                  >
+                    {{ appLang.toUpperCase() }}
+                  </button>
+                  <div class="dropdown-item active" *ngIf="isLanguageActive(appLang)">
+                    {{ appLang.toUpperCase() }}
+                  </div>
+                </ng-container>
               </div>
-              <div class="dropdown-menu" id="languageParent" ngbDropdownMenu>
-                <div class="language-menu">
-                  <ng-container *ngFor="let appLang of appLangs">
-                    <button
-                      type="button"
-                      class="btn btn-secondary dropdown-item"
-                      *ngIf="!isLanguageActive(appLang)"
-                      (click)="handleLanguageChange(appLang)"
-                    >
-                      {{ appLang.toUpperCase() }}
-                    </button>
-                    <div class="dropdown-item active" *ngIf="isLanguageActive(appLang)">
-                      {{ appLang.toUpperCase() }}
-                    </div>
-                  </ng-container>
+              <div class="other-items" (click)="optionDropdownClick($event)">
+                <div class="dropdown-item" *ngIf="currentUserId">
+                  {{ currentUserId }}
                 </div>
-                <div class="other-items" (click)="optionDropdownClick($event)">
-                  <div class="dropdown-item" *ngIf="currentUserId">
-                    {{ currentUserId }}
-                  </div>
-                  <div class="dropdown-item" *ngIf="displayName">
-                    {{ displayName }}
-                  </div>
-                  <div class="dropdown-item" *ngIf="additionalInfo">
-                    {{ additionalInfo }}
-                  </div>
-                  <ng-container
-                    [ngTemplateOutlet]="optionDropdownContent"
-                    [ngTemplateOutletContext]="{ dropdownRef: optionDropdown }"
-                  ></ng-container>
+                <div class="dropdown-item" *ngIf="displayName">
+                  {{ displayName }}
                 </div>
+                <div class="dropdown-item" *ngIf="additionalInfo">
+                  {{ additionalInfo }}
+                </div>
+                <ng-container
+                  [ngTemplateOutlet]="optionDropdownContent"
+                  [ngTemplateOutletContext]="{ dropdownRef: optionDropdown }"
+                ></ng-container>
               </div>
             </div>
           </div>
-          <div
-            *ngIf="hasNavbar === true"
-            (click)="toggleMenu()"
-            id="nav-toggler"
-            class="navbar-toggler px-3 d-md-none align-self-stretch d-inline-flex align-items-center"
-          >
-            <em class="pi pi-2070"></em>
-          </div>
         </div>
-      </div>
-      <nav
-        *ngIf="hasNavbar === true"
-        class="row justify-content-center top-navigation m-0 d-md-flex"
-        [ngClass]="{ 'd-none': !openedMenu }"
-      >
-        <div class="navbar-collapse" id="navbarsDefault">
-          <ul id="nav" class="navbar-nav mx-auto justify-content-center">
-            <ng-content></ng-content>
-          </ul>
+        <div
+          *ngIf="hasNavbar === true"
+          (click)="toggleMenu()"
+          id="nav-toggler"
+          class="navbar-toggler px-3 d-md-none align-self-stretch d-inline-flex align-items-center"
+        >
+          <em class="pi pi-2070"></em>
         </div>
-      </nav>
-      <div *ngIf="showIntranetSearch" class="search-textbox d-md-none">
-        <form [action]="this.searchUrl">
-          <div class="input-group mx-auto">
-            <input
-              type="text"
-              name="k"
-              class="form-control"
-              placeholder="{{ getPlaceholderSearchIntranet() }}"
-            />
-            <div class="input-group-append d-flex align-items-center">
-              <button class="btn pr-4" type="submit">
-                <span><em class="pi pi-2069"></em></span>
-              </button>
-            </div>
-          </div>
-        </form>
       </div>
     </div>
-  </header>
-</ng-template>
+    <nav
+      *ngIf="hasNavbar === true"
+      class="row justify-content-center top-navigation m-0 d-md-flex"
+      [ngClass]="{ 'd-none': !openedMenu }"
+    >
+      <div class="navbar-collapse" id="navbarsDefault">
+        <ul id="nav" class="navbar-nav mx-auto justify-content-center">
+          <ng-content></ng-content>
+        </ul>
+      </div>
+    </nav>
+    <div *ngIf="showIntranetSearch" class="search-textbox d-md-none">
+      <form [action]="this.searchUrl">
+        <div class="input-group mx-auto">
+          <input
+            type="text"
+            name="k"
+            class="form-control"
+            placeholder="{{ getPlaceholderSearchIntranet() }}"
+          />
+          <div class="input-group-append d-flex align-items-center">
+            <button class="btn pr-4" type="submit">
+              <span><em class="pi pi-2069"></em></span>
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</header>
diff --git a/packages/intranet-header-workspace/projects/intranet-header/src/lib/swisspost-intranet-header.component.scss b/packages/intranet-header-workspace/projects/intranet-header/src/lib/swisspost-intranet-header.component.scss
index 12a0729eb0..f9c38c1528 100644
--- a/packages/intranet-header-workspace/projects/intranet-header/src/lib/swisspost-intranet-header.component.scss
+++ b/packages/intranet-header-workspace/projects/intranet-header/src/lib/swisspost-intranet-header.component.scss
@@ -1,66 +1,3 @@
-section.layout-container.preview {
-  height: auto;
-}
-
-section.layout-container.preview #sidebar .sidebar-sticky,
-section.layout-container.preview header,
-section.layout-container.preview header.navbar {
-  position: relative;
-}
-
-section.layout-container.preview header,
-section.layout-container.preview header.navbar {
-  z-index: 1010;
-}
-
-section.layout-container.preview #sidebar .sidebar-sticky {
-  max-width: none;
-  padding: 0;
-  width: calc(100% + 2rem);
-}
-
-section.layout-container.preview .sidebar-sticky > ul {
-  padding-right: 0;
-}
-
-section.layout-container.preview .header-margin {
-  margin-top: 0;
-}
-
-@media all and (max-width: 767.98px) {
-  section.layout-container.preview #sidebar {
-    padding-right: 0;
-  }
-
-  section.layout-container.preview #sidebar:not(.closed) {
-    padding-bottom: 1rem;
-  }
-
-  section.layout-container.preview #sidebar + main {
-    margin-top: 0;
-  }
-
-  section.layout-container.preview #sidebar > div > ul > li:first-child {
-    padding-top: 2rem;
-    margin-right: 0px;
-  }
-
-  section.layout-container.preview .sidebar-sticky {
-    width: 100%;
-    margin-left: 0px;
-  }
-
-  section.layout-container.preview #sidebar .sidebar-sticky > ul {
-    padding-right: 0;
-  }
-
-  section.layout-container.preview #sidebar .sidebar-sticky {
-    max-width: none;
-    padding: 0;
-    width: calc(100% + 1rem);
-  }
-}
-
 pre.scroll {
   max-height: 10rem;
   overflow-y: auto;
diff --git a/packages/intranet-header-workspace/projects/intranet-header/src/lib/swisspost-intranet-header.component.ts b/packages/intranet-header-workspace/projects/intranet-header/src/lib/swisspost-intranet-header.component.ts
index 6d1005c987..1a002c2475 100644
--- a/packages/intranet-header-workspace/projects/intranet-header/src/lib/swisspost-intranet-header.component.ts
+++ b/packages/intranet-header-workspace/projects/intranet-header/src/lib/swisspost-intranet-header.component.ts
@@ -16,7 +16,7 @@ import {
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import { NavigationStart, Router } from '@angular/router';
 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
-import { Subject, fromEvent } from 'rxjs';
+import { fromEvent, Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { userImage } from './user';
 
@@ -28,7 +28,6 @@ import { userImage } from './user';
 export class SwissPostIntranetHeaderComponent implements OnInit, OnChanges, AfterViewInit {
   @Input() siteTitle: string = '';
   @Input() languages = 'de,fr,it,en';
-  @Input() isPreview = false;
   @Input() currentUserId: string = '';
   @Input() displayName: string = '';
   @Input() additionalInfo: string = '';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5244c06a2f..7285a7f241 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -506,7 +506,7 @@ importers:
     devDependencies:
       '@geometricpanda/storybook-addon-badges':
         specifier: 2.0.2
-        version: 2.0.2(@storybook/blocks@7.6.17)(@storybook/components@7.6.17)(@storybook/core-events@7.6.17)(@storybook/manager-api@7.6.17)(@storybook/preview-api@7.6.17)(@storybook/theming@7.6.17)(@storybook/types@7.6.12)(react-dom@18.2.0)(react@18.2.0)
+        version: 2.0.2(@storybook/blocks@7.6.17)(@storybook/components@7.6.17)(@storybook/core-events@7.6.17)(@storybook/manager-api@7.6.17)(@storybook/preview-api@7.6.17)(@storybook/theming@7.6.17)(@storybook/types@7.6.17)(react-dom@18.2.0)(react@18.2.0)
       '@lit/task':
         specifier: 1.0.0
         version: 1.0.0
@@ -563,7 +563,7 @@ importers:
         version: 7.6.17(lit@3.1.2)(react-dom@18.2.0)(react@18.2.0)
       '@storybook/web-components-vite':
         specifier: 7.6.17
-        version: 7.6.17(lit@3.1.2)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.6)(vite@5.0.12)
+        version: 7.6.17(lit@3.1.2)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.6)(vite@5.1.5)
       '@types/css-modules':
         specifier: 1.0.5
         version: 1.0.5
@@ -817,6 +817,9 @@ importers:
       '@popperjs/core':
         specifier: 2.11.8
         version: 2.11.8
+      '@swisspost/design-system-intranet-header':
+        specifier: workspace:5.0.11
+        version: link:dist/intranet-header
       '@swisspost/design-system-styles':
         specifier: workspace:6.6.4
         version: link:../styles/dist
@@ -4380,7 +4383,7 @@ packages:
   /@floating-ui/utils@0.2.1:
     resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==}
 
-  /@geometricpanda/storybook-addon-badges@2.0.2(@storybook/blocks@7.6.17)(@storybook/components@7.6.17)(@storybook/core-events@7.6.17)(@storybook/manager-api@7.6.17)(@storybook/preview-api@7.6.17)(@storybook/theming@7.6.17)(@storybook/types@7.6.12)(react-dom@18.2.0)(react@18.2.0):
+  /@geometricpanda/storybook-addon-badges@2.0.2(@storybook/blocks@7.6.17)(@storybook/components@7.6.17)(@storybook/core-events@7.6.17)(@storybook/manager-api@7.6.17)(@storybook/preview-api@7.6.17)(@storybook/theming@7.6.17)(@storybook/types@7.6.17)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-RlJvQcSSXwwrN+ABc+2s1UDatWSUsba9TPX/TyNVyobuZZPvu+Bx1d2HVDCIVtXwhlrSvgVB2yr+nVa18edOgw==}
     peerDependencies:
       '@storybook/blocks': ^7.0.0
@@ -4404,7 +4407,7 @@ packages:
       '@storybook/manager-api': 7.6.17(react-dom@18.2.0)(react@18.2.0)
       '@storybook/preview-api': 7.6.17
       '@storybook/theming': 7.6.17(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/types': 7.6.12
+      '@storybook/types': 7.6.17
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: true
@@ -6593,7 +6596,7 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/builder-vite@7.6.17(typescript@5.1.6)(vite@5.0.12):
+  /@storybook/builder-vite@7.6.17(typescript@5.1.6)(vite@5.1.5):
     resolution: {integrity: sha512-2Q32qalI401EsKKr9Hkk8TAOcHEerqwsjCpQgTNJnCu6GgCVKoVUcb99oRbR9Vyg0xh+jb19XiWqqQujFtLYlQ==}
     peerDependencies:
       '@preact/preset-vite': '*'
@@ -6625,7 +6628,7 @@ packages:
       magic-string: 0.30.7
       rollup: 3.29.4
       typescript: 5.1.6
-      vite: 5.0.12(sass@1.72.0)
+      vite: 5.1.5(@types/node@18.17.19)(less@4.2.0)(sass@1.72.0)
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -6639,17 +6642,6 @@ packages:
       util-deprecate: 1.0.2
     dev: true
 
-  /@storybook/channels@7.6.12:
-    resolution: {integrity: sha512-TaPl5Y3lOoVi5kTLgKNRX8xh2sUPekH0Id1l4Ymw+lpgriEY6r60bmkZLysLG1GhlskpQ/da2+S2ap2ht8P2TQ==}
-    dependencies:
-      '@storybook/client-logger': 7.6.12
-      '@storybook/core-events': 7.6.12
-      '@storybook/global': 5.0.0
-      qs: 6.11.2
-      telejson: 7.2.0
-      tiny-invariant: 1.3.1
-    dev: true
-
   /@storybook/channels@7.6.17:
     resolution: {integrity: sha512-GFG40pzaSxk1hUr/J/TMqW5AFDDPUSu+HkeE/oqSWJbOodBOLJzHN6CReJS6y1DjYSZLNFt1jftPWZZInG/XUA==}
     dependencies:
@@ -6719,12 +6711,6 @@ packages:
       global: 4.4.0
     dev: true
 
-  /@storybook/client-logger@7.6.12:
-    resolution: {integrity: sha512-hiRv6dXsOttMPqm9SxEuFoAtDe9rs7TUS8XcO5rmJ9BgfwBJsYlHzAxXkazxmvlyZtKL7gMx6m8OYbCdZgUqtA==}
-    dependencies:
-      '@storybook/global': 5.0.0
-    dev: true
-
   /@storybook/client-logger@7.6.17:
     resolution: {integrity: sha512-6WBYqixAXNAXlSaBWwgljWpAu10tPRBJrcFvx2gPUne58EeMM20Gi/iHYBz2kMCY+JLAgeIH7ZxInqwO8vDwiQ==}
     dependencies:
@@ -6819,12 +6805,6 @@ packages:
       core-js: 3.36.0
     dev: true
 
-  /@storybook/core-events@7.6.12:
-    resolution: {integrity: sha512-IO4cwk7bBCKH6lLnnIlHO9FwQXt/9CzLUAoZSY9msWsdPppCdKlw8ynJI5YarSNKDBUn8ArIfnRf0Mve0KQr9Q==}
-    dependencies:
-      ts-dedent: 2.2.0
-    dev: true
-
   /@storybook/core-events@7.6.17:
     resolution: {integrity: sha512-AriWMCm/k1cxlv10f+jZ1wavThTRpLaN3kY019kHWbYT9XgaSuLU67G7GPr3cGnJ6HuA6uhbzu8qtqVCd6OfXA==}
     dependencies:
@@ -7097,15 +7077,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /@storybook/types@7.6.12:
-    resolution: {integrity: sha512-Wsbd+NS10/2yMHQ/26rXHflXam0hm2qufTFiHOX6VXZWxij3slRU88Fnwzp+1QSyjXb0qkEr8dOx7aG00+ItVw==}
-    dependencies:
-      '@storybook/channels': 7.6.12
-      '@types/babel__core': 7.20.5
-      '@types/express': 4.17.17
-      file-system-cache: 2.3.0
-    dev: true
-
   /@storybook/types@7.6.17:
     resolution: {integrity: sha512-GRY0xEJQ0PrL7DY2qCNUdIfUOE0Gsue6N+GBJw9ku1IUDFLJRDOF+4Dx2BvYcVCPI5XPqdWKlEyZdMdKjiQN7Q==}
     dependencies:
@@ -7115,11 +7086,11 @@ packages:
       file-system-cache: 2.3.0
     dev: true
 
-  /@storybook/web-components-vite@7.6.17(lit@3.1.2)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.6)(vite@5.0.12):
+  /@storybook/web-components-vite@7.6.17(lit@3.1.2)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.6)(vite@5.1.5):
     resolution: {integrity: sha512-luBXrRP1OS9QfB+Sw7hcP0cktqQmbF41+m2R/3C56DjBckoh8ojw0CUIpNIktkN4rS9cB/NUGHvaeZSWuDtuFw==}
     engines: {node: ^14.18 || >=16}
     dependencies:
-      '@storybook/builder-vite': 7.6.17(typescript@5.1.6)(vite@5.0.12)
+      '@storybook/builder-vite': 7.6.17(typescript@5.1.6)(vite@5.1.5)
       '@storybook/core-server': 7.6.17
       '@storybook/node-logger': 7.6.17
       '@storybook/web-components': 7.6.17(lit@3.1.2)(react-dom@18.2.0)(react@18.2.0)
@@ -11687,7 +11658,6 @@ packages:
       '@esbuild/win32-ia32': 0.20.1
       '@esbuild/win32-x64': 0.20.1
     dev: true
-    optional: true
 
   /escalade@3.1.1:
     resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
@@ -20748,7 +20718,7 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /terser-webpack-plugin@5.3.10(webpack@5.90.3):
+  /terser-webpack-plugin@5.3.10(esbuild@0.20.1)(webpack@5.90.3):
     resolution: {integrity: sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==}
     engines: {node: '>= 10.13.0'}
     peerDependencies:
@@ -20765,6 +20735,7 @@ packages:
         optional: true
     dependencies:
       '@jridgewell/trace-mapping': 0.3.22
+      esbuild: 0.20.1
       jest-worker: 27.5.1
       schema-utils: 3.3.0
       serialize-javascript: 6.0.1
@@ -21885,42 +21856,6 @@ packages:
       replace-ext: 1.0.1
     dev: true
 
-  /vite@5.0.12(sass@1.72.0):
-    resolution: {integrity: sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==}
-    engines: {node: ^18.0.0 || >=20.0.0}
-    hasBin: true
-    peerDependencies:
-      '@types/node': ^18.0.0 || >=20.0.0
-      less: '*'
-      lightningcss: ^1.21.0
-      sass: '*'
-      stylus: '*'
-      sugarss: '*'
-      terser: ^5.4.0
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      less:
-        optional: true
-      lightningcss:
-        optional: true
-      sass:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      terser:
-        optional: true
-    dependencies:
-      esbuild: 0.19.12
-      postcss: 8.4.35
-      rollup: 4.13.0
-      sass: 1.72.0
-    optionalDependencies:
-      fsevents: 2.3.3
-    dev: true
-
   /vite@5.1.5(@types/node@18.17.19)(less@4.2.0)(sass@1.72.0):
     resolution: {integrity: sha512-BdN1xh0Of/oQafhU+FvopafUp6WaYenLU/NFoL5WyJL++GxkNfieKzBhM24H3HVsPQrlAqB7iJYTHabzaRed5Q==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -22218,7 +22153,7 @@ packages:
       neo-async: 2.6.2
       schema-utils: 3.3.0
       tapable: 2.2.1
-      terser-webpack-plugin: 5.3.10(webpack@5.90.3)
+      terser-webpack-plugin: 5.3.10(esbuild@0.20.1)(webpack@5.90.3)
       watchpack: 2.4.0
       webpack-sources: 3.2.3
     transitivePeerDependencies:

From 8cf557b59084c2b86de682cd89e973c56dc7331d Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Wed, 20 Mar 2024 16:32:32 +0100
Subject: [PATCH 2/9] Fix missing linting project

---
 packages/intranet-header-workspace/angular.json | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/intranet-header-workspace/angular.json b/packages/intranet-header-workspace/angular.json
index 1db01e4085..cc51c1d234 100644
--- a/packages/intranet-header-workspace/angular.json
+++ b/packages/intranet-header-workspace/angular.json
@@ -102,6 +102,12 @@
             "styles": ["projects/intranet-header-showcase/src/styles.scss"],
             "scripts": []
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": ["**/*.ts", "**/*.html"]
+          }
         }
       }
     }

From 3c3adb8c2e78b6cff785927d9e0517531b49cc5b Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Wed, 20 Mar 2024 16:34:12 +0100
Subject: [PATCH 3/9] Fix removing intranet-header project

---
 .../intranet-header-workspace/angular.json    | 40 +++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/packages/intranet-header-workspace/angular.json b/packages/intranet-header-workspace/angular.json
index cc51c1d234..e50519a7a5 100644
--- a/packages/intranet-header-workspace/angular.json
+++ b/packages/intranet-header-workspace/angular.json
@@ -3,6 +3,46 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
+    "intranet-header": {
+      "projectType": "library",
+      "root": "projects/intranet-header",
+      "sourceRoot": "projects/intranet-header/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/intranet-header/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/intranet-header/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/intranet-header/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/intranet-header/src/test.ts",
+            "tsConfig": "projects/intranet-header/tsconfig.spec.json",
+            "karmaConfig": "projects/intranet-header/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/intranet-header/**/*.ts",
+              "projects/intranet-header/**/*.html"
+            ]
+          }
+        }
+      }
+    },
     "intranet-header-showcase": {
       "projectType": "application",
       "schematics": {

From e0654317201a36a72cf02ed283e0142cab2008bf Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Wed, 20 Mar 2024 16:38:50 +0100
Subject: [PATCH 4/9] Add iframe title for accessibility

---
 .../src/app/intranet-layout/intranet-layout.component.html     | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/demo/src/app/intranet-layout/intranet-layout.component.html b/packages/demo/src/app/intranet-layout/intranet-layout.component.html
index 300ac6bcf8..a9a4c3e5f8 100644
--- a/packages/demo/src/app/intranet-layout/intranet-layout.component.html
+++ b/packages/demo/src/app/intranet-layout/intranet-layout.component.html
@@ -318,6 +318,7 @@ <h4 class="bold mt-5">With top navigation, without sidenav</h4>
 <div class="header-showcase-container p-huge-r">
   <div class="header-showcase-page">
     <iframe
+      title="Intranet-header example with top navigation and without sidenav"
       src="/#/samples/intranet-layout-regular"
       class="w-100"
       style="min-height: 300px"
@@ -338,6 +339,7 @@ <h4 class="bold mt-5">Without top navigation, with sidenav</h4>
 <div class="header-showcase-container p-huge-r">
   <div class="header-showcase-page">
     <iframe
+      title="Intranet-header example without top navigation and with sidenav"
       src="/#/samples/intranet-layout-sidebar-small-sidebar"
       class="w-100"
       style="min-height: 500px"
@@ -364,6 +366,7 @@ <h4 class="bold mt-5">Intranet-Header "postweb"</h4>
 <div class="header-showcase-container p-huge-r">
   <div class="header-showcase-page">
     <iframe
+      title="Intranet-header 'postweb' example with top navigation and with sidenav"
       src="/#/samples/intranet-layout-sidebar-big-sidebar"
       class="w-100"
       style="min-height: 500px"

From 5e8bb458398713e5bcb66a3c0fc6817cc6d09669 Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Wed, 20 Mar 2024 16:40:53 +0100
Subject: [PATCH 5/9] Remove empty styles.scss

---
 packages/intranet-header-workspace/angular.json             | 6 +-----
 .../projects/intranet-header-showcase/src/styles.scss       | 0
 2 files changed, 1 insertion(+), 5 deletions(-)
 delete mode 100644 packages/intranet-header-workspace/projects/intranet-header-showcase/src/styles.scss

diff --git a/packages/intranet-header-workspace/angular.json b/packages/intranet-header-workspace/angular.json
index e50519a7a5..db42771bdd 100644
--- a/packages/intranet-header-workspace/angular.json
+++ b/packages/intranet-header-workspace/angular.json
@@ -70,10 +70,7 @@
               "projects/intranet-header-showcase/src/favicon.ico",
               "projects/intranet-header-showcase/src/assets"
             ],
-            "styles": [
-              "node_modules/@swisspost/design-system-styles/intranet.css",
-              "projects/intranet-header-showcase/src/styles.scss"
-            ],
+            "styles": ["node_modules/@swisspost/design-system-styles/intranet.css"],
             "scripts": []
           },
           "configurations": {
@@ -139,7 +136,6 @@
               "projects/intranet-header-showcase/src/favicon.ico",
               "projects/intranet-header-showcase/src/assets"
             ],
-            "styles": ["projects/intranet-header-showcase/src/styles.scss"],
             "scripts": []
           }
         },
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/styles.scss b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/styles.scss
deleted file mode 100644
index e69de29bb2..0000000000

From 5b8f281fc5f340c8b7ae06688ea33f6b1b1a7d22 Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Wed, 20 Mar 2024 16:44:06 +0100
Subject: [PATCH 6/9] Fix path for linting

---
 packages/intranet-header-workspace/angular.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/intranet-header-workspace/angular.json b/packages/intranet-header-workspace/angular.json
index db42771bdd..8a00d64f49 100644
--- a/packages/intranet-header-workspace/angular.json
+++ b/packages/intranet-header-workspace/angular.json
@@ -142,7 +142,10 @@
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": ["**/*.ts", "**/*.html"]
+            "lintFilePatterns": [
+              "projects/intranet-header-showcase/**/*.ts",
+              "projects/intranet-header-showcase**/*.html"
+            ]
           }
         }
       }

From 29944b974c23da959abd32e76e51a4221bf099ee Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Wed, 20 Mar 2024 16:59:35 +0100
Subject: [PATCH 7/9] Fix path for linting

---
 packages/intranet-header-workspace/angular.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/intranet-header-workspace/angular.json b/packages/intranet-header-workspace/angular.json
index 8a00d64f49..e81e3b34e9 100644
--- a/packages/intranet-header-workspace/angular.json
+++ b/packages/intranet-header-workspace/angular.json
@@ -143,8 +143,8 @@
           "builder": "@angular-eslint/builder:lint",
           "options": {
             "lintFilePatterns": [
-              "projects/intranet-header-showcase/**/*.ts",
-              "projects/intranet-header-showcase**/*.html"
+              "projects/intranet-header-showcase/src/**/*.ts",
+              "projects/intranet-header-showcase/src/**/*.html"
             ]
           }
         }

From 226ab66eddb4a9bb74ce7037e785e5b8b4bbd934 Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Wed, 20 Mar 2024 17:02:57 +0100
Subject: [PATCH 8/9] Add missing .eslintrc

---
 .../intranet-header-showcase/.eslintrc.js     | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 packages/intranet-header-workspace/projects/intranet-header-showcase/.eslintrc.js

diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/.eslintrc.js b/packages/intranet-header-workspace/projects/intranet-header-showcase/.eslintrc.js
new file mode 100644
index 0000000000..f261644118
--- /dev/null
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/.eslintrc.js
@@ -0,0 +1,22 @@
+module.exports = {
+  extends: '../../.eslintrc.json',
+  ignorePatterns: ['!**/*', 'node_modules'],
+  overrides: [
+    {
+      files: ['*.ts'],
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+        project: ['tsconfig.app.json', 'tsconfig.spec.json'],
+        createDefaultProgram: true,
+      },
+      rules: {
+        '@angular-eslint/directive-selector': 0,
+        '@angular-eslint/component-selector': 0,
+      },
+    },
+    {
+      files: ['*.html'],
+      rules: {},
+    },
+  ],
+};

From a460d01c76304c97fbca5fb0034423c361c82500 Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Wed, 20 Mar 2024 17:38:46 +0100
Subject: [PATCH 9/9] fix(intranet-header): "tabIndex" should only be declared
 on interactive elements

---
 .changeset/polite-starfishes-vanish.md        |  8 ++++++
 ...net-header-demo-big-sidebar.component.html |  7 +++---
 ...t-header-demo-small-sidebar.component.html |  8 +++---
 .../intranet-header-postweb.sample.html       |  8 +++---
 ...ntranet-header-side-navigation.sample.html |  5 ++--
 .../sidebar-with-searchbar.component.html     |  8 +++---
 .../samples/sidebar/sidebar.component.html    |  8 +++---
 .../components/intranet-header/_sidebar.scss  | 25 ++++++++++++++++---
 8 files changed, 55 insertions(+), 22 deletions(-)
 create mode 100644 .changeset/polite-starfishes-vanish.md

diff --git a/.changeset/polite-starfishes-vanish.md b/.changeset/polite-starfishes-vanish.md
new file mode 100644
index 0000000000..90bfb850bf
--- /dev/null
+++ b/.changeset/polite-starfishes-vanish.md
@@ -0,0 +1,8 @@
+---
+'@swisspost/design-system-intranet-header': minor
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+'@swisspost/design-system-demo': minor
+---
+
+Changed mobile navigation trigger to make it more accessible by default using a button element.
diff --git a/packages/demo/src/app/intranet-layout/components/intranet-header-demo-big-sidebar/intranet-header-demo-big-sidebar.component.html b/packages/demo/src/app/intranet-layout/components/intranet-header-demo-big-sidebar/intranet-header-demo-big-sidebar.component.html
index f47b45e54c..d441b7cd8a 100644
--- a/packages/demo/src/app/intranet-layout/components/intranet-header-demo-big-sidebar/intranet-header-demo-big-sidebar.component.html
+++ b/packages/demo/src/app/intranet-layout/components/intranet-header-demo-big-sidebar/intranet-header-demo-big-sidebar.component.html
@@ -18,9 +18,10 @@
         <div class="sidebar-sticky header-margin bg-light">
           <!-- left menu -->
           <ul>
-            <li tabindex="0" class="d-md-none" (click)="openedMenu = !openedMenu">
-              <i class="pi pi-menu"></i>
-              Active Page
+            <li class="d-md-none">
+              <button (click)="openedMenu = !openedMenu">
+                <i class="pi pi-menu"></i> Active Page
+              </button>
             </li>
             <li><a routerLink="/">Home</a></li>
             <li class="separator"></li>
diff --git a/packages/demo/src/app/intranet-layout/components/intranet-header-demo-small-sidebar/intranet-header-demo-small-sidebar.component.html b/packages/demo/src/app/intranet-layout/components/intranet-header-demo-small-sidebar/intranet-header-demo-small-sidebar.component.html
index 4266e9757a..aa2c812d15 100644
--- a/packages/demo/src/app/intranet-layout/components/intranet-header-demo-small-sidebar/intranet-header-demo-small-sidebar.component.html
+++ b/packages/demo/src/app/intranet-layout/components/intranet-header-demo-small-sidebar/intranet-header-demo-small-sidebar.component.html
@@ -10,9 +10,11 @@
         <div class="sidebar-sticky header-margin bg-light">
           <!-- left menu -->
           <ul>
-            <li class="d-md-none" (click)="openedMenu = !openedMenu">
-              <i class="pi pi-menu"></i>
-              Home
+            <li class="d-md-none">
+              <button (click)="openedMenu = !openedMenu">
+                <i class="pi pi-menu"></i>
+                Home
+              </button>
             </li>
             <li><a routerLink="/">Home</a></li>
             <li class="separator"></li>
diff --git a/packages/documentation/src/stories/components/intranet-header/intranet-header-postweb.sample.html b/packages/documentation/src/stories/components/intranet-header/intranet-header-postweb.sample.html
index dab1acd195..c3fc441b70 100644
--- a/packages/documentation/src/stories/components/intranet-header/intranet-header-postweb.sample.html
+++ b/packages/documentation/src/stories/components/intranet-header/intranet-header-postweb.sample.html
@@ -16,9 +16,11 @@
         <div class="sidebar-sticky header-margin bg-light">
           <!-- left menu -->
           <ul>
-            <li (click)="toggleMenu()" (keydown)="toggleMenu()" class="d-md-none" tabindex="0">
-              <em class="pi pi-menu"></em>
-              Active Page
+            <li class="d-md-none">
+              <button (click)="toggleMenu()">
+                <em class="pi pi-menu"></em>
+                Active Page
+              </button>
             </li>
             <li><a>Home</a></li>
             <li class="separator"></li>
diff --git a/packages/documentation/src/stories/components/intranet-header/intranet-header-side-navigation.sample.html b/packages/documentation/src/stories/components/intranet-header/intranet-header-side-navigation.sample.html
index 07c7e306a6..4ee54fd26c 100644
--- a/packages/documentation/src/stories/components/intranet-header/intranet-header-side-navigation.sample.html
+++ b/packages/documentation/src/stories/components/intranet-header/intranet-header-side-navigation.sample.html
@@ -10,9 +10,8 @@
         <div class="sidebar-sticky header-margin bg-light">
           <!-- left menu -->
           <ul>
-            <li (click)="toggleMenu()" (keydown)="toggleMenu()" class="d-md-none" tabindex="0">
-              <em class="pi pi-menu"></em>
-              Active Page
+            <li class="d-md-none">
+              <button (click)="toggleMenu()"><em class="pi pi-menu"></em> Active Page</button>
             </li>
             <li><a>Home</a></li>
             <li class="separator"></li>
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar-with-searchbar/sidebar-with-searchbar.component.html b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar-with-searchbar/sidebar-with-searchbar.component.html
index f47b45e54c..9ad11e04e1 100644
--- a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar-with-searchbar/sidebar-with-searchbar.component.html
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar-with-searchbar/sidebar-with-searchbar.component.html
@@ -18,9 +18,11 @@
         <div class="sidebar-sticky header-margin bg-light">
           <!-- left menu -->
           <ul>
-            <li tabindex="0" class="d-md-none" (click)="openedMenu = !openedMenu">
-              <i class="pi pi-menu"></i>
-              Active Page
+            <li class="d-md-none">
+              <button (click)="openedMenu = !openedMenu">
+                <i class="pi pi-menu"></i>
+                Active Page
+              </button>
             </li>
             <li><a routerLink="/">Home</a></li>
             <li class="separator"></li>
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar/sidebar.component.html b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar/sidebar.component.html
index 4266e9757a..aa2c812d15 100644
--- a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar/sidebar.component.html
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar/sidebar.component.html
@@ -10,9 +10,11 @@
         <div class="sidebar-sticky header-margin bg-light">
           <!-- left menu -->
           <ul>
-            <li class="d-md-none" (click)="openedMenu = !openedMenu">
-              <i class="pi pi-menu"></i>
-              Home
+            <li class="d-md-none">
+              <button (click)="openedMenu = !openedMenu">
+                <i class="pi pi-menu"></i>
+                Home
+              </button>
             </li>
             <li><a routerLink="/">Home</a></li>
             <li class="separator"></li>
diff --git a/packages/styles/src/components/intranet-header/_sidebar.scss b/packages/styles/src/components/intranet-header/_sidebar.scss
index 22364a690d..15f427393e 100644
--- a/packages/styles/src/components/intranet-header/_sidebar.scss
+++ b/packages/styles/src/components/intranet-header/_sidebar.scss
@@ -1,3 +1,4 @@
+@use './../../mixins/utilities';
 @use './../../variables/color';
 @use './../../variables/spacing';
 @use './../../variables/commons';
@@ -17,6 +18,19 @@
   flex: 1 0 auto;
   flex-direction: column;
 
+  > div > ul > li:first-child {
+    button {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      align-items: center;
+      background: none;
+      border: 0;
+
+      @include utilities.focus-style();
+    }
+  }
+
   @include media-breakpoint-down(md) {
     flex: 0 0 auto;
   }
@@ -33,15 +47,18 @@
 
       margin: spacing.$spacer * -1;
       margin-bottom: 0;
-      padding: spacing.$spacer;
-      padding-top: spacing.$spacer;
+      padding: spacing.$size-mini;
+      padding-left: spacing.$size-regular;
       border-bottom: commons.$border-width solid rgba(var(--post-contrast-color-rgb), 0.2);
       background-color: color.$white;
 
+      button {
+        padding: spacing.$size-mini;
+      }
+
       &:hover,
       &:focus {
-        background-color: get-solid-color(rgba(var(--post-contrast-color-rgb), 0.1), color.$white);
-        cursor: pointer;
+        background-color: color.$light;
       }
 
       i.pi {