@salesforce/ui-bundle-template-feature-angular-authentication 12.5.4

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/scripts/get-graphql-schema.mjs

@@ -0,0 +1,69 @@
+/**
+ * Downloads the full GraphQL schema from a connected Salesforce org via introspection.
+ *
+ * Usage:
+ *   npm run graphql:schema
+ *   node scripts/get-graphql-schema.mjs [output-path]
+ *
+ * The default output path matches the schema location expected by codegen.yml
+ * and .graphqlrc.yml so that codegen and IDE tooling resolve it automatically.
+ */
+import { writeFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { getOrgInfo } from '@salesforce/ui-bundle/app';
+import { buildClientSchema, getIntrospectionQuery, printSchema } from 'graphql';
+import { pruneSchema } from '@graphql-tools/utils';
+
+const DEFAULT_SCHEMA_PATH = '../../../../../schema.graphql';
+const TARGET_ORG = process.env.SF_TARGET_ORG || undefined;
+
+async function executeSalesforceGraphQLQuery(query, variables, operationName) {
+	const orgInfo = await getOrgInfo(TARGET_ORG);
+	if (!orgInfo) {
+		throw new Error('Could not resolve a Salesforce org. Set SF_TARGET_ORG or a default org.');
+	}
+	const { rawInstanceUrl: instanceUrl, apiVersion, accessToken } = orgInfo;
+
+	const targetUrl = `${instanceUrl}/services/data/v${apiVersion}/graphql`;
+
+	console.log(`Executing introspection query against ${targetUrl}`);
+	const response = await fetch(targetUrl, {
+		method: 'POST',
+		headers: {
+			Authorization: `Bearer ${accessToken}`,
+			'Content-Type': 'application/json',
+			'X-Chatter-Entity-Encoding': 'false',
+		},
+		body: JSON.stringify({ query, variables, operationName }),
+	});
+
+	if (!response.ok) {
+		const errorText = await response.text();
+		throw new Error(
+			`Salesforce GraphQL request failed: ${response.status} ${response.statusText} - ${errorText}`,
+		);
+	}
+
+	return response.json();
+}
+
+try {
+	const outputPath = resolve(process.argv[2] || DEFAULT_SCHEMA_PATH);
+
+	const introspectionResult = await executeSalesforceGraphQLQuery(
+		getIntrospectionQuery(),
+		{},
+		'IntrospectionQuery',
+	);
+
+	const schema = buildClientSchema(introspectionResult.data);
+	const prunedSchema = pruneSchema(schema);
+	const sdl = printSchema(prunedSchema);
+
+	writeFileSync(outputPath, sdl);
+
+	console.log(`Schema saved to ${outputPath}`);
+} catch (error) {
+	console.error('Error:', error.message);
+	process.exit(1);
+}

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/scripts/rewrite-e2e-assets.mjs

@@ -0,0 +1,30 @@
+/**
+ * Prepares dist/ for e2e: root-relative asset paths + SPA fallback for serve.
+ *
+ * angular.json sets deployUrl: "./", so the built index.html references
+ * scripts/styles with a relative "./" prefix (e.g. ./main-HASH.js). When the
+ * SPA fallback serves index.html for a deep route like /non-existent-route,
+ * those "./" paths resolve against the wrong base and 404, so the app never
+ * boots. Rewrite them to root-relative "/" paths.
+ */
+import { readFileSync, writeFileSync } from 'node:fs';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+// angular.json outputPath: { base: "dist", browser: "" } -> files land in dist/
+const distDir = join(__dirname, '..', 'dist');
+
+// Rewrite index.html so asset paths are root-relative (./main-x.js -> /main-x.js)
+const indexPath = join(distDir, 'index.html');
+let html = readFileSync(indexPath, 'utf8');
+html = html.replace(/(src|href)="\.\//g, '$1="/');
+writeFileSync(indexPath, html);
+
+// SPA fallback so /non-existent-route etc. serve index.html
+writeFileSync(
+	join(distDir, 'serve.json'),
+	JSON.stringify({
+		rewrites: [{ source: '**', destination: '/index.html' }],
+	}),
+);

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/api/data-client.service.spec.ts

@@ -0,0 +1,184 @@
+import { TestBed } from '@angular/core/testing';
+import { DataClient } from './data-client.service';
+import { createDataSDK } from '@salesforce/platform-sdk';
+
+vi.mock('@salesforce/platform-sdk', () => ({
+	createDataSDK: vi.fn(),
+}));
+
+describe('DataClient', () => {
+	let service: DataClient;
+	let mockGraphqlQuery: ReturnType<typeof vi.fn>;
+	let mockGraphqlMutate: ReturnType<typeof vi.fn>;
+	let mockFetch: ReturnType<typeof vi.fn>;
+
+	beforeEach(async () => {
+		mockGraphqlQuery = vi.fn();
+		mockGraphqlMutate = vi.fn();
+		mockFetch = vi.fn();
+
+		vi.mocked(createDataSDK).mockResolvedValue({
+			graphql: {
+				query: mockGraphqlQuery,
+				mutate: mockGraphqlMutate,
+			},
+			fetch: mockFetch,
+		} as any);
+
+		await TestBed.configureTestingModule({
+			providers: [DataClient],
+		}).compileComponents();
+
+		service = TestBed.inject(DataClient);
+	});
+
+	afterEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it('should create the service', () => {
+		expect(service).toBeTruthy();
+		expect(service).toBeInstanceOf(DataClient);
+	});
+
+	it('should route plain query operations to graphql.query and return result.data', async () => {
+		const operation = 'query { user { id name } }';
+		const expectedData = { user: { id: '123', name: 'Test User' } };
+		mockGraphqlQuery.mockResolvedValue({ data: expectedData });
+
+		const result = await service.execute(operation);
+
+		expect(mockGraphqlQuery).toHaveBeenCalledWith({ query: operation, variables: undefined });
+		expect(mockGraphqlMutate).not.toHaveBeenCalled();
+		expect(result).toEqual(expectedData);
+	});
+
+	it('should route anonymous query operations to graphql.query', async () => {
+		const operation = '{ user { id name } }';
+		const expectedData = { user: { id: '456', name: 'Anonymous User' } };
+		mockGraphqlQuery.mockResolvedValue({ data: expectedData });
+
+		const result = await service.execute(operation);
+
+		expect(mockGraphqlQuery).toHaveBeenCalledWith({ query: operation, variables: undefined });
+		expect(mockGraphqlMutate).not.toHaveBeenCalled();
+		expect(result).toEqual(expectedData);
+	});
+
+	it('should route mutation operations to graphql.mutate', async () => {
+		const operation = 'mutation { updateUser(id: "123", name: "New Name") { id name } }';
+		const expectedData = { updateUser: { id: '123', name: 'New Name' } };
+		mockGraphqlMutate.mockResolvedValue({ data: expectedData });
+
+		const result = await service.execute(operation);
+
+		expect(mockGraphqlMutate).toHaveBeenCalledWith({ mutation: operation, variables: undefined });
+		expect(mockGraphqlQuery).not.toHaveBeenCalled();
+		expect(result).toEqual(expectedData);
+	});
+
+	it('should detect mutation with leading GraphQL comment and route to graphql.mutate', async () => {
+		const operation = '# This is a comment\nmutation { deleteUser(id: "123") { success } }';
+		const expectedData = { deleteUser: { success: true } };
+		mockGraphqlMutate.mockResolvedValue({ data: expectedData });
+
+		const result = await service.execute(operation);
+
+		expect(mockGraphqlMutate).toHaveBeenCalledWith({ mutation: operation, variables: undefined });
+		expect(mockGraphqlQuery).not.toHaveBeenCalled();
+		expect(result).toEqual(expectedData);
+	});
+
+	it('should not treat query as mutation when comment contains "mutation" word', async () => {
+		const operation = '# this is not a mutation, just a query\nquery { user { id } }';
+		const expectedData = { user: { id: '789' } };
+		mockGraphqlQuery.mockResolvedValue({ data: expectedData });
+
+		const result = await service.execute(operation);
+
+		expect(mockGraphqlQuery).toHaveBeenCalledWith({ query: operation, variables: undefined });
+		expect(mockGraphqlMutate).not.toHaveBeenCalled();
+		expect(result).toEqual(expectedData);
+	});
+
+	it('should throw error when result.errors contains errors', async () => {
+		const operation = 'query { user { id } }';
+		mockGraphqlQuery.mockResolvedValue({
+			data: null,
+			errors: [{ message: 'Field not found' }, { message: 'Permission denied' }],
+		});
+
+		await expect(service.execute(operation)).rejects.toThrow(
+			'GraphQL Error: Field not found; Permission denied',
+		);
+	});
+
+	it('should throw error when result.errors contains a single error', async () => {
+		const operation = 'query { user { id } }';
+		mockGraphqlQuery.mockResolvedValue({
+			data: null,
+			errors: [{ message: 'Unauthorized' }],
+		});
+
+		await expect(service.execute(operation)).rejects.toThrow('GraphQL Error: Unauthorized');
+	});
+
+	it('should throw error when result.data is null with no errors', async () => {
+		const operation = 'query { user { id } }';
+		mockGraphqlQuery.mockResolvedValue({ data: null });
+
+		await expect(service.execute(operation)).rejects.toThrow('GraphQL response data is null');
+	});
+
+	it('should pass variables through to graphql.query', async () => {
+		const operation = 'query GetUser($id: ID!) { user(id: $id) { id name } }';
+		const variables = { id: '999' };
+		const expectedData = { user: { id: '999', name: 'Variable User' } };
+		mockGraphqlQuery.mockResolvedValue({ data: expectedData });
+
+		const result = await service.execute(operation, variables);
+
+		expect(mockGraphqlQuery).toHaveBeenCalledWith({ query: operation, variables });
+		expect(result).toEqual(expectedData);
+	});
+
+	it('should pass variables through to graphql.mutate', async () => {
+		const operation =
+			'mutation UpdateUser($id: ID!, $name: String!) { updateUser(id: $id, name: $name) { id name } }';
+		const variables = { id: '888', name: 'Updated Name' };
+		const expectedData = { updateUser: { id: '888', name: 'Updated Name' } };
+		mockGraphqlMutate.mockResolvedValue({ data: expectedData });
+
+		const result = await service.execute(operation, variables);
+
+		expect(mockGraphqlMutate).toHaveBeenCalledWith({ mutation: operation, variables });
+		expect(result).toEqual(expectedData);
+	});
+
+	it('should proxy fetch to sdk.fetch and return the raw Response', async () => {
+		const url = '/services/apexrest/auth/login';
+		const init: RequestInit = {
+			method: 'POST',
+			body: JSON.stringify({ email: 'a@b.com' }),
+			headers: { 'Content-Type': 'application/json' },
+		};
+		const expectedResponse = { ok: true, status: 200 } as Response;
+		mockFetch.mockResolvedValue(expectedResponse);
+
+		const response = await service.fetch(url, init);
+
+		expect(mockFetch).toHaveBeenCalledWith(url, init);
+		expect(response).toBe(expectedResponse);
+	});
+
+	it('should call fetch with no init when omitted', async () => {
+		const url = '/services/data/v64.0/chatter/users/me';
+		const expectedResponse = { ok: true, status: 200 } as Response;
+		mockFetch.mockResolvedValue(expectedResponse);
+
+		const response = await service.fetch(url);
+
+		expect(mockFetch).toHaveBeenCalledWith(url, undefined);
+		expect(response).toBe(expectedResponse);
+	});
+});

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/api/data-client.service.ts

@@ -0,0 +1,74 @@
+import { Injectable } from '@angular/core';
+import { createDataSDK } from '@salesforce/platform-sdk';
+
+/**
+ * True when the operation's first definition is a `mutation`. Strips GraphQL
+ * comments first so a leading `# ...` line can't mask the keyword. Queries
+ * (named or anonymous `{ ... }` shorthand) and subscriptions fall through to
+ * query().
+ */
+function isMutation(operation: string): boolean {
+	return /^\s*mutation\b/.test(operation.replace(/#[^\n\r]*/g, ''));
+}
+
+/**
+ * The single data-access client for the app — a thin wrapper over
+ * `createDataSDK` that centralizes both of the SDK's surfaces:
+ *
+ * - `execute()` for GraphQL (routes mutations to `sdk.graphql.mutate` and
+ *   everything else to `sdk.graphql.query`, with centralized error handling).
+ *   Use with gql-tagged queries and generated operation types for type-safe
+ *   calls.
+ * - `fetch()` for REST (proxies `sdk.fetch`, returning the raw `Response` so
+ *   callers keep full control over response parsing / error shaping).
+ *
+ * Consumers inject this instead of calling `createDataSDK` directly, so the SDK
+ * bootstrap lives in exactly one place. Feature packages consume it via an
+ * `__inherit__data-client.service` stub (base wins at compose).
+ */
+@Injectable({ providedIn: 'root' })
+export class DataClient {
+	/**
+	 * Executes a GraphQL operation and returns its `data`, throwing on GraphQL
+	 * errors or a null payload.
+	 */
+	async execute<TData, TVariables = Record<string, unknown>>(
+		operation: string,
+		variables?: TVariables,
+	): Promise<TData> {
+		const data = await createDataSDK();
+		const result = isMutation(operation)
+			? await data.graphql!.mutate<TData, TVariables>({
+					mutation: operation,
+					variables,
+				})
+			: await data.graphql!.query<TData, TVariables>({
+					query: operation,
+					variables,
+				});
+
+		if (result.errors?.length) {
+			const msg = result.errors.map((e) => e.message).join('; ');
+			throw new Error(`GraphQL Error: ${msg}`);
+		}
+
+		if (result.data == null) {
+			throw new Error('GraphQL response data is null');
+		}
+
+		return result.data;
+	}
+
+	/**
+	 * Performs a REST request through the SDK's authenticated `fetch`, returning
+	 * the raw `Response`. Callers parse the body / shape errors themselves (e.g.
+	 * via `handleApiResponse`).
+	 *
+	 * @param input - The request URL (e.g. an Apex REST route).
+	 * @param init  - Standard `fetch` options (method, headers, body, …).
+	 */
+	async fetch(input: string, init?: RequestInit): Promise<Response> {
+		const sdk = await createDataSDK();
+		return sdk.fetch!(input, init);
+	}
+}

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/api/user-profile.service.ts

@@ -0,0 +1,126 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { Injectable, inject } from "@angular/core";
+// DataClient is provided by the base-angular-app. Consumed via the
+// `__inherit__` stub in this same folder (app/api/); post-compose patches-cli
+// strips the prefix so it resolves to the seeded base file at
+// app/api/data-client.service.ts.
+import { DataClient } from "./data-client.service";
+import { flattenGraphQLRecord } from "../features/authentication/utils/helpers";
+
+// ---------------------------------------------------------------------------
+// Hand-written GraphQL query/mutation strings + wire types. Codegen is PARKED
+// for the Angular port (same decision as object-search). The field selection,
+// query/mutation shape, and variable structure mirror the React
+// `userProfileApi.ts` byte-for-byte so behavior is identical.
+// ---------------------------------------------------------------------------
+
+const USER_PROFILE_FIELDS_FULL = `
+    Id
+    FirstName @optional { value }
+    LastName @optional { value }
+    Email @optional { value }
+    Phone @optional { value }
+    Street @optional { value }
+    City @optional { value }
+    State @optional { value }
+    PostalCode @optional { value }
+    Country @optional { value }`;
+
+const USER_CONTACT_FIELDS = `
+    Id
+    ContactId @optional { value }`;
+
+function getUserProfileQuery(fields: string): string {
+	return `
+    query GetUserProfile($userId: ID) {
+        uiapi {
+            query {
+                User(where: { Id: { eq: $userId } }) {
+                    edges {
+                        node {${fields}}
+                    }
+                }
+            }
+        }
+    }`;
+}
+
+function getUserProfileMutation(fields: string): string {
+	return `
+    mutation UpdateUserProfile($input: UserUpdateInput!) {
+      uiapi {
+        UserUpdate(input: $input) {
+          Record {${fields}}
+        }
+      }
+    }`;
+}
+
+/** Wire shape for the GetUserProfile query. */
+interface GetUserProfileData {
+	uiapi: {
+		query: {
+			User: { edges: Array<{ node: Record<string, unknown> } | null> | null } | null;
+		};
+	};
+}
+
+/** Wire shape for the UpdateUserProfile mutation. */
+interface UpdateUserProfileData {
+	uiapi: {
+		UserUpdate: { Record: Record<string, unknown> | null } | null;
+	};
+}
+
+/**
+ * Extensible user-profile fetching and updating via UI API GraphQL — the
+ * Angular port of the React `userProfileApi.ts` module.
+ *
+ * Uses the base app's `DataClient` (which centralizes GraphQL error handling
+ * and routes mutations vs queries), matching the object-search feature's
+ * data-access idiom. Responses are flattened via `flattenGraphQLRecord` for
+ * straightforward form binding.
+ */
+@Injectable({ providedIn: "root" })
+export class UserProfileService {
+	private readonly client = inject(DataClient);
+
+	/**
+	 * Fetches the user profile via GraphQL and returns a flattened record.
+	 * @param userId - The Salesforce User Id.
+	 * @param fields - GraphQL field selection (defaults to the full profile).
+	 */
+	async fetchUserProfile<T>(userId: string, fields: string = USER_PROFILE_FIELDS_FULL): Promise<T> {
+		const data = await this.client.execute<GetUserProfileData, { userId: string }>(
+			getUserProfileQuery(fields),
+			{ userId },
+		);
+		return flattenGraphQLRecord<T>(data.uiapi?.query?.User?.edges?.[0]?.node);
+	}
+
+	/**
+	 * Fetches the user's associated contact record ID via GraphQL and returns a
+	 * flattened record.
+	 * @param userId - The Salesforce User Id.
+	 */
+	async fetchUserContact<T>(userId: string): Promise<T> {
+		return this.fetchUserProfile<T>(userId, USER_CONTACT_FIELDS);
+	}
+
+	/**
+	 * Updates the user profile via GraphQL and returns the flattened updated record.
+	 * @param userId - The Salesforce User Id.
+	 * @param values - The field values to update.
+	 */
+	async updateUserProfile<T>(userId: string, values: Record<string, unknown>): Promise<T> {
+		const data = await this.client.execute<UpdateUserProfileData, { input: unknown }>(
+			getUserProfileMutation(USER_PROFILE_FIELDS_FULL),
+			{ input: { Id: userId, User: { ...values } } },
+		);
+		return flattenGraphQLRecord<T>(data.uiapi?.UserUpdate?.Record);
+	}
+}

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/app.config.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { provideNativeDateAdapter as provideBrnNativeDateAdapter } from '@spartan-ng/brain/date-time';
+import { provideNgIconsConfig } from '@ng-icons/core';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+	providers: [
+		provideBrowserGlobalErrorListeners(),
+		provideRouter(routes),
+		provideBrnNativeDateAdapter(),
+		provideNgIconsConfig({ size: '1rem' }),
+	],
+};

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/app.html

@@ -0,0 +1 @@
+<router-outlet />

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/app.routes.ts

@@ -0,0 +1,66 @@
+import { Routes } from '@angular/router';
+import { HomeComponent } from './pages/home/home';
+import { NotFoundComponent } from './pages/not-found/not-found';
+import { AuthAppLayoutComponent } from "./features/authentication/auth-layout/auth-layout";
+import { authGuard } from "./features/authentication/auth/auth.guard";
+import { LoginPageComponent } from "./pages/login/login-page";
+import { RegisterPageComponent } from "./pages/register/register-page";
+import { ForgotPasswordPageComponent } from "./pages/forgot-password/forgot-password-page";
+import { ResetPasswordPageComponent } from "./pages/reset-password/reset-password-page";
+import { ProfilePageComponent } from "./pages/profile/profile-page";
+import { ChangePasswordPageComponent } from "./pages/change-password/change-password-page";
+
+export const routes: Routes = [
+  {
+    path: "",
+    component: AuthAppLayoutComponent,
+    children: [
+      {
+        path: '',
+        component: HomeComponent
+      },
+      {
+        path: "login",
+        component: LoginPageComponent,
+        title: "Login | MyApp",
+        data: { showInNavigation: false, label: "Login" }
+      },
+      {
+        path: "register",
+        component: RegisterPageComponent,
+        title: "Create Account | MyApp",
+        data: { showInNavigation: false }
+      },
+      {
+        path: "forgot-password",
+        component: ForgotPasswordPageComponent,
+        title: "Recover Password | MyApp",
+        data: { showInNavigation: false }
+      },
+      {
+        path: "reset-password",
+        component: ResetPasswordPageComponent,
+        title: "Reset Password | MyApp",
+        data: { showInNavigation: false }
+      },
+      {
+        path: "profile",
+        component: ProfilePageComponent,
+        canActivate: [authGuard],
+        title: "My Profile | MyApp",
+        data: { showInNavigation: false, label: "Profile" }
+      },
+      {
+        path: "change-password",
+        component: ChangePasswordPageComponent,
+        canActivate: [authGuard],
+        title: "Change Password | MyApp",
+        data: { showInNavigation: false }
+      },
+      {
+        path: '**',
+        component: NotFoundComponent
+      }
+    ]
+  }
+];

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/app.spec.ts

@@ -0,0 +1,18 @@
+import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { App } from './app';
+
+describe('App', () => {
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports: [App],
+			providers: [provideRouter([])],
+		}).compileComponents();
+	});
+
+	it('should create the app', () => {
+		const fixture = TestBed.createComponent(App);
+		const app = fixture.componentInstance;
+		expect(app).toBeTruthy();
+	});
+});

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/app.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+	selector: 'app-root',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [RouterOutlet],
+	templateUrl: './app.html',
+})
+export class App {}

