✨ feat(shell-layout): integrate tabs and responsive element positioning

- 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

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;
 }

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>

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(() => {