weg-shared-layout 0.0.24 → 0.0.25

package/docs/angular-integration-guide.md

@@ -51,7 +51,7 @@ Copy this list while integrating:
 | Tag | Purpose |
 | --- | --- |
 | `<weg-header>` | Header — bundled logo, CMS nav (signed out), built-in nav (signed in), Sign in / Manage Account / Sign out |
-| `<weg-footer>` | Footer — social links, columns, credits, copyright |
+| `<weg-footer>` | Footer — social links, menu, credits, copyright |
 
 They are **presentational**: they **do not** fetch data. Your Angular app loads layout JSON and passes it in.
 
@@ -156,8 +156,6 @@ Create `src/app/auth.ts`. Host apps own sign-in/out URLs — do not import auth
 
 ```ts
 // src/app/auth.ts
-export const HEADER_LOGO_HREF = 'https://www.warwickemploymentgroup.com/';
-
 export const HEADER_SIGN_IN = {
   label: 'Sign in',
   href: 'https://account.warwickemploymentgroup.com/account/login',
@@ -167,7 +165,7 @@ export const HEADER_SIGN_IN = {
 export const ACCOUNT_LOGIN_HREF = HEADER_SIGN_IN.href;
 ```
 
-You will merge `HEADER_LOGO_HREF` and `HEADER_SIGN_IN` into layout data in Step 6/7.
+If your API omits a Sign in entry in `header.menu`, append `HEADER_SIGN_IN` when building layout — see Step 7.
 
 ---
 
@@ -210,7 +208,7 @@ import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import layoutFixture from 'weg-shared-layout/dummy-data.json';
 
-import { ACCOUNT_LOGIN_HREF, HEADER_LOGO_HREF, HEADER_SIGN_IN } from './auth';
+import { ACCOUNT_LOGIN_HREF, HEADER_SIGN_IN } from './auth';
 import type { LayoutData } from './layout.types';
 
 @Component({
@@ -221,14 +219,7 @@ import type { LayoutData } from './layout.types';
 })
 export class App {
   /** Same object for header and footer */
-  layoutData: LayoutData = {
-    ...layoutFixture,
-    header: {
-      ...layoutFixture.header,
-      logoHref: HEADER_LOGO_HREF,
-      signIn: HEADER_SIGN_IN,
-    },
-  };
+  layoutData: LayoutData = layoutFixture;
 
   signedIn = false;
   userName?: string;
@@ -243,8 +234,7 @@ export class App {
       return;
     }
 
-    window.location.href =
-      this.layoutData.header?.signIn?.href ?? HEADER_SIGN_IN.href;
+    window.location.href = HEADER_SIGN_IN.href;
   }
 }
 ```
@@ -287,7 +277,7 @@ import { Component, CUSTOM_ELEMENTS_SCHEMA, signal } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import layoutFixture from 'weg-shared-layout/dummy-data.json';
 
-import { ACCOUNT_LOGIN_HREF, HEADER_LOGO_HREF, HEADER_SIGN_IN } from './auth';
+import { ACCOUNT_LOGIN_HREF, HEADER_SIGN_IN } from './auth';
 import type { LayoutData } from './layout.types';
 
 @Component({
@@ -297,14 +287,7 @@ import type { LayoutData } from './layout.types';
   templateUrl: './app.html',
 })
 export class App {
-  readonly layoutData = signal<LayoutData>({
-    ...layoutFixture,
-    header: {
-      ...layoutFixture.header,
-      logoHref: HEADER_LOGO_HREF,
-      signIn: HEADER_SIGN_IN,
-    },
-  });
+  readonly layoutData = signal<LayoutData>(layoutFixture);
 
   readonly signedIn = signal(false);
   readonly userName = signal<string | undefined>(undefined);
@@ -320,8 +303,7 @@ export class App {
       return;
     }
 
-    window.location.href =
-      this.layoutData().header?.signIn?.href ?? HEADER_SIGN_IN.href;
+    window.location.href = HEADER_SIGN_IN.href;
   }
 }
 ```
@@ -358,7 +340,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { map, Observable } from 'rxjs';
 
-import { HEADER_LOGO_HREF, HEADER_SIGN_IN } from './auth';
+import { HEADER_SIGN_IN } from './auth';
 import type { LayoutData } from './layout.types';
 
 @Injectable({ providedIn: 'root' })