package/dist/force-app/main/default/uiBundles/feature-angular-authentication/src/app/components/layout/app-layout/app-layout.html

@@ -0,0 +1,51 @@
+<nav class="bg-white border-b border-gray-200">
+	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+		<div class="flex justify-between items-center h-16">
+			<a routerLink="/" class="text-xl font-semibold text-gray-900"> Angular App </a>
+			<button
+				(click)="toggleMenu()"
+				class="p-2 rounded-md text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+				aria-label="Toggle menu"
+				aria-controls="app-layout-nav-menu"
+				[attr.aria-expanded]="isOpen()"
+			>
+				<div class="w-6 h-6 flex flex-col justify-center space-y-1.5">
+					<span
+						class="block h-0.5 w-6 bg-current transition-all"
+						[class.rotate-45]="isOpen()"
+						[class.translate-y-2]="isOpen()"
+					></span>
+					<span
+						class="block h-0.5 w-6 bg-current transition-all"
+						[class.opacity-0]="isOpen()"
+					></span>
+					<span
+						class="block h-0.5 w-6 bg-current transition-all"
+						[class.-rotate-45]="isOpen()"
+						[class.-translate-y-2]="isOpen()"
+					></span>
+				</div>
+			</button>
+		</div>
+		@if (isOpen()) {
+			<div id="app-layout-nav-menu" class="pb-4">
+				<ul class="flex flex-col space-y-2 list-none">
+					@for (item of navigationItems; track item.path) {
+						<li>
+							<a
+								[routerLink]="item.path"
+								routerLinkActive="bg-blue-100 text-blue-700"
+								[routerLinkActiveOptions]="{ exact: true }"
+								(click)="closeMenu()"
+								class="block px-3 py-2 rounded-md text-sm font-medium transition-colors text-gray-700 hover:bg-gray-100"
+							>
+								{{ item.label }}
+							</a>
+						</li>
+					}
+				</ul>
+			</div>
+		}
+	</div>
+</nav>
+<router-outlet />