mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-28 22:42:11 +01:00

Files

Lorenz Hilpert 0a1f25a1ee 📝 docs(shell): update READMEs for shell and connectivity libraries

- Expand core-connectivity README with usage examples and API docs
- Add TabsCollapsedService documentation to shell-common README
- Update shell-layout README with responsive behavior documentation
- Update library-reference.md with current library descriptions

2025-12-10 20:40:12 +01:00

4.5 KiB

Raw Blame History

shell-layout

Type: Feature Library Domain: Shell Path: libs/shell/layout

Overview

Root layout component for the application shell. Provides the main structural wrapper including network status banner, header with tabs, navigation sidebar, and content projection.

Features

Network status banner with offline/online state transitions
Header integration with tabs bar
Collapsible sidebar navigation
Responsive layout with tablet/mobile breakpoint handling
Dynamic positioning based on header and navigation sizes
Click-outside-to-close navigation on mobile
Font size scaling support

Installation

import { ShellLayoutComponent } from '@isa/shell/layout';

Usage

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ShellLayoutComponent],
  template: `
    <shell-layout>
      <router-outlet />
    </shell-layout>
  `
})
export class AppComponent {}

Components

ShellLayoutComponent

Selector: shell-layout

Root layout wrapper that structures the application shell.

Template Structure:

<shell-network-status-banner />
<header>
  <shell-header />
  <shell-tabs />
</header>
<shell-navigation />
<main>
  <ng-content></ng-content>
</main>

Features:

Responsive navigation visibility (auto-hide on tablet breakpoint)
Click-outside-to-close behavior for mobile navigation
Dynamic positioning based on header and navigation sizes
Scroll-to-close navigation on mobile

NetworkStatusBannerComponent

Selector: shell-network-status-banner

Displays connectivity status banners for network state changes.

Behavior:

Offline: Persistent red banner when network connection is lost
Online: Green success banner on reconnection, auto-dismisses after 2.5 seconds
Only shows after actual state change (not on initial load when online)

Exported Constants:

ONLINE_BANNER_DISPLAY_DURATION_MS - Banner display duration (2500ms)

Layout Structure

┌──────────────────────────────────────────────┐
│  Network Status Banner (conditional)          │
├──────────────────────────────────────────────┤
│  Header                                       │
│  ┌────────────────────────────────────────┐  │
│  │  Shell Header (logo, actions)          │  │
│  ├────────────────────────────────────────┤  │
│  │  Shell Tabs (tab carousel)             │  │
│  └────────────────────────────────────────┘  │
├─────────┬────────────────────────────────────┤
│ Nav     │  Main Content                      │
│ Sidebar │  <ng-content>                      │
│         │                                    │
│         │                                    │
└─────────┴────────────────────────────────────┘

Responsive Behavior

Viewport	Navigation	Tabs
Desktop	Always visible sidebar	Full tabs
Tablet/Mobile	Toggle via hamburger menu	Compact mode

Accessibility

Uses text-isa-neutral-900 host class for proper contrast
Network status banner announces connectivity changes
Semantic <header> and <main> landmarks

Dependencies

Internal:

@isa/shell/header - Header component
@isa/shell/navigation - Navigation sidebar
@isa/shell/tabs - Tabs carousel
@isa/shell/common - NavigationService, FontSizeService, TabsCollabsedService
@isa/core/connectivity - Network status service
@isa/ui/layout - Breakpoint utilities, UiElementSizeObserverDirective

Testing

npx nx test shell-layout

@isa/shell/header - Header component
@isa/shell/navigation - Navigation sidebar
@isa/shell/tabs - Tabs carousel
@isa/shell/common - Shared shell services
@isa/core/connectivity - Network status service

4.5 KiB Raw Blame History