From 44426109bd94b904100e85ef468ebedd4d830e93 Mon Sep 17 00:00:00 2001
From: Lorenz Hilpert <l.hilpert@paragon-data.de>
Date: Fri, 5 Dec 2025 21:05:45 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(shell-layout):=20integrate=20t?=
 =?UTF-8?q?abs=20and=20responsive=20element=20positioning?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add ShellTabsComponent to the header section
- Use UiElementSizeObserverDirective for dynamic margin calculations
- Apply fixed positioning for header and navigation with proper z-index
- Calculate main content margins based on header/navigation dimensions
---
 .../layout/src/lib/shell-layout.component.css | 10 ++++++-
 .../src/lib/shell-layout.component.html       | 28 +++++++++++++++----
 .../layout/src/lib/shell-layout.component.ts  | 19 +++++++++----
 3 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/libs/shell/layout/src/lib/shell-layout.component.css b/libs/shell/layout/src/lib/shell-layout.component.css
index 7cce79a90..9d3e72bf3 100644
--- a/libs/shell/layout/src/lib/shell-layout.component.css
+++ b/libs/shell/layout/src/lib/shell-layout.component.css
@@ -1,3 +1,11 @@
 :host {
-  @apply block h-full w-full;
+  @apply block h-full w-full text-isa-neutral-900 bg-isa-neutral-200;
+}
+
+header {
+  @apply fixed flex flex-col gap-2 top-0 inset-x-0 z-fixed bg-isa-white;
+}
+
+shell-navigation {
+  @apply fixed inset-y-0 left-0 z-fixed;
 }
diff --git a/libs/shell/layout/src/lib/shell-layout.component.html b/libs/shell/layout/src/lib/shell-layout.component.html
index f74c28ab1..7bdd09e08 100644
--- a/libs/shell/layout/src/lib/shell-layout.component.html
+++ b/libs/shell/layout/src/lib/shell-layout.component.html
@@ -1,10 +1,28 @@
 <shell-network-status-banner />
-<shell-header />
 
-@if (renderNavigation()) {
-  <shell-navigation />
-}
+<header #headerSizeObserver="uiElementSizeObserver" uiElementSizeObserver>
+  <shell-header />
+  <shell-tabs class="px-4" />
+</header>
 
-<main>
+<shell-navigation
+  [class.hidden]="!renderNavigation()"
+  [style.marginTop.px]="
+    headerSizeObserver.size().height + fontSizeService.getPx() * 1.5
+  "
+  #navigationSizeObserver="uiElementSizeObserver"
+  uiElementSizeObserver
+/>
+
+<main
+  [style.marginTop.px]="
+    headerSizeObserver.size().height + fontSizeService.getPx() * 1.5
+  "
+  [style.marginLeft.px]="
+    renderNavigation()
+      ? navigationSizeObserver.size().width + fontSizeService.getPx() * 1.5
+      : 0
+  "
+>
   <ng-content></ng-content>
 </main>
diff --git a/libs/shell/layout/src/lib/shell-layout.component.ts b/libs/shell/layout/src/lib/shell-layout.component.ts
index b4b90b72a..98973fcab 100644
--- a/libs/shell/layout/src/lib/shell-layout.component.ts
+++ b/libs/shell/layout/src/lib/shell-layout.component.ts
@@ -5,10 +5,16 @@ import {
   inject,
 } from '@angular/core';
 import { NetworkStatusBannerComponent } from './components/network-status-banner.component';
-import { NavigationService } from '@isa/shell/common';
+import { NavigationService, FontSizeService } from '@isa/shell/common';
 import { ShellHeaderComponent } from '@isa/shell/header';
 import { ShellNavigationComponent } from '@isa/shell/navigation';
-import { Breakpoint, breakpoint } from '@isa/ui/layout';
+import { ShellTabsComponent } from '@isa/shell/tabs';
+import {
+  Breakpoint,
+  breakpoint,
+  UiElementSizeObserverDirective,
+} from '@isa/ui/layout';
+
 
 @Component({
   selector: 'shell-layout',
@@ -20,14 +26,15 @@ import { Breakpoint, breakpoint } from '@isa/ui/layout';
     NetworkStatusBannerComponent,
     ShellHeaderComponent,
     ShellNavigationComponent,
-  ],
-  host: {
-    class: 'text-isa-neutral-900',
-  },
+    ShellTabsComponent,
+    UiElementSizeObserverDirective,
+  ]
 })
 export class ShellLayoutComponent {
   #navigationService = inject(NavigationService);
 
+  readonly fontSizeService = inject(FontSizeService);
+
   readonly tablet = breakpoint(Breakpoint.Tablet);
 
   readonly renderNavigation = computed(() => {