angular-layout-application-shell

name	angular-layout-application-shell
description	Creates the main layout/shell component for an Angular application using Angular Material sidenav pattern, providing a fixed header with navigation toggle, collapsible side menu, and content area with router outlet.
template-id	Intent.Angular.AI.LayoutShellSkillTemplate
paths	["**/*.component.ts","**/*.component.html","**/*.component.scss"]
contentHash	DCDC1F72B41B0A963F97093EE3119BDC385F12C15D1721671748DAA0E418383D

Reference Examples

You MUST read all of the following skill asset files using the skill asset/file access mechanism before generating output. These sample files are in the same folder as this SKILL file:

1. main-layout-sample.ts — TypeScript structure template (imports, component metadata, minimal class implementation)
2. main-layout-sample.html — HTML layout template (toolbar, sidenav container, drawer, content area structure)
3. main-layout-sample.scss — Styling template (always read, even for minimal styling)

CRITICAL: Preserve Existing Implementation & Structural Constraints

• Use this skill for: Main layout/shell components in Angular applications
• Do NOT use for: Page components, dialogs, or feature-specific layouts
• Source of truth: The existing component TypeScript file defines all methods, properties, and navigation behavior
• Layout is purely structural: Focus on shell structure, not application features

You MUST NOT:

• Add authentication logic, user menus, or profile dropdowns (unless they exist in TS file)
• Create navigation items for routes that don't exist or aren't specified
• Modify or add service calls (layout is purely structural)
• Add footer, breadcrumbs, or other UI elements (unless specified in TS file or context)
• Change fundamental structure (toolbar + sidenav + content)
• Add properties or methods to component class (unless required by existing functionality)
• Modify existing navigation methods in the TypeScript file

1. Purpose & Structure Requirements

The main layout is the root structural component wrapping the entire application.

Core structure (Angular Material sidenav pattern):

• Header/Toolbar: Fixed top bar with branding and navigation controls (<mat-toolbar>)
• Side Menu/Navigation: Collapsible drawer with application links (<mat-sidenav>)
• Content Area: Where routed components render (<mat-sidenav-content> with <router-outlet>)

Layout requirements:

• Use <mat-sidenav-container> as the layout wrapper
• Layout must occupy full viewport height (height: 100vh)
• Content area scrollable while header and drawer remain fixed
• Header fixed at top with appropriate z-index
• Sidenav container accounts for header height (e.g., padding-top: 64px)

2. Header/Toolbar Implementation

Use <mat-toolbar color="primary"> fixed at the top.

Required elements:

• Menu toggle button that calls drawer.toggle():

  <button mat-icon-button (click)="drawer.toggle()">
    <mat-icon>menu</mat-icon>
  </button>

• Home link/branding:
  • If navigation method exists in TS (e.g., navigateToHome()): use (click)="navigateToHome()"
  • Otherwise: use routerLink="/"

Do NOT add elements not in component TS file (e.g., user menus, profile dropdowns, auth UI).

3. Navigation Menu Implementation

Use <mat-sidenav #drawer mode="side" opened> for the drawer.

Structure:

• #drawer template reference variable is required for toggle button
• Inside drawer, use <mat-nav-list> to organize items
• Render navigation items per specification (see Navigation Items section below)

Responsive behavior:

• Desktop: mode="side" with opened="true" (always visible)
• Mobile (optional): mode="over" (drawer overlays content)
• Toggle button controls drawer visibility
• If responsive behavior needed, use Angular CDK's BreakpointObserver (only if already in TS file)

Do NOT invent routes or navigation items.

4. Navigation Items Rendering

Navigation items are provided as input or specified in context.

For each navigation item:

Element	Implementation
Container	<mat-list-item> or <a mat-list-item>
Icon	<mat-icon matListItemIcon>iconName</mat-icon>
Label	<span matListItemTitle>Display Text</span>

Binding rules:

• If navigation method exists in TS (e.g., navigateToCustomers()):
  • Use (click)="navigationMethod()"
• If no navigation method exists:
  • Use routerLink="/path" with routerLinkActive="active"

Dynamic menu items:

