feat(shared-ui): user menu dropdown + integration on portal-shell + portal-admin (#149)
## Summary
PR 1 of 3 from the user-menu / profile / cross-app-link chantier per the agreed staging:
| PR | Périmètre |
| --- | --- |
| **PR 1 (this one)** | Shared `UserMenu` dropdown component + integration on `portal-shell` and `portal-admin`; anonymous Sign-in button moves to `rounded-md`. |
| PR 2 | `/profile` pages on both apps. |
| PR 3 | `/api/me/capabilities` endpoint + real role surfacing on the sidebar widget + cross-app links in the menu (both directions). |
Lands the gitea / github-shaped avatar dropdown so admins and end users get the familiar "Signed in as / Profile / Settings / Sign out" pattern. Future entries (cross-app link, role-based visibility) plug into the same `items` input without touching the shared component.
## What lands
### Shared component — [`libs/shared/ui/src/lib/user-menu/`](libs/shared/ui/src/lib/user-menu/)
```html
<lib-user-menu
[displayName]="state.user.displayName"
[username]="state.user.username"
[initials]="initials()"
[items]="userMenuItems"
[signedInAsLabel]="…"
[signOutLabel]="…"
[triggerAriaLabel]="…"
(signOut)="signOut()"
/>
```
- Avatar trigger (initials in a rounded square + chevron-down hint), CDK `cdkMenuTriggerFor` opening the panel in an overlay portal. Same primitives `ThemeSwitcher` and `LocaleSwitcher` already use — keyboard nav, focus management and Escape-to-close come for free.
- Panel layout: "Signed in as" small-caps header → `displayName` → `username` → separator → caller-supplied `items` → separator → dedicated Sign out row at the bottom.
- `UserMenuItem` shape supports `routerLink` (intra-app) **and** `href` (cross-app / external) so PR 3's "Open Portal Admin" entry can land without re-shaping the API.
- Disabled items render as `aria-disabled` rows with a right-aligned badge — same Soon-chip pattern the admin sidebar already uses for not-yet-shipped entries.
- Sign out is **not** an item — it's a hardcoded row that emits a `signOut` output. Avoids special-casing item types and keeps the destructive action visually + structurally distinct.
- Avatar background is driven by `--user-menu-avatar-bg` / `--user-menu-avatar-fg` CSS custom properties so each host header can re-skin without forking the component (portal-admin uses translucent white over the brand-primary-600 header; portal-shell keeps the default brand-primary-500).
### Portal-shell integration — [`apps/portal-shell/src/app/components/header/`](apps/portal-shell/src/app/components/header/)
- Authenticated state in [header.html](apps/portal-shell/src/app/components/header/header.html) swaps the inline avatar + display name + Sign-out button for `<lib-user-menu>`.
- Anonymous Sign-in button moves from `rounded-full` → `rounded-md` per the reference image. Loading + error chips follow for visual consistency with the new square-ish avatar.
- 6 new strings in [`messages.fr.xlf`](apps/portal-shell/src/locale/messages.fr.xlf): `header.userMenu.{profile,settings,signedInAs,signOut,trigger.aria}` + `common.badge.soon`.
### Portal-admin integration — [`apps/portal-admin/src/app/components/header/`](apps/portal-admin/src/app/components/header/)
- Same swap, leaner: the admin header keeps its inline `.btn--primary` / `.btn--secondary` for anonymous + error states (no search bar / notification cluster, per ADR-0020), only the authenticated state goes through the menu.
- Overrides `--user-menu-avatar-bg` / `--user-menu-avatar-fg` in [`header.scss`](apps/portal-admin/src/app/components/header/header.scss) under `.auth-widget lib-user-menu` so the avatar reads on the brand-primary-600 background. No FR labels (no admin locale in v1 per ADR-0020).
## Notes for the reviewer
- **Why `Sign out` outside the `items` array?** It's the only destructive action in the panel + always present + emits an event rather than navigates. Keeping it special-cased lets the `items` API stay tight (`{ label, icon?, routerLink? | href?, disabled?, badge? }`) and gives each app a single typed entry point (`signOut` output) rather than a brittle `items[].action === 'sign-out'` discriminator.
- **Why `data-testid="user-menu"` on the component host?** The shared spec already covers panel internals; each app's spec needs a top-level handle to reach the trigger without coupling to the avatar CSS class. Same pattern as the existing `data-testid="sign-in-button"`.
- **Profile entry points at `/profile` on both apps in this PR.** Portal-shell already has a demo `/profile` route, so the link works; portal-admin will 404 until PR 2 lands the actual page. Interim cost is acceptable given PR 2 lands directly behind this.
- **No ADR for the component.** It's a UI primitive in `libs/shared/ui` — same tier as `Icon`. Promotion criteria, dark-mode, a11y, and i18n all follow the existing ADRs already in force (ADR-0004 + 0016 + 0019).
## Test plan
- [x] `pnpm nx test shared-ui` — **8 specs pass** (was 3, +5 for `UserMenu`).
- [x] `pnpm nx test portal-shell` — **35 specs pass** (was 34, +1 for the new "opens menu" assertion).
- [x] `pnpm nx test portal-admin` — **46 specs pass** (was 45, +1 for the new "opens menu" assertion).
- [x] `pnpm nx run-many -t lint test build --projects=portal-shell,portal-admin,shared-ui,shared-state,feature-auth` — 15/15 tasks green, including the i18n-strict `portal-shell:build:production`.
- [ ] Manual smoke — sign in on portal-shell, confirm the avatar lives at the top right with the dropdown opening on click / Enter / ArrowDown, Profile navigates to `/profile`, Settings appears greyed with a "Soon" badge, Sign out triggers the BFF logout. Repeat on portal-admin (the avatar background should pick the translucent-white override over the brand-primary-600 header).
## What's next
PR 2 picks up directly: builds a real `/profile` page on each app, both reading from `feature-auth`'s `currentUser()` signal.
---------
Co-authored-by: Julien Gautier <julien.gautier@apf.asso.fr>
Reviewed-on: #149
This commit was merged in pull request #149.
This commit is contained in:
@@ -1 +1,2 @@
|
||||
export { Icon, type IconName } from './lib/icon/icon';
|
||||
export { UserMenu, type UserMenuItem } from './lib/user-menu/user-menu';
|
||||
|
||||
@@ -15,6 +15,7 @@ import {
|
||||
Grid2x2,
|
||||
House,
|
||||
LayoutDashboard,
|
||||
LogOut,
|
||||
type LucideIconData,
|
||||
LucideAngularModule,
|
||||
Mail,
|
||||
@@ -24,6 +25,7 @@ import {
|
||||
Settings,
|
||||
Store,
|
||||
Sun,
|
||||
User,
|
||||
UsersRound,
|
||||
Wrench,
|
||||
} from 'lucide-angular';
|
||||
@@ -65,6 +67,7 @@ const ICON_REGISTRY = {
|
||||
'grid-2x2': Grid2x2,
|
||||
home: House,
|
||||
'layout-dashboard': LayoutDashboard,
|
||||
'log-out': LogOut,
|
||||
mail: Mail,
|
||||
monitor: Monitor,
|
||||
moon: Moon,
|
||||
@@ -72,6 +75,7 @@ const ICON_REGISTRY = {
|
||||
settings: Settings,
|
||||
store: Store,
|
||||
sun: Sun,
|
||||
user: User,
|
||||
'users-round': UsersRound,
|
||||
wrench: Wrench,
|
||||
} satisfies Record<string, LucideIconData>;
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
<button
|
||||
type="button"
|
||||
class="user-menu__trigger"
|
||||
[cdkMenuTriggerFor]="userMenu"
|
||||
[attr.aria-label]="triggerAriaLabel()"
|
||||
>
|
||||
<span class="user-menu__avatar" aria-hidden="true">{{ initials() }}</span>
|
||||
<lib-icon name="chevron-down" [size]="14" />
|
||||
</button>
|
||||
|
||||
<ng-template #userMenu>
|
||||
<div cdkMenu class="user-menu__panel" role="menu" [attr.aria-label]="triggerAriaLabel()">
|
||||
<div class="user-menu__header" role="presentation">
|
||||
<span class="user-menu__header-label">{{ signedInAsLabel() }}</span>
|
||||
<strong class="user-menu__header-name">{{ displayName() }}</strong>
|
||||
<span class="user-menu__header-username">{{ username() }}</span>
|
||||
</div>
|
||||
|
||||
@if (items().length > 0) {
|
||||
<div class="user-menu__separator" role="separator"></div>
|
||||
<div class="user-menu__group" role="group">
|
||||
@for (item of items(); track item.label) { @if (item.disabled) {
|
||||
<span class="user-menu__item user-menu__item--disabled" role="menuitem" aria-disabled="true">
|
||||
@if (item.icon) {
|
||||
<span class="user-menu__icon">
|
||||
<lib-icon [name]="item.icon" [size]="16" />
|
||||
</span>
|
||||
}
|
||||
<span class="user-menu__label">{{ item.label }}</span>
|
||||
@if (item.badge) {
|
||||
<span class="user-menu__badge">{{ item.badge }}</span>
|
||||
}
|
||||
</span>
|
||||
} @else if (item.href) {
|
||||
<a cdkMenuItem class="user-menu__item" role="menuitem" [attr.href]="item.href">
|
||||
@if (item.icon) {
|
||||
<span class="user-menu__icon">
|
||||
<lib-icon [name]="item.icon" [size]="16" />
|
||||
</span>
|
||||
}
|
||||
<span class="user-menu__label">{{ item.label }}</span>
|
||||
@if (item.badge) {
|
||||
<span class="user-menu__badge">{{ item.badge }}</span>
|
||||
}
|
||||
</a>
|
||||
} @else if (item.routerLink) {
|
||||
<a cdkMenuItem class="user-menu__item" role="menuitem" [routerLink]="item.routerLink">
|
||||
@if (item.icon) {
|
||||
<span class="user-menu__icon">
|
||||
<lib-icon [name]="item.icon" [size]="16" />
|
||||
</span>
|
||||
}
|
||||
<span class="user-menu__label">{{ item.label }}</span>
|
||||
@if (item.badge) {
|
||||
<span class="user-menu__badge">{{ item.badge }}</span>
|
||||
}
|
||||
</a>
|
||||
} }
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="user-menu__separator" role="separator"></div>
|
||||
<button
|
||||
type="button"
|
||||
cdkMenuItem
|
||||
class="user-menu__item user-menu__item--sign-out"
|
||||
role="menuitem"
|
||||
(click)="signOut.emit()"
|
||||
>
|
||||
<span class="user-menu__icon">
|
||||
<lib-icon name="log-out" [size]="16" />
|
||||
</span>
|
||||
<span class="user-menu__label">{{ signOutLabel() }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</ng-template>
|
||||
@@ -0,0 +1,194 @@
|
||||
// Trigger — avatar (initials in a small square) + chevron. The
|
||||
// outer shape mirrors gitea/github: square-ish with a small chevron
|
||||
// hint. Each host app can recolor the avatar via the
|
||||
// `--user-menu-avatar-bg` / `--user-menu-avatar-fg` CSS variables
|
||||
// so the brand color stays consistent with the surrounding header.
|
||||
.user-menu__trigger {
|
||||
--user-menu-avatar-bg: var(--color-brand-primary-500, #2563eb);
|
||||
--user-menu-avatar-fg: #ffffff;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
min-height: 2.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 0.375rem;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.12s ease-out;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
|
||||
:where(.dark) & {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--color-brand-primary-500, #2563eb);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-menu__avatar {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 0.375rem;
|
||||
background-color: var(--user-menu-avatar-bg);
|
||||
color: var(--user-menu-avatar-fg);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
// Panel — CDK Menu opens this in an overlay portal at the document
|
||||
// root. ViewEncapsulation.None on the component lets these styles
|
||||
// reach it.
|
||||
.user-menu__panel {
|
||||
min-width: 14rem;
|
||||
margin-top: 0.25rem;
|
||||
padding: 0.25rem 0;
|
||||
background-color: #ffffff;
|
||||
color: #111827;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow:
|
||||
0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
||||
0 4px 6px -4px rgba(0, 0, 0, 0.1);
|
||||
|
||||
:where(.dark) & {
|
||||
background-color: #111827;
|
||||
color: #f3f4f6;
|
||||
border-color: #1f2937;
|
||||
box-shadow:
|
||||
0 10px 15px -3px rgba(0, 0, 0, 0.4),
|
||||
0 4px 6px -4px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.user-menu__header {
|
||||
padding: 0.5rem 0.875rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.125rem;
|
||||
}
|
||||
|
||||
.user-menu__header-label {
|
||||
font-size: 0.6875rem;
|
||||
color: #6b7280;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
|
||||
:where(.dark) & {
|
||||
color: #9ca3af;
|
||||
}
|
||||
}
|
||||
|
||||
.user-menu__header-name {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.user-menu__header-username {
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
|
||||
:where(.dark) & {
|
||||
color: #9ca3af;
|
||||
}
|
||||
}
|
||||
|
||||
.user-menu__separator {
|
||||
height: 1px;
|
||||
margin: 0.25rem 0;
|
||||
background-color: #e5e7eb;
|
||||
|
||||
:where(.dark) & {
|
||||
background-color: #1f2937;
|
||||
}
|
||||
}
|
||||
|
||||
.user-menu__group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.125rem 0;
|
||||
}
|
||||
|
||||
.user-menu__item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.875rem;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
background-color: rgba(0, 0, 0, 0.04);
|
||||
outline: none;
|
||||
|
||||
:where(.dark) & {
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-menu__item--disabled {
|
||||
color: #9ca3af;
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
:where(.dark) & {
|
||||
color: #6b7280;
|
||||
}
|
||||
}
|
||||
|
||||
.user-menu__item--sign-out {
|
||||
color: #b91c1c;
|
||||
|
||||
:where(.dark) & {
|
||||
color: #fca5a5;
|
||||
}
|
||||
}
|
||||
|
||||
.user-menu__icon {
|
||||
display: inline-flex;
|
||||
width: 1.125rem;
|
||||
flex: 0 0 1.125rem;
|
||||
}
|
||||
|
||||
.user-menu__label {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.user-menu__badge {
|
||||
font-size: 0.625rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 999px;
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
color: #6b7280;
|
||||
|
||||
:where(.dark) & {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
color: #9ca3af;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { provideRouter } from '@angular/router';
|
||||
import { UserMenu, type UserMenuItem } from './user-menu';
|
||||
|
||||
const ITEMS: readonly UserMenuItem[] = [
|
||||
{ label: 'Profile', icon: 'user', routerLink: '/profile' },
|
||||
{ label: 'Settings', icon: 'settings', disabled: true, badge: 'Soon' },
|
||||
];
|
||||
|
||||
async function setup(overrides: Partial<Parameters<typeof renderWith>[0]> = {}) {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [UserMenu],
|
||||
providers: [provideRouter([])],
|
||||
}).compileComponents();
|
||||
return renderWith({
|
||||
displayName: 'Jane Doe',
|
||||
username: 'jane@apf.example',
|
||||
initials: 'JD',
|
||||
items: ITEMS,
|
||||
triggerAriaLabel: 'User menu — signed in as Jane Doe',
|
||||
...overrides,
|
||||
});
|
||||
}
|
||||
|
||||
function renderWith(opts: {
|
||||
displayName: string;
|
||||
username: string;
|
||||
initials: string;
|
||||
items: readonly UserMenuItem[];
|
||||
signedInAsLabel?: string;
|
||||
signOutLabel?: string;
|
||||
triggerAriaLabel?: string;
|
||||
}) {
|
||||
const fixture = TestBed.createComponent(UserMenu);
|
||||
fixture.componentRef.setInput('displayName', opts.displayName);
|
||||
fixture.componentRef.setInput('username', opts.username);
|
||||
fixture.componentRef.setInput('initials', opts.initials);
|
||||
fixture.componentRef.setInput('items', opts.items);
|
||||
if (opts.signedInAsLabel) {
|
||||
fixture.componentRef.setInput('signedInAsLabel', opts.signedInAsLabel);
|
||||
}
|
||||
if (opts.signOutLabel) {
|
||||
fixture.componentRef.setInput('signOutLabel', opts.signOutLabel);
|
||||
}
|
||||
if (opts.triggerAriaLabel) {
|
||||
fixture.componentRef.setInput('triggerAriaLabel', opts.triggerAriaLabel);
|
||||
}
|
||||
fixture.detectChanges();
|
||||
return fixture;
|
||||
}
|
||||
|
||||
describe('UserMenu', () => {
|
||||
it('renders the avatar trigger with initials + aria-label', async () => {
|
||||
const fixture = await setup();
|
||||
const trigger = (fixture.nativeElement as HTMLElement).querySelector(
|
||||
'button[aria-haspopup="menu"]',
|
||||
) as HTMLButtonElement | null;
|
||||
expect(trigger).not.toBeNull();
|
||||
expect(trigger?.getAttribute('aria-label')).toBe('User menu — signed in as Jane Doe');
|
||||
expect(trigger?.querySelector('.user-menu__avatar')?.textContent?.trim()).toBe('JD');
|
||||
});
|
||||
|
||||
it('renders the menu panel via the CDK overlay on trigger click', async () => {
|
||||
const fixture = await setup();
|
||||
const trigger = (fixture.nativeElement as HTMLElement).querySelector<HTMLButtonElement>(
|
||||
'button[aria-haspopup="menu"]',
|
||||
);
|
||||
trigger?.click();
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
// CDK Menu mounts the panel in an overlay portal at document
|
||||
// root, not under the component's host — scope the assertion to
|
||||
// the document.
|
||||
const panel = document.body.querySelector('.user-menu__panel');
|
||||
expect(panel).not.toBeNull();
|
||||
expect(panel?.querySelector('.user-menu__header-name')?.textContent).toContain('Jane Doe');
|
||||
expect(panel?.querySelector('.user-menu__header-username')?.textContent).toContain(
|
||||
'jane@apf.example',
|
||||
);
|
||||
});
|
||||
|
||||
it('renders enabled items as router links and disabled items as aria-disabled rows', async () => {
|
||||
const fixture = await setup();
|
||||
const trigger = (fixture.nativeElement as HTMLElement).querySelector<HTMLButtonElement>(
|
||||
'button[aria-haspopup="menu"]',
|
||||
);
|
||||
trigger?.click();
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
const panel = document.body.querySelector('.user-menu__panel');
|
||||
|
||||
const profile = panel?.querySelector('a.user-menu__item[href="/profile"]');
|
||||
expect(profile?.textContent).toContain('Profile');
|
||||
|
||||
const settings = panel?.querySelector('.user-menu__item--disabled');
|
||||
expect(settings?.getAttribute('aria-disabled')).toBe('true');
|
||||
expect(settings?.querySelector('.user-menu__badge')?.textContent?.trim()).toBe('Soon');
|
||||
});
|
||||
|
||||
it('emits signOut on Sign out click and uses the localised label', async () => {
|
||||
const fixture = await setup({ signOutLabel: 'Se déconnecter' });
|
||||
let emitted = 0;
|
||||
fixture.componentInstance.signOut.subscribe(() => emitted++);
|
||||
|
||||
const trigger = (fixture.nativeElement as HTMLElement).querySelector<HTMLButtonElement>(
|
||||
'button[aria-haspopup="menu"]',
|
||||
);
|
||||
trigger?.click();
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
const signOut = document.body.querySelector<HTMLButtonElement>('.user-menu__item--sign-out');
|
||||
expect(signOut?.textContent).toContain('Se déconnecter');
|
||||
signOut?.click();
|
||||
expect(emitted).toBe(1);
|
||||
});
|
||||
|
||||
it('renders an external link via `href` instead of routerLink when provided', async () => {
|
||||
const fixture = await setup({
|
||||
items: [{ label: 'Open elsewhere', href: 'https://example.test/' }],
|
||||
});
|
||||
const trigger = (fixture.nativeElement as HTMLElement).querySelector<HTMLButtonElement>(
|
||||
'button[aria-haspopup="menu"]',
|
||||
);
|
||||
trigger?.click();
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
const link = document.body.querySelector<HTMLAnchorElement>(
|
||||
'.user-menu__item[href="https://example.test/"]',
|
||||
);
|
||||
expect(link).not.toBeNull();
|
||||
expect(link?.textContent).toContain('Open elsewhere');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,76 @@
|
||||
import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
ViewEncapsulation,
|
||||
input,
|
||||
output,
|
||||
} from '@angular/core';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { Icon, type IconName } from '../icon/icon';
|
||||
|
||||
/**
|
||||
* Shape of a single row in the user menu — Profile, Settings,
|
||||
* cross-app links, etc. Sign out is NOT modelled here; it is always
|
||||
* rendered as the last row in a separate group and emits the
|
||||
* dedicated `signOut` output.
|
||||
*
|
||||
* Use `routerLink` for internal navigation (Angular `RouterLink`),
|
||||
* `href` for cross-origin links (other apps, external URLs). At most
|
||||
* one of the two should be set.
|
||||
*/
|
||||
export interface UserMenuItem {
|
||||
readonly label: string;
|
||||
readonly icon?: IconName;
|
||||
readonly routerLink?: string;
|
||||
readonly href?: string;
|
||||
readonly disabled?: boolean;
|
||||
/** Right-aligned chip — e.g. `"Soon"` for not-yet-shipped entries. */
|
||||
readonly badge?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Authenticated user menu — the gitea/github-style avatar dropdown
|
||||
* docked at the top right of both `portal-shell` and `portal-admin`
|
||||
* headers. Rendered only when the session is `authenticated`; the
|
||||
* loading / anonymous / error widgets stay in each app's header
|
||||
* because they vary by surface (search bar, sign-up button, etc.).
|
||||
*
|
||||
* The component is layout-only: caller passes the principal
|
||||
* (`displayName`, `username`, `initials`) plus a list of `items`
|
||||
* for the navigation rows, and listens for `signOut` to actually
|
||||
* destroy the session.
|
||||
*
|
||||
* Keyboard nav (arrow keys, Home/End, Escape, type-ahead) is
|
||||
* provided by `@angular/cdk/menu` — same primitives the
|
||||
* `ThemeSwitcher` and `LocaleSwitcher` already use, kept consistent
|
||||
* to land familiar interactions across the chrome.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'lib-user-menu',
|
||||
imports: [CdkMenu, CdkMenuItem, CdkMenuTrigger, RouterLink, Icon],
|
||||
templateUrl: './user-menu.html',
|
||||
styleUrl: './user-menu.scss',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
// CDK Menu opens its panel in an overlay portal outside this
|
||||
// component's host. Encapsulated styles would not reach the
|
||||
// overlay; the BEM-prefixed class names below keep selectors
|
||||
// specific enough to avoid leakage. Same pattern as
|
||||
// `LocaleSwitcher` / `ThemeSwitcher`.
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class UserMenu {
|
||||
readonly displayName = input.required<string>();
|
||||
readonly username = input.required<string>();
|
||||
readonly initials = input.required<string>();
|
||||
readonly items = input.required<readonly UserMenuItem[]>();
|
||||
|
||||
/** Localised label for the "Signed in as {username}" panel header. */
|
||||
readonly signedInAsLabel = input<string>('Signed in as');
|
||||
/** Localised label for the trailing Sign out row. */
|
||||
readonly signOutLabel = input<string>('Sign out');
|
||||
/** Localised aria-label for the avatar trigger button. */
|
||||
readonly triggerAriaLabel = input<string>('User menu');
|
||||
|
||||
readonly signOut = output<void>();
|
||||
}
|
||||
Reference in New Issue
Block a user