@@ -368,18 +350,21 @@ export class LayoutService {
   /** CMS returns full { header, footer } object */
   loadLayout(): Observable<LayoutData> {
     return this.http.get<LayoutData>('/api/layout').pipe(
-      map((data) => this.withAppHeaderOverrides(data)),
+      map((data) => this.ensureSignInMenu(data)),
     );
   }
 
-  private withAppHeaderOverrides(data: LayoutData): LayoutData {
+  private ensureSignInMenu(data: LayoutData): LayoutData {
+    const menu = data.header?.menu ?? [];
+    const hasSignIn = menu.some(
+      (item) =>
+        !item.items?.length &&
+        item.label?.trim().toLowerCase() === 'sign in',
+    );
+    if (hasSignIn) return data;
     return {
       ...data,
-      header: {
-        ...data.header,
-        logoHref: HEADER_LOGO_HREF,
-        signIn: HEADER_SIGN_IN,
-      },
+      header: { ...data.header, menu: [...menu, HEADER_SIGN_IN] },
     };
   }
 }
@@ -527,14 +512,14 @@ export class App {
 | Binding | Web component | Purpose |
 | --- | --- | --- |
 | `[layout]="..."` | `layout` | CMS nav when **signed out** |
-| `[signedIn]="..."` | `signed-in` | `true` → built-in signed-in nav (ignores CMS dropdowns/links/signIn) |
+| `[signedIn]="..."` | `signed-in` | `true` → built-in signed-in nav (ignores CMS `header.menu`) |
 | `[userName]="..."` | `user-name` | First name on Manage Account when signed in |
 | `(wegAuthClick)="..."` | `wegAuthClick` | `detail.action`: `'sign-in'` \| `'sign-out'` |
 
 **Signed out** (`signedIn === false`):
 
-- Uses `layout.header.dropdowns`, `links`, `signIn`
-- Logo links to `layout.header.logoHref` (default WEG home if omitted); logo **image** is bundled
+- Uses `layout.header.menu` — dropdown groups (`items`) and flat links (`href`), including Sign in
+- Logo **image** from `layout.header.logoSrc` (bundled if omitted); logo **link** always goes to WEG home
 
 **Signed in** (`signedIn === true`):
 
@@ -570,19 +555,16 @@ Both tags accept one **`layout`** object with optional `header` and `footer` key
 ### TypeScript shape
 
 ```ts
-type LayoutLink = { label: string; href: string };
-
-type LayoutHeaderDropdown = {
+type LayoutLink = {
   label: string;
-  items: LayoutLink[];
+  href?: string;
+  target?: '_blank' | '_self' | '_parent' | '_top';
+  items?: LayoutLink[];
 };
 
 type LayoutHeaderData = {
-  logoHref?: string;
-  dropdowns?: LayoutHeaderDropdown[];
-  links?: LayoutLink[];
-  signIn?: LayoutLink;
-  signOut?: { label: string; href?: string };
+  logoSrc?: string;
+  menu?: LayoutLink[];
 };
 
 type LayoutFooterSocialLink = {
@@ -590,18 +572,16 @@ type LayoutFooterSocialLink = {
   href: string;
 };
 
-type LayoutFooterColumn = {
-  links: LayoutLink[];
+type LayoutFooterData = {
+  social?: LayoutFooterSocialLink[];
+  menu?: LayoutLink[][];
+  credits?: string;
+  copyright?: string;
 };
 
 type LayoutData = {
   header?: Partial<LayoutHeaderData>;
-  footer?: Partial<{
-    social: LayoutFooterSocialLink[];
-    columns: LayoutFooterColumn[];
-    credits: string;
-    copyright: string;
-  }>;
+  footer?: Partial<LayoutFooterData>;
 };
 ```
 
@@ -616,27 +596,25 @@ Full example JSON:
 ```json
 {
   "header": {
-    "logoHref": "https://www.warwickemploymentgroup.com/",
-    "dropdowns": [
+    "logoSrc": "https://www.warwickemploymentgroup.com/assets/weg-logo.svg",
+    "menu": [
       {
         "label": "Find a job",
         "items": [
           { "label": "Graduates", "href": "https://example.com/jobs/graduates" }
         ]
-      }
-    ],
-    "links": [
+      },
       { "label": "Career advice", "href": "https://example.com/career-advice" },
-      { "label": "Register", "href": "https://example.com/register" }
-    ],
-    "signIn": { "label": "Sign in", "href": "https://example.com/login" }
+      { "label": "Register", "href": "https://example.com/register" },
+      { "label": "Sign in", "href": "https://example.com/login" }
+    ]
   },
   "footer": {
     "social": [
       { "platform": "LinkedIn", "href": "https://linkedin.com/company/example" }
     ],
-    "columns": [
-      { "links": [{ "label": "About WEG", "href": "/about" }] }
+    "menu": [
+      [{ "label": "About WEG", "href": "/about" }]
     ],
     "credits": "Warwick Employment Group …",
     "copyright": "Copyright © Warwick Employment Group."
@@ -648,17 +626,14 @@ Full example JSON:
 
 | Field | Used when | Notes |
 | --- | --- | --- |
-| `header.logoHref` | Signed **out** | Logo link; image is bundled |
-| `header.dropdowns` | Signed **out** | `{ label, items[] }` |
-| `header.links` | Signed **out** | Flat nav links |
-| `header.signIn` | Signed **out** | Sign in button |
-| `header.signOut` | Rarely | Signed-in sign-out uses built-in URLs |
+| `header.logoSrc` | Signed **out** | Logo image URL; bundled if omitted |
+| `header.menu` | Signed **out** | Unified nav — groups use `items[]`, flat links use `href` |
 | `footer.social` | Always | `platform` must be `LinkedIn`, `Instagram`, `TikTok`, or `YouTube` exactly |
-| `footer.columns` | Always | `{ links: [...] }[]` |
-| `footer.credits` | Always | Text below columns |
+| `footer.menu` | Always | `LayoutLink[][]` — one link array per column |
+| `footer.credits` | Always | Text below menu |
 | `footer.copyright` | Always | Copyright line |
 
-When **`signedIn` is true**, `<weg-header>` **ignores** `dropdowns`, `links`, and `signIn` from layout.
+When **`signedIn` is true**, `<weg-header>` **ignores** `header.menu` from layout.
 
 ### Property binding vs attributes
 
@@ -675,7 +650,7 @@ The component can parse a JSON **string** for `layout`, but `[layout]="object"`
 ### Invalid entries are silently dropped
 
 - Links without `label` or `href` are skipped
-- Dropdowns with empty `items` are skipped
+- Menu groups with empty `items` are skipped
 - Unknown social `platform` values are skipped
 - Malformed input → empty sections (no throw) — inspect `$0.layout` in DevTools
 
@@ -703,19 +678,18 @@ const navLinks = [
 
 | Field | Array element shape |
 | --- | --- |
-| `header.dropdowns` | `{ label, items: { label, href }[] }` |
-| `header.links` | `{ label, href }` |
+| `header.menu` | `LayoutLink` — group with `items[]` or flat link with `href` |
 | `footer.social` | `{ platform, href }` |
-| `footer.columns` | `{ links: { label, href }[] }` |
+| `footer.menu` | `{ label, href }[]` per column |
 
-**`src/app/layout.service.ts` — merge multiple endpoints:**
+**`src/app/layout.service.ts` — merge multiple endpoints into one menu:**
 
 ```ts
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { forkJoin, map, Observable } from 'rxjs';
 
-import { HEADER_LOGO_HREF, HEADER_SIGN_IN } from './auth';
+import { HEADER_SIGN_IN } from './auth';
 import type { LayoutData } from './layout.types';
 
 @Injectable({ providedIn: 'root' })
@@ -724,18 +698,17 @@ export class LayoutService {
 
   loadLayoutFromParts(): Observable<LayoutData> {
     return forkJoin({
-      dropdowns: this.http.get<NonNullable<LayoutData['header']>['dropdowns']>(
-        '/api/nav/dropdowns',
+      menuGroups: this.http.get<NonNullable<LayoutData['header']>['menu']>(
+        '/api/nav/menu',
+      ),
+      flatLinks: this.http.get<NonNullable<LayoutData['header']>['menu']>(
+        '/api/nav/links',
       ),
-      links: this.http.get<NonNullable<LayoutData['header']>['links']>('/api/nav/links'),
       footer: this.http.get<LayoutData['footer']>('/api/footer'),
     }).pipe(
-      map(({ dropdowns, links, footer }) => ({
+      map(({ menuGroups, flatLinks, footer }) => ({
         header: {
-          logoHref: HEADER_LOGO_HREF,
-          dropdowns,
-          links,
-          signIn: HEADER_SIGN_IN,
+          menu: [...menuGroups, ...flatLinks, HEADER_SIGN_IN],
         },
         footer,
       })),
@@ -771,29 +744,30 @@ import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import layoutFixture from 'weg-shared-layout/dummy-data.json';
 
-import { HEADER_LOGO_HREF, HEADER_SIGN_IN } from './auth';
+import { HEADER_SIGN_IN } from './auth';
 import type { LayoutData } from './layout.types';
 
 @Injectable({ providedIn: 'root' })
 export class LayoutService {
-  private readonly layoutSubject = new BehaviorSubject(
-    this.withAppHeaderOverrides(layoutFixture),
-  );
+  private readonly layoutSubject = new BehaviorSubject<LayoutData>(layoutFixture);
 
   readonly layout$ = this.layoutSubject.asObservable();
 
   setLayout(data: LayoutData): void {
-    this.layoutSubject.next(this.withAppHeaderOverrides(data));
+    this.layoutSubject.next(this.ensureSignInMenu(data));
   }
 
-  private withAppHeaderOverrides(data: LayoutData): LayoutData {
+  private ensureSignInMenu(data: LayoutData): LayoutData {
+    const menu = data.header?.menu ?? [];
+    const hasSignIn = menu.some(
+      (item) =>
+        !item.items?.length &&
+        item.label?.trim().toLowerCase() === 'sign in',
+    );
+    if (hasSignIn) return data;
     return {
       ...data,
-      header: {
-        ...data.header,
-        logoHref: HEADER_LOGO_HREF,
-        signIn: HEADER_SIGN_IN,
-      },
+      header: { ...data.header, menu: [...menu, HEADER_SIGN_IN] },
     };
   }
 }
@@ -809,11 +783,11 @@ Stencil watches the `layout` **property**. Assign a **new object reference** whe
 // Good
 this.layoutData = {
   ...this.layoutData,
-  header: { ...this.layoutData.header, links: newLinks },
+  header: { ...this.layoutData.header, menu: newMenu },
 };
 
 // Risky — may not re-render
-this.layoutData.header!.links!.push(newLink);
+this.layoutData.header!.menu!.push(newLink);
 ```
 
 With `OnPush` and plain fields, call `ChangeDetectorRef.markForCheck()` after updates.
@@ -926,7 +900,11 @@ const header = fixture.nativeElement.querySelector('weg-header') as HTMLElement
   layout?: LayoutData;
 };
 
-expect(header.layout?.header?.signIn).toEqual(HEADER_SIGN_IN);
+expect(
+  header.layout?.header?.menu?.some(
+    (item) => item.label === 'Sign in' && item.href === HEADER_SIGN_IN.href,
+  ),
+).toBe(true);
 ```
 
 Full example: [weg-angular-demo `app.spec.ts`](https://github.com/jobsac/weg-angular-demo/blob/main/src/app/app.spec.ts).
@@ -968,7 +946,7 @@ External `https://` links open in a new tab automatically.
 | `'weg-header' is not a known element` | Missing schema | `CUSTOM_ELEMENTS_SCHEMA` on the component that owns the template |
 | Header/footer completely empty | Not registered | `defineCustomElements()` before bootstrap, or tag side-effect imports |
 | Tags render, nav empty | Wrong `layout` | `[layout]="..."` with object `{ header?, footer? }` |
-| Passed array to `[layout]` | Top-level must be object | `{ header: { links: myArray } }` — see [Optional: API returns separate arrays](#optional-api-returns-separate-arrays-not-one-layout-object) |
+| Passed array to `[layout]` | Top-level must be object | `{ header: { menu: myArray } }` — see [Optional: API returns separate arrays](#optional-api-returns-separate-arrays-not-one-layout-object) |
 | Auth always Sign in | `signedIn` not bound / false | Bind session; set `true` when logged in |
 | Generic Manage Account | `userName` missing | Pass first name when `signedIn` is true |
 | Layout changes ignored | In-place mutation | New object reference |
@@ -976,7 +954,7 @@ External `https://` links open in a new tab automatically.
 | Tests fail | Elements undefined | `defineCustomElements()` in `beforeAll` |
 | SSR `document is not defined` | Loader on server | `typeof window !== 'undefined'` guard |
 | Missing social icons | Bad `platform` | Exactly `LinkedIn`, `Instagram`, `TikTok`, `YouTube` |
-| Missing dropdown | Normalization | Non-empty `label` and valid `items` |
+| Missing menu item | Normalization | Non-empty `label` and valid `items` or `href` |
 
 ### DevTools
 
@@ -996,7 +974,7 @@ $0.userName
 | --- | --- |
 | `src/main.ts` | `defineCustomElements()` then bootstrap |
 | `tsconfig.app.json` | `resolveJsonModule: true` |
-| `src/app/auth.ts` | `HEADER_SIGN_IN`, `ACCOUNT_LOGIN_HREF`, `HEADER_LOGO_HREF` |
+| `src/app/auth.ts` | `HEADER_SIGN_IN`, `ACCOUNT_LOGIN_HREF` |
 | `src/app/layout.types.ts` | `export type LayoutData = typeof layoutFixture` |
 | `src/app/layout.service.ts` | HTTP / API mapping (Step 7, optional arrays) |
 | `src/app/app.ts` | Shell: schema, layout, auth handler |

package/docs/angular.md

@@ -19,7 +19,7 @@ Reference demo: [weg-angular-demo](https://github.com/jobsac/weg-angular-demo).
 | Tag | Purpose |
 | --- | --- |
 | `<weg-header>` | Header — CMS nav (signed out), built-in nav (signed in), auth |
-| `<weg-footer>` | Footer — social, columns, credits, copyright |
+| `<weg-footer>` | Footer — social, menu, credits, copyright |
 
 Both accept the same `layout` payload ([`dummy-data.json`](../src/assets/dummy-data.json) or your API). `<weg-header>` also accepts **`signed-in`**, **`user-name`**, and emits **`wegAuthClick`**.
 
@@ -60,8 +60,6 @@ Add `schemas: [CUSTOM_ELEMENTS_SCHEMA]` to every `@Component` (or `@NgModule`) w
 
 ```ts
 // src/app/auth.ts
-export const HEADER_LOGO_HREF = 'https://www.warwickemploymentgroup.com/';
-
 export const HEADER_SIGN_IN = {
   label: 'Sign in',
   href: 'https://account.warwickemploymentgroup.com/account/login',
@@ -89,7 +87,7 @@ import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import layoutFixture from 'weg-shared-layout/dummy-data.json';
 
-import { ACCOUNT_LOGIN_HREF, HEADER_LOGO_HREF, HEADER_SIGN_IN } from './auth';
+import { ACCOUNT_LOGIN_HREF, HEADER_SIGN_IN } from './auth';
 
 @Component({
   selector: 'app-root',
@@ -98,14 +96,7 @@ import { ACCOUNT_LOGIN_HREF, HEADER_LOGO_HREF, HEADER_SIGN_IN } from './auth';
   templateUrl: './app.html',
 })
 export class App {
-  layoutData = {
-    ...layoutFixture,
-    header: {
-      ...layoutFixture.header,
-      logoHref: HEADER_LOGO_HREF,
-      signIn: HEADER_SIGN_IN,
-    },
-  };
+  layoutData = layoutFixture;
 
   signedIn = false;
   userName?: string;
@@ -120,8 +111,7 @@ export class App {
       return;
     }
 
-    window.location.href =
-      this.layoutData.header?.signIn?.href ?? HEADER_SIGN_IN.href;
+    window.location.href = HEADER_SIGN_IN.href;
   }
 }
 ```
@@ -152,7 +142,7 @@ import { Component, CUSTOM_ELEMENTS_SCHEMA, signal } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import layoutFixture from 'weg-shared-layout/dummy-data.json';
 
-import { ACCOUNT_LOGIN_HREF, HEADER_LOGO_HREF, HEADER_SIGN_IN } from './auth';
+import { ACCOUNT_LOGIN_HREF, HEADER_SIGN_IN } from './auth';
 import type { LayoutData } from './layout.types';
 
 @Component({
@@ -162,14 +152,7 @@ import type { LayoutData } from './layout.types';
   templateUrl: './app.html',
 })
 export class App {
-  readonly layoutData = signal<LayoutData>({
-    ...layoutFixture,
-    header: {
-      ...layoutFixture.header,
-      logoHref: HEADER_LOGO_HREF,
-      signIn: HEADER_SIGN_IN,
-    },
-  });
+  readonly layoutData = signal<LayoutData>(layoutFixture);
 
   readonly signedIn = signal(false);
   readonly userName = signal<string | undefined>(undefined);
@@ -185,8 +168,7 @@ export class App {
       return;
     }
 
-    window.location.href =
-      this.layoutData().header?.signIn?.href ?? HEADER_SIGN_IN.href;
+    window.location.href = HEADER_SIGN_IN.href;
   }
 }
 ```
@@ -211,7 +193,7 @@ HTTP with signals: **[Step 7B](./angular-integration-guide.md#step-7b--http-with
 
 | Input / output | Binding (5A) | Binding (5B) | Notes |
 | --- | --- | --- | --- |
-| CMS nav | `[layout]="layoutData"` | `[layout]="layoutData()"` | `dropdowns`, `links`, `signIn` when signed out |
+| CMS nav | `[layout]="layoutData"` | `[layout]="layoutData()"` | `header.menu` — groups (`items`) and flat links (`href`) when signed out |
 | Session state | `[signedIn]="signedIn"` | `[signedIn]="signedIn()"` | `true` → built-in signed-in nav |
 | User name | `[userName]="userName"` | `[userName]="userName()"` | Manage Account label when signed in |
 | Auth click | `(wegAuthClick)="onAuthClick($event)"` | `detail.action`: `'sign-in'` \| `'sign-out'` |
@@ -219,7 +201,7 @@ HTTP with signals: **[Step 7B](./angular-integration-guide.md#step-7b--http-with
 
 **Signed-in nav (built in):** Find a job, Dashboard, Manage Account, Sign out.
 
-Logo **image** is bundled. Logo **link** uses `layout.header.logoHref` when signed out.
+Logo **image** uses `layout.header.logoSrc` (bundled if omitted). Logo **link** always goes to WEG home.
 
 ## Footer
 

package/docs/nextjs.md

@@ -7,7 +7,7 @@ Guide for **Next.js 13+ App Router** (`app/` directory). For Vite/CRA-style clie
 | Tag | Purpose |
 | --- | --- |
 | `<weg-header>` | Site header — bundled logo, CMS nav (signed out), built-in nav (signed in), Sign in / Manage Account / Sign out |
-| `<weg-footer>` | Site footer — social, columns, legal text |
+| `<weg-footer>` | Site footer — social, menu, legal text |
 
 Both accept **`layout`** (JSON string recommended in Next). `<weg-header>` also accepts **`signed-in`**, **`user-name`**, and emits **`wegAuthClick`**.
 
@@ -79,10 +79,12 @@ defineCustomElements();
 
 type LayoutData = {
   header?: {
-    logoHref?: string;
-    dropdowns?: { label: string; items: { label: string; href: string }[] }[];
-    links?: { label: string; href: string }[];
-    signIn?: { label: string; href: string };
+    logoSrc?: string;
+    menu?: {
+      label: string;
+      href?: string;
+      items?: { label: string; href: string }[];
+    }[];
   };
 };
 
@@ -107,7 +109,7 @@ export function Header({
         return;
       }
 
-      window.location.href = layout.header?.signIn?.href ?? HEADER_SIGN_IN.href;
+      window.location.href = HEADER_SIGN_IN.href;
     },
     [layout, onSignedInChange],
   );
@@ -234,9 +236,8 @@ Wire **`signedIn`** and **`userName`** from your auth provider (session hook / c
 
 | API | Signed out | Signed in |
 | --- | --- | --- |
-| `layout.header.dropdowns` / `links` | CMS nav rendered | Ignored — built-in nav used |
-| `layout.header.signIn` | Sign in button | Not shown |
-| `layout.header.logoHref` | Logo link target | Built-in WEG home URL |
+| `layout.header.menu` | CMS nav rendered (groups + flat links incl. Sign in) | Ignored — built-in nav used |
+| `layout.header.logoSrc` | Logo image URL (bundled if omitted) | Built-in bundled logo |
 | `signed-in` prop | `false` | `true` — session flag from host app |
 | `user-name` prop | — | User's first name on Manage Account |
 | `wegAuthClick` event | `'sign-in'` on Sign in click | `'sign-out'` on Sign out click |
@@ -244,7 +245,7 @@ Wire **`signedIn`** and **`userName`** from your auth provider (session hook / c
 
 **Signed-in nav (built into the component):** Find a job, Dashboard, Manage Account, Sign out.
 
-The logo **image** is bundled. The logo **link** uses `layout.header.logoHref` when signed out.
+The logo **image** uses `layout.header.logoSrc` when signed out (bundled if omitted). The logo **link** always goes to WEG home.
 
 ## Passing `layout` — quick reference
 

package/docs/react.md

@@ -7,7 +7,7 @@ Guide for **client-rendered** React apps (Vite, Create React App, etc.). If you
 | Tag | Purpose |
 | --- | --- |
 | `<weg-header>` | Site header — bundled logo, CMS nav (signed out), built-in nav (signed in), Sign in / Manage Account / Sign out |
-| `<weg-footer>` | Site footer — social links, columns, credits, copyright |
+| `<weg-footer>` | Site footer — social links, menu, credits, copyright |
 
 Both are **presentational** [Stencil](https://stenciljs.com/) Web Components. They **do not fetch data** — your app passes a **`layout`** payload (API, CMS, or [`dummy-data.json`](../src/assets/dummy-data.json)).
 
@@ -89,7 +89,7 @@ export const ACCOUNT_LOGIN_HREF = HEADER_SIGN_IN.href;
 
 ### Signed out
 
-Pass CMS/API layout with `dropdowns`, `links`, and `signIn`. Use [`dummy-data.json`](../src/assets/dummy-data.json) for the full shape. Keep auth URLs in a local file:
+Pass CMS/API layout with unified `header.menu`. Use [`dummy-data.json`](../src/assets/dummy-data.json) for the full shape — dropdown groups use `items`, flat links and Sign in use `href`. Keep auth URLs in a local file:
 
 ```ts
 // auth.ts (host app)
@@ -124,7 +124,7 @@ export function SiteHeader() {
       return;
     }
 
-    window.location.href = layout.header.signIn?.href ?? HEADER_SIGN_IN.href;
+    window.location.href = HEADER_SIGN_IN.href;
   }, []);
 
   return (

package/docs/vanilla.md

@@ -5,7 +5,7 @@
 | Tag | Purpose |
 | --- | --- |
 | `<weg-header>` | Site header — bundled logo, CMS nav (signed out), built-in nav (signed in), Sign in / Manage Account / Sign out |
-| `<weg-footer>` | Site footer — social links, columns, credits, copyright |
+| `<weg-footer>` | Site footer — social links, menu, credits, copyright |
 
 Both components are **presentational**: they do **not** fetch data. Pass the same `layout` payload to each.
 
@@ -53,17 +53,15 @@ element.layout = layoutObject;
 Or pass a JSON **string** on the `layout` attribute:
 
 ```html
-<weg-header layout='{"header":{"links":[]}}'></weg-header>
+<weg-header layout='{"header":{"menu":[]}}'></weg-header>
 ```
 
 ## Header layout fields (signed out)
 
 | Field | Purpose |
 | --- | --- |
-| `header.logoHref` | Logo link target (defaults to WEG home) |
-| `header.dropdowns` | Dropdown menus from CMS |
-| `header.links` | Flat nav links from CMS |
-| `header.signIn` | Sign in button `{ label, href }` |
+| `header.logoSrc` | Logo image URL (bundled if omitted) |
+| `header.menu` | Unified nav — groups with `items[]`, flat links with `href` (incl. Sign in) |
 
 See [`dummy-data.json`](../src/assets/dummy-data.json) for production URL examples.
 
@@ -82,7 +80,7 @@ export const ACCOUNT_LOGIN_HREF = HEADER_SIGN_IN.href;
 
 ### Signed out
 
-Renders `dropdowns`, `links`, and `signIn` from `layout`.
+Renders `header.menu` from `layout` — dropdown groups, flat links, and the Sign in entry (label **Sign in** fires `wegAuthClick`).
 
 ### Signed in
 
@@ -110,16 +108,16 @@ header.addEventListener('wegAuthClick', (event) => {
     return;
   }
 
-  window.location.href = layout.header.signIn?.href ?? HEADER_SIGN_IN.href;
+  window.location.href = HEADER_SIGN_IN.href;
 });
 ```
 
 | `event.detail.action` | Default behaviour if not prevented |
 | --- | --- |
-| `'sign-in'` | Browser follows `signIn.href` |
+| `'sign-in'` | Browser follows the Sign in menu entry's `href` |
 | `'sign-out'` | Redirects to built-in sign-out URL |
 
-Logo **image** is bundled. Logo **link** uses `layout.header.logoHref` when signed out.
+Logo **image** uses `header.logoSrc` (bundled if omitted). Logo **link** always goes to WEG home.
 
 ## Without a bundler
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "weg-shared-layout",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "description": "Shared layout Web Components built with Stencil",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",