• If items dynamically loaded from service in component TS:
  • Use existing service method without modification
  • Bind to data returned by that service

Do NOT:

• Add navigation items not specified
• Modify existing navigation methods
• Create items for non-existent routes

5. Content Area with Router Outlet

The <mat-sidenav-content> MUST contain <router-outlet></router-outlet>.

Requirements:

• Content area is where all page components render
• Do NOT add additional markup beyond what's needed for layout structure
• Content should be scrollable while header/drawer remain fixed

6. TypeScript Component Configuration

The component class should be minimal (usually just decorator and imports).

Required imports (standalone component):

imports: [
  RouterOutlet,
  RouterLink,
  RouterLinkActive,
  MatToolbarModule,
  MatSidenavModule,
  MatButtonModule,
  MatIconModule,
  MatListModule
]

Styling:

• Use :host styles to control root element behavior (e.g., display: flex, height: 100vh)

Do NOT:

• Add properties or methods unless needed for existing functionality
• Create navigation methods—they must already exist in TS file

7. Styling Requirements

• Use global utilities first: .app-header, .app-sidebar, .app-content, .home-link, .pa-4, .mb-4, etc.
• Add component SCSS for viewport-filling layout when global styles don't provide it
• The generated layout must visually match the sample layout
• Add new utilities to styles.scss only when reusable across multiple pages
• NEVER modify existing styles in styles.scss or theme.scss—only add new ones
• Component SCSS required: The main-layout sample relies on component SCSS for viewport-filling layout. Copy/adapt sample SCSS unless those exact styles exist globally. Do not leave component SCSS empty if template uses classes that aren't confirmed global.

Definition of Done

HTML structure:

• <mat-toolbar> used for header
• <mat-sidenav-container> wraps entire layout
• <mat-sidenav #drawer> used for navigation menu with proper template reference
• <mat-sidenav-content> contains <router-outlet>

Header/Toolbar:

• Toolbar uses color="primary" and is fixed at top
• Menu toggle button exists with (click)="drawer.toggle()" and <mat-icon>menu</mat-icon>
• Home link/branding uses either existing navigation method or routerLink="/"
• No invented elements (user menus, auth UI) not in TS file

Navigation menu:

• <mat-sidenav #drawer mode="side" opened> structure used
• <mat-nav-list> organizes navigation items
• All navigation items rendered from specified source (not invented)
• Each item includes <mat-icon matListItemIcon> and <span matListItemTitle>

Navigation bindings:

• Items with existing navigation methods use (click)="navigationMethod()"
• Items without methods use routerLink="/path" and routerLinkActive="active"
• No navigation methods invented or modified

Content area:

• <mat-sidenav-content> contains only <router-outlet> and minimal structural markup
• No additional components or features beyond what's specified

TypeScript configuration:

• All required imports present (RouterOutlet, RouterLink, RouterLinkActive, Material modules)
• Component class minimal with no unnecessary properties/methods
• Material modules included: MatToolbarModule, MatSidenavModule, MatButtonModule, MatIconModule, MatListModule
• No properties or methods added unless they exist in original TS file

Responsive behavior:

• Drawer toggle button controls visibility
• Desktop mode uses mode="side" with opened="true"
• Mobile mode (if implemented) uses mode="over"

Layout styling:

• Layout occupies full viewport height (100vh)
• Header fixed at top with appropriate z-index
• Sidenav container accounts for header height
• Content area scrollable while header/drawer remain fixed
• :host styles control root element behavior

Forbidden actions avoided:

• No auth logic, user menus, or profile dropdowns (unless in TS)
• No navigation items for non-existent routes
• No service calls added or modified
• No footer, breadcrumbs, or extra UI (unless specified)
• Fundamental structure (toolbar + sidenav + content) preserved

Styling:

• Existing styles.scss and theme.scss not modified (only additions if needed)
• Component SCSS includes layout-specific styles (viewport height, positioning)
• Global utility classes used where appropriate
• Component SCSS adapted from sample when sample uses component styling

Compilation:

• All referenced methods exist in component TS
• All template reference variables properly used (#drawer)
• Code compiles with all necessary imports