From be9a16a2a23a9e01b6e15aec7947319091c4f4b6 Mon Sep 17 00:00:00 2001
From: cryptalith <leomendoza123@gmail.com>
Date: Fri, 21 Aug 2026 15:48:59 -0600
Subject: [PATCH 1/3] PD-5720 Update global header buttons on mobile

Restyle the mobile/tablet header actions (account, notifications,
language, main menu) as consistent 40x40 Material Symbols icon buttons,
matching the notification indicator styling, with the visibility rules
from the Figma spec.
---
 src/app/layout/_header-action-button.scss     | 31 ++++++++
 src/app/layout/header/header.component.html   | 19 +++--
 src/app/layout/header/header.component.scss   |  7 ++
 .../layout/header/header.component.spec.ts    | 72 +++++++++++++++++--
 src/app/layout/header/header.component.ts     | 31 ++++++--
 .../layout/language/language.component.html   | 35 ++++++---
 .../layout/language/language.component.scss   | 11 ++-
 .../language/language.component.spec.ts       | 29 ++++++++
 src/app/layout/language/language.component.ts |  7 +-
 .../layout/menu-icon/menu-icon.component.html |  9 +--
 .../layout/menu-icon/menu-icon.component.scss | 62 ++--------------
 .../menu-icon.component.scss-theme.scss       | 25 -------
 .../menu-icon/menu-icon.component.spec.ts     | 15 ++++
 .../layout/menu-icon/menu-icon.component.ts   |  5 +-
 .../layout/user-menu/user-menu.component.html | 43 +++++++++--
 .../layout/user-menu/user-menu.component.scss | 56 +++++++++++++++
 .../user-menu/user-menu.component.spec.ts     | 61 +++++++++++++++-
 .../layout/user-menu/user-menu.component.ts   |  4 +-
 18 files changed, 390 insertions(+), 132 deletions(-)
 create mode 100644 src/app/layout/_header-action-button.scss
 delete mode 100644 src/app/layout/menu-icon/menu-icon.component.scss-theme.scss

diff --git a/src/app/layout/_header-action-button.scss b/src/app/layout/_header-action-button.scss
new file mode 100644
index 0000000000..09384702ed
--- /dev/null
+++ b/src/app/layout/_header-action-button.scss
@@ -0,0 +1,31 @@
+// Shared styling for the global header action buttons on mobile and tablet
+// (account, notifications, language and main menu).
+//
+// Applied on top of `mat-stroked-button`, which supplies the border and hover
+// states. The explicit box is required because MDC stroked buttons default to
+// 36px high and grow with their border.
+@mixin header-action-button {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  min-width: 40px;
+  padding: 0;
+  margin: 0;
+
+  mat-icon {
+    width: 24px;
+    height: 24px;
+    font-size: 24px;
+    line-height: 24px;
+    overflow: visible;
+    margin: 0;
+    color: var(--orcid-color-ui-background-darkest, #212121);
+  }
+
+  .filled {
+    font-variation-settings: 'FILL' 1;
+  }
+}
diff --git a/src/app/layout/header/header.component.html b/src/app/layout/header/header.component.html
index 0066e11112..2f2e63f568 100644
--- a/src/app/layout/header/header.component.html
+++ b/src/app/layout/header/header.component.html
@@ -29,18 +29,17 @@
         </div>
       </a>
       <div class="col no-gutters" role="navigation">
-        <div *ngIf="!platform.columns12" class="row middle no-gutters">
-          <div *ngIf="mobileMenuState" class="col no-gutters">
-            <app-language
-              class="col no-gutters"
-              id="cy-language-mob"
-            ></app-language>
-          </div>
-          <div *ngIf="!mobileMenuState" class="col no-gutters">
-            <app-user-menu></app-user-menu>
-          </div>
+        <div
+          *ngIf="!platform.columns12"
+          class="row middle no-gutters header-actions"
+        >
+          <app-user-menu
+            [hideSignedOutAccount]="isAuthPatternPage"
+          ></app-user-menu>
+          <app-language id="cy-language-mob"></app-language>
 
           <app-menu-icon
+            *ngIf="!hideMainMenu"
             (click)="toggleMobileMenu()"
             [isOpen]="mobileMenuState"
           ></app-menu-icon>
diff --git a/src/app/layout/header/header.component.scss b/src/app/layout/header/header.component.scss
index 63b223b9ba..60130b93de 100644
--- a/src/app/layout/header/header.component.scss
+++ b/src/app/layout/header/header.component.scss
@@ -197,6 +197,10 @@ nav {
             width: auto;
           }
         }
+        .header-actions {
+          flex-wrap: nowrap;
+          gap: 16px;
+        }
       }
       nav {
         .top-bar,
@@ -250,6 +254,9 @@ nav {
             flex-direction: column;
             gap: 0;
             width: 100%;
+            &.mobile-auth-menu button.top-menu-button {
+              font-weight: var(--orcid-font-weight-bold, 700);
+            }
             .col {
               flex: 0 0 auto;
               max-width: 100%;
diff --git a/src/app/layout/header/header.component.spec.ts b/src/app/layout/header/header.component.spec.ts
index 3d0cae1d34..0b22b56c98 100644
--- a/src/app/layout/header/header.component.spec.ts
+++ b/src/app/layout/header/header.component.spec.ts
@@ -71,24 +71,82 @@ describe('HeaderComponent', () => {
     expect(fixture.nativeElement.querySelector('app-search')).toBeFalsy()
   })
 
+  function mobileNavButtonLabels(): string[] {
+    const navButtons = fixture.nativeElement.querySelectorAll(
+      'nav button'
+    ) as NodeListOf<HTMLButtonElement>
+    return Array.from(navButtons).map((button: HTMLButtonElement) =>
+      button.textContent?.replace(/\s+/g, ' ').trim()
+    )
+  }
+
   it('renders public nav items without a sign-in/register action', () => {
     component.platform = mobilePlatform
     component.mobileMenuState = true
     component.user = undefined
     fixture.detectChanges()
 
-    const navButtons = fixture.nativeElement.querySelectorAll(
-      'nav button'
-    ) as NodeListOf<HTMLButtonElement>
-    const buttonLabels = Array.from(navButtons).map(
-      (button: HTMLButtonElement) =>
-        button.textContent?.replace(/\s+/g, ' ').trim()
-    )
+    const buttonLabels = mobileNavButtonLabels()
 
     expect(buttonLabels[0]).toBe('ABOUT')
     expect(buttonLabels.some((label) => label?.includes('Sign in'))).toBe(false)
   })
 
+  it('shows the main menu only on the homepage', () => {
+    component.updateRouteFlags('')
+    expect(component.hideMainMenu).toBe(false)
+
+    component.updateRouteFlags('/')
+    expect(component.hideMainMenu).toBe(false)
+
+    // Query strings and fragments must not be mistaken for a route
+    component.updateRouteFlags('/?lang=es')
+    expect(component.hideMainMenu).toBe(false)
+
+    component.updateRouteFlags('/signin')
+    expect(component.hideMainMenu).toBe(true)
+
+    component.updateRouteFlags('/0000-0001-5727-2427')
+    expect(component.hideMainMenu).toBe(true)
+  })
+
+  it('flags the sign-in pattern pages so the account action is hidden', () => {
+    component.updateRouteFlags('/signin')
+    expect(component.isAuthPatternPage).toBe(true)
+
+    component.updateRouteFlags('/register')
+    expect(component.isAuthPatternPage).toBe(true)
+
+    component.updateRouteFlags('/orcid-search/search?searchQuery=test')
+    expect(component.isAuthPatternPage).toBe(true)
+
+    component.updateRouteFlags('/')
+    expect(component.isAuthPatternPage).toBe(false)
+
+    component.updateRouteFlags('/0000-0001-5727-2427')
+    expect(component.isAuthPatternPage).toBe(false)
+  })
+
+  it('renders the menu icon only when the main menu is available', () => {
+    component.platform = mobilePlatform
+    component.hideMainMenu = false
+    fixture.detectChanges()
+    expect(fixture.nativeElement.querySelector('app-menu-icon')).toBeTruthy()
+
+    component.hideMainMenu = true
+    fixture.detectChanges()
+    expect(fixture.nativeElement.querySelector('app-menu-icon')).toBeFalsy()
+  })
+
+  it('keeps the account and language actions visible while the menu is open', () => {
+    component.platform = mobilePlatform
+    component.mobileMenuState = true
+    fixture.detectChanges()
+
+    expect(fixture.nativeElement.querySelector('app-user-menu')).toBeTruthy()
+    expect(fixture.nativeElement.querySelector('app-language')).toBeTruthy()
+  })
+
   it('sets active menu item id when a navigable item is clicked', () => {
     component.platform = {
       columns12: true,
diff --git a/src/app/layout/header/header.component.ts b/src/app/layout/header/header.component.ts
index c5fc5242e2..a56163be10 100644
--- a/src/app/layout/header/header.component.ts
+++ b/src/app/layout/header/header.component.ts
@@ -30,6 +30,19 @@ import { of, Observable } from 'rxjs'
 import { HeaderCompactService } from 'src/app/core/header-compact/header-compact.service'
 import { RecordHeaderStateService } from 'src/app/core/record-header-state/record-header-state.service'
 
+/**
+ * Pages that follow the sign-in page pattern, where the account action is not
+ * offered in the header. Matched against the first path segment.
+ */
+const AUTH_PATTERN_ROUTES = [
+  ApplicationRoutes.signin,
+  ApplicationRoutes.register,
+  ApplicationRoutes.resetPassword,
+  ApplicationRoutes.myOrcid,
+  'members',
+  'orcid-search',
+]
+
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
@@ -38,6 +51,7 @@ import { RecordHeaderStateService } from 'src/app/core/record-header-state/recor
 })
 export class HeaderComponent implements OnInit, AfterViewInit, OnDestroy {
   hideMainMenu = false
+  isAuthPatternPage = false
   _currentRoute: string
   notWordpressDisplay: boolean
   /** Shown as .active immediately after click until navigation completes. */
@@ -118,10 +132,19 @@ export class HeaderComponent implements OnInit, AfterViewInit, OnDestroy {
       (active) => (this.isCompactActive = active)
     )
 
-    _router.events.subscribe(() => {
-      const path = location.path()
-      this.hideMainMenu = path.indexOf(`/${ApplicationRoutes.home}`) !== -1
-    })
+    _router.events.subscribe(() => this.updateRouteFlags(location.path()))
+    this.updateRouteFlags(location.path())
+  }
+
+  /**
+   * The main menu is only offered on the homepage, and the account action is
+   * hidden on the sign-in pattern pages.
+   */
+  updateRouteFlags(rawPath: string) {
+    const path = rawPath.split('?')[0].split('#')[0]
+    this.hideMainMenu = !(path === '' || path === '/')
+    const firstSegment = path.split('/')[1] || ''
+    this.isAuthPatternPage = AUTH_PATTERN_ROUTES.includes(firstSegment)
   }
 
   ngOnInit() {}
diff --git a/src/app/layout/language/language.component.html b/src/app/layout/language/language.component.html
index fc766b107f..5b8b78c689 100644
--- a/src/app/layout/language/language.component.html
+++ b/src/app/layout/language/language.component.html
@@ -1,14 +1,27 @@
-<button
-  mat-button
-  [matMenuTriggerFor]="languageMenu"
-  [attr.aria-label]="labelLanguage"
-  class="orcid-button-light-grey"
->
-  <div class="row middle space-between button-box no-wrap">
-    <p class="col no-gutters">{{ languageMenuOptions[locale] }}</p>
-    <mat-icon>expand_more</mat-icon>
-  </div>
-</button>
+<ng-container *ngIf="(platform$ | async)?.columns12; else languageIconButton">
+  <button
+    mat-button
+    [matMenuTriggerFor]="languageMenu"
+    [attr.aria-label]="labelLanguage"
+    class="orcid-button-light-grey"
+  >
+    <div class="row middle space-between button-box no-wrap">
+      <p class="col no-gutters">{{ languageMenuOptions[locale] }}</p>
+      <mat-icon>expand_more</mat-icon>
+    </div>
+  </button>
+</ng-container>
+
+<ng-template #languageIconButton>
+  <button
+    mat-stroked-button
+    class="header-action-button"
+    [matMenuTriggerFor]="languageMenu"
+    [attr.aria-label]="labelLanguage"
+  >
+    <mat-icon class="material-symbols-outlined">language</mat-icon>
+  </button>
+</ng-template>
 
 <mat-menu
   #languageMenu="matMenu"
diff --git a/src/app/layout/language/language.component.scss b/src/app/layout/language/language.component.scss
index 70b758581b..7eaf178313 100644
--- a/src/app/layout/language/language.component.scss
+++ b/src/app/layout/language/language.component.scss
@@ -1,5 +1,7 @@
+@import '../header-action-button';
+
 :host {
-  > button {
+  > button.orcid-button-light-grey {
     padding: 0 7px 0 12px;
     p {
       margin: 0;
@@ -10,4 +12,11 @@
       width: auto;
     }
   }
+
+  > button.header-action-button {
+    @include header-action-button;
+
+    height: 40px;
+    line-height: 40px;
+  }
 }
diff --git a/src/app/layout/language/language.component.spec.ts b/src/app/layout/language/language.component.spec.ts
index 1a7986f2eb..5d488461d5 100644
--- a/src/app/layout/language/language.component.spec.ts
+++ b/src/app/layout/language/language.component.spec.ts
@@ -14,10 +14,13 @@ import { LanguageService } from '../../core/language/language.service'
 import { MatMenuModule } from '@angular/material/menu'
 
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
+import { BehaviorSubject } from 'rxjs'
+import { PlatformInfo } from '../../cdk/platform-info'
 
 describe('LanguageComponent', () => {
   let component: LanguageComponent
   let fixture: ComponentFixture<LanguageComponent>
+  let platformSubject: BehaviorSubject<PlatformInfo>
 
   beforeEach(() => {
     ;(globalThis as any).runtimeEnvironment = {
@@ -44,10 +47,36 @@ describe('LanguageComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(LanguageComponent)
     component = fixture.componentInstance
+    // Drive the platform through a subject so the async pipe marks the OnPush
+    // view dirty on every emission, as it does in the running app.
+    platformSubject = new BehaviorSubject({ columns12: true } as PlatformInfo)
+    component.platform$ = platformSubject
     fixture.detectChanges()
   })
 
+  function setPlatform(platform: Partial<PlatformInfo>) {
+    platformSubject.next(platform as PlatformInfo)
+    fixture.detectChanges()
+  }
+
   it('should create', () => {
     expect(component).toBeTruthy()
   })
+
+  it('renders the language name on desktop and a globe icon below it', () => {
+    expect(
+      fixture.nativeElement.querySelector('button.orcid-button-light-grey')
+    ).toBeTruthy()
+    expect(fixture.nativeElement.textContent).toContain('English')
+
+    setPlatform({ columns12: false })
+
+    const iconButton = fixture.nativeElement.querySelector(
+      'button.header-action-button'
+    )
+    expect(iconButton).toBeTruthy()
+    expect(iconButton.querySelector('mat-icon').textContent.trim()).toBe(
+      'language'
+    )
+  })
 })
diff --git a/src/app/layout/language/language.component.ts b/src/app/layout/language/language.component.ts
index 3aa939149c..3fb4e47546 100644
--- a/src/app/layout/language/language.component.ts
+++ b/src/app/layout/language/language.component.ts
@@ -4,7 +4,9 @@ import {
   Inject,
   LOCALE_ID,
 } from '@angular/core'
+import { Observable } from 'rxjs'
 
+import { PlatformInfo, PlatformInfoService } from 'src/app/cdk/platform-info'
 import { WINDOW } from 'src/app/cdk/window'
 import { LanguageService } from 'src/app/core/language/language.service'
 
@@ -18,12 +20,15 @@ import { LanguageService } from 'src/app/core/language/language.service'
 export class LanguageComponent {
   languageMenuOptions: { [key: string]: string }
   labelLanguage = $localize`:@@layout.ariaLabelLanguage:Select your preferred language. Current language is`
+  platform$: Observable<PlatformInfo>
 
   constructor(
     @Inject(LOCALE_ID) public locale: string,
     @Inject(WINDOW) private window: Window,
-    private _language: LanguageService
+    private _language: LanguageService,
+    _platform: PlatformInfoService
   ) {
+    this.platform$ = _platform.get()
     this.languageMenuOptions = runtimeEnvironment.LANGUAGE_MENU_OPTIONS
     // LOCAL DEV GET'S `en-US` from locale but `en` is required
     this.locale = this.locale === 'en-US' ? 'en' : this.locale
diff --git a/src/app/layout/menu-icon/menu-icon.component.html b/src/app/layout/menu-icon/menu-icon.component.html
index f79461912f..094bf475ff 100644
--- a/src/app/layout/menu-icon/menu-icon.component.html
+++ b/src/app/layout/menu-icon/menu-icon.component.html
@@ -1,10 +1,11 @@
 <button
-  class="hamburger"
+  mat-stroked-button
+  class="header-action-button"
   [attr.aria-label]="labelMenu"
   aria-haspopup="true"
   [attr.aria-expanded]="isOpen"
 >
-  <div class="hamburger__icon" [ngClass]="{ open: isOpen }">
-    <span></span> <span></span> <span></span> <span></span>
-  </div>
+  <mat-icon class="material-symbols-outlined">{{
+    isOpen ? 'close' : 'menu'
+  }}</mat-icon>
 </button>
diff --git a/src/app/layout/menu-icon/menu-icon.component.scss b/src/app/layout/menu-icon/menu-icon.component.scss
index 726ddcb102..2a925e9ba3 100644
--- a/src/app/layout/menu-icon/menu-icon.component.scss
+++ b/src/app/layout/menu-icon/menu-icon.component.scss
@@ -1,60 +1,8 @@
-:host {
-  height: 19px;
-}
-
-.hamburger__icon {
-  width: 33px;
-  height: 19px;
-  transform: rotate(0deg);
-  transition: 0.5s ease-in-out;
-  cursor: pointer;
-  position: relative;
-  flex: 1;
-  align-self: center;
-
-  span {
-    display: block;
-    position: absolute;
-    height: 3px;
-    width: 100%;
-    border-radius: 0px;
-    opacity: 1;
-    left: 0;
-    transform: rotate(0deg);
-    transition: 0.25s ease-in-out;
-    &:nth-child(1) {
-      top: 0;
-    }
-    &:nth-child(2),
-    &:nth-child(3) {
-      top: 8px;
-    }
-    &:nth-child(4) {
-      top: 16px;
-    }
-  }
-}
+@import '../header-action-button';
 
-.hamburger__icon {
-  &.open {
-    span {
-      &:nth-child(1) {
-        top: 16px;
-        width: 0%;
-        left: 50%;
-      }
-      &:nth-child(2) {
-        transform: rotate(45deg);
-      }
+.header-action-button {
+  @include header-action-button;
 
-      &:nth-child(3) {
-        transform: rotate(-45deg);
-      }
-      &:nth-child(4) {
-        top: 16px;
-        width: 0%;
-        left: 50%;
-      }
-    }
-  }
+  height: 40px;
+  line-height: 40px;
 }
diff --git a/src/app/layout/menu-icon/menu-icon.component.scss-theme.scss b/src/app/layout/menu-icon/menu-icon.component.scss-theme.scss
deleted file mode 100644
index 59ebdf0fce..0000000000
--- a/src/app/layout/menu-icon/menu-icon.component.scss-theme.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@use '@angular/material' as mat;
-@import 'src/assets/scss/material.orcid-theme.scss';
-
-@mixin app-menu-icon-theme($theme) {
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $warn: map-get($theme, accent);
-  $foreground: map-get($theme, foreground);
-  $background: map-get($theme, background);
-
-  .hamburger__icon {
-    &.open {
-      span {
-        background: mat.m2-get-color-from-palette($accent, '500-contrast');
-      }
-    }
-  }
-  .hamburger__icon {
-    span {
-      background: mat.m2-get-color-from-palette($accent, '500-contrast');
-    }
-  }
-}
-
-@include app-menu-icon-theme($orcid-app-theme);
diff --git a/src/app/layout/menu-icon/menu-icon.component.spec.ts b/src/app/layout/menu-icon/menu-icon.component.spec.ts
index ca36ceb8ab..63865e8672 100644
--- a/src/app/layout/menu-icon/menu-icon.component.spec.ts
+++ b/src/app/layout/menu-icon/menu-icon.component.spec.ts
@@ -24,4 +24,19 @@ describe('MenuIconComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy()
   })
+
+  it('toggles between the menu and close icons', () => {
+    const button = () => fixture.nativeElement.querySelector('button')
+    const iconName = () =>
+      fixture.nativeElement.querySelector('mat-icon').textContent.trim()
+
+    expect(iconName()).toBe('menu')
+    expect(button().getAttribute('aria-expanded')).toBe('false')
+
+    component.isOpen = true
+    fixture.detectChanges()
+
+    expect(iconName()).toBe('close')
+    expect(button().getAttribute('aria-expanded')).toBe('true')
+  })
 })
diff --git a/src/app/layout/menu-icon/menu-icon.component.ts b/src/app/layout/menu-icon/menu-icon.component.ts
index 71e97f681b..1de14f1466 100644
--- a/src/app/layout/menu-icon/menu-icon.component.ts
+++ b/src/app/layout/menu-icon/menu-icon.component.ts
@@ -3,10 +3,7 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
 @Component({
   selector: 'app-menu-icon',
   templateUrl: './menu-icon.component.html',
-  styleUrls: [
-    './menu-icon.component.scss',
-    './menu-icon.component.scss-theme.scss',
-  ],
+  styleUrls: ['./menu-icon.component.scss'],
   standalone: false,
 })
 export class MenuIconComponent implements OnInit {
diff --git a/src/app/layout/user-menu/user-menu.component.html b/src/app/layout/user-menu/user-menu.component.html
index 3a57ca9b23..e14c01ad83 100644
--- a/src/app/layout/user-menu/user-menu.component.html
+++ b/src/app/layout/user-menu/user-menu.component.html
@@ -1,6 +1,6 @@
 <section role="navigation">
   <button
-    *ngIf="userInfo"
+    *ngIf="userInfo && platform.columns12"
     class="user-menu-button"
     mat-button
     color="primary"
@@ -12,19 +12,41 @@
   >
     <div class="user-menu-container">
       <img src="./assets/vectors/profile-icon.svg" alt="" />
-      <span *ngIf="platform.columns12" class="name-text-container">{{
-        displayName
-      }}</span>
+      <span class="name-text-container">{{ displayName }}</span>
 
-      <mat-icon *ngIf="platform.columns12">expand_more</mat-icon>
+      <mat-icon>expand_more</mat-icon>
     </div>
   </button>
+  <button
+    *ngIf="userInfo && !platform.columns12"
+    mat-stroked-button
+    class="header-action-button"
+    [matMenuTriggerFor]="menu"
+    (menuOpened)="state = true"
+    (menuClosed)="state = false"
+    [attr.aria-label]="labelUserMenu + ' ' + displayName"
+    id="cy-user-info-mobile"
+  >
+    <mat-icon class="material-symbols-outlined filled signed-in"
+      >account_circle</mat-icon
+    >
+  </button>
+  <button
+    (click)="goto('signin')"
+    mat-stroked-button
+    class="header-action-button"
+    *ngIf="!userInfo && !platform.columns12 && !hideSignedOutAccount"
+    [attr.aria-label]="labelSigninRegister"
+    id="cy-mobile-signin-button"
+  >
+    <mat-icon class="material-symbols-outlined filled">account_circle</mat-icon>
+  </button>
   <button
     (click)="goto('signin')"
     mat-button
     color="primary"
     class="user-menu-button"
-    *ngIf="!userInfo && !platform.columns4"
+    *ngIf="!userInfo && platform.columns12"
     [attr.aria-label]="labelSigninRegister"
     id="menu-signin-button"
   >
@@ -45,6 +67,7 @@
     "
   >
     <mat-icon
+      *ngIf="platform.columns12"
       matBadgeSize="small"
       matBadgeColor="warn"
       class="material-icons-outlined"
@@ -59,6 +82,14 @@
         alt=""
       />
     </mat-icon>
+    <mat-icon
+      *ngIf="!platform.columns12"
+      class="material-symbols-outlined"
+      [class.unread]="inboxUnread > 0"
+      >{{
+        inboxUnread > 0 ? 'notifications_unread' : 'notifications'
+      }}</mat-icon
+    >
   </button>
 </section>
 <mat-menu #menu="matMenu" class="user-menu" id="cy-user-menu">
diff --git a/src/app/layout/user-menu/user-menu.component.scss b/src/app/layout/user-menu/user-menu.component.scss
index dce6169deb..cc9af6b54c 100644
--- a/src/app/layout/user-menu/user-menu.component.scss
+++ b/src/app/layout/user-menu/user-menu.component.scss
@@ -1,8 +1,45 @@
+@import '../header-action-button';
+
 section {
   display: flex;
   flex-wrap: nowrap;
 }
 
+// Breakpoint-scoped rules must be nested inside `:host`. Written at the top
+// level, Angular's emulated encapsulation appends this component's content
+// attribute to `.columns-4` itself, which lives on `app-root`, and the rule
+// silently never matches.
+:host {
+  .columns-4 &,
+  .columns-8 & {
+    section {
+      // Spacing between the action buttons.
+      gap: 16px;
+    }
+
+    // The desktop bell carries a 16px side margin; on mobile the row gap owns
+    // the spacing instead.
+    [mat-stroked-button] {
+      margin: 0;
+    }
+  }
+
+  .header-action-button {
+    @include header-action-button;
+
+    &.mat-mdc-outlined-button {
+      // The stroked button ships its own metrics; the action buttons are a
+      // fixed 40px square with the border inside the hit area.
+      height: 40px;
+      line-height: 40px;
+    }
+
+    .signed-in {
+      color: var(--orcid-color-brand-secondary-dark, #085c77);
+    }
+  }
+}
+
 .main-button {
   height: auto;
   .main-button-container {
@@ -110,6 +147,25 @@ span.name-text-container {
         overflow: visible;
       }
     }
+
+    .columns-4 &,
+    .columns-8 & {
+      @include header-action-button;
+
+      height: 40px;
+      line-height: 40px;
+
+      ::ng-deep {
+        mat-icon {
+          height: 24px;
+          margin-left: 0;
+        }
+      }
+
+      .unread {
+        color: var(--orcid-color-state-warning-dark, #d32f2f);
+      }
+    }
   }
 }
 
diff --git a/src/app/layout/user-menu/user-menu.component.spec.ts b/src/app/layout/user-menu/user-menu.component.spec.ts
index c07e2b96a4..d913a27c0a 100644
--- a/src/app/layout/user-menu/user-menu.component.spec.ts
+++ b/src/app/layout/user-menu/user-menu.component.spec.ts
@@ -32,6 +32,7 @@ import {
 } from '@angular/material/menu/testing'
 
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
+import { PlatformInfo } from '../../cdk/platform-info'
 
 describe('UserMenuComponent', () => {
   let component: UserMenuComponent
@@ -40,6 +41,16 @@ describe('UserMenuComponent', () => {
   let fakeInboxService: InboxService
   let fakeUserService: jasmine.SpyObj<UserService>
   let loader: HarnessLoader
+  const desktopPlatform = {
+    columns12: true,
+    columns8: false,
+    columns4: false,
+  } as unknown as PlatformInfo
+  const mobilePlatform = {
+    columns12: false,
+    columns8: false,
+    columns4: true,
+  } as unknown as PlatformInfo
 
   beforeEach(() => {
     fakeUserService = jasmine.createSpyObj<UserService>('UserService', {
@@ -82,10 +93,17 @@ describe('UserMenuComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(UserMenuComponent)
     component = fixture.componentInstance
-    fixture.detectChanges()
+    // The account trigger is platform specific, so pin it rather than let the
+    // Karma window width decide which variant renders.
+    setPlatform(desktopPlatform)
     loader = TestbedHarnessEnvironment.loader(fixture)
   })
 
+  function setPlatform(platform: PlatformInfo) {
+    component.platform = platform
+    fixture.detectChanges()
+  }
+
   it('should create', () => {
     expect(component).toBeTruthy()
   })
@@ -130,6 +148,47 @@ describe('UserMenuComponent', () => {
 
     expect(inboxCount).toBe(inboxIconName + 'Notifications inbox (3)')
   })
+
+  it('shows the account icon button on mobile instead of the desktop trigger', () => {
+    setPlatform(mobilePlatform)
+
+    expect(
+      fixture.debugElement.query(By.css('#cy-user-info-mobile'))
+    ).toBeTruthy()
+    expect(fixture.debugElement.query(By.css('#cy-user-info'))).toBeFalsy()
+  })
+
+  it('offers the signed-out account button on mobile unless it is hidden', () => {
+    component.userInfo = null
+    setPlatform(mobilePlatform)
+
+    expect(
+      fixture.debugElement.query(By.css('#cy-mobile-signin-button'))
+    ).toBeTruthy()
+
+    component.hideSignedOutAccount = true
+    fixture.detectChanges()
+
+    expect(
+      fixture.debugElement.query(By.css('#cy-mobile-signin-button'))
+    ).toBeFalsy()
+  })
+
+  it('reflects the unread state in the mobile notifications icon', () => {
+    setPlatform(mobilePlatform)
+
+    const icon = () =>
+      fixture.debugElement
+        .query(By.css('#cy-inbox-button mat-icon'))
+        .nativeElement.textContent.trim()
+
+    expect(icon()).toBe('notifications_unread')
+
+    component.inboxUnread = 0
+    fixture.detectChanges()
+
+    expect(icon()).toBe('notifications')
+  })
 })
 
 function getUserSession(): UserSession {
diff --git a/src/app/layout/user-menu/user-menu.component.ts b/src/app/layout/user-menu/user-menu.component.ts
index 00510c15a7..d2908169c9 100644
--- a/src/app/layout/user-menu/user-menu.component.ts
+++ b/src/app/layout/user-menu/user-menu.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Inject } from '@angular/core'
+import { Component, OnInit, Inject, Input } from '@angular/core'
 import { UserService } from 'src/app/core'
 
 import { UserInfo } from 'src/app/types'
@@ -23,6 +23,8 @@ import { JourneyType } from 'src/app/rum/journeys/types'
   standalone: false,
 })
 export class UserMenuComponent implements OnInit {
+  /** Hides the signed-out account action on the sign-in pattern pages. */
+  @Input() hideSignedOutAccount = false
   state = false
   userInfo: UserInfo
   displayName: string

From fe723b95a9c67645531d8826cbafc9c0eb79c845 Mon Sep 17 00:00:00 2001
From: cryptalith <leomendoza123@gmail.com>
Date: Fri, 21 Aug 2026 15:51:09 -0600
Subject: [PATCH 2/3] PD-5736 Restore the sign-in link in the mobile menu

Bring back the 'Sign in / Register' entry as the first row of the open
mobile menu when signed out. It was dropped in 9d56fdc11 (PD-5506), and
the header's only other sign-in control is hidden below 599px, so
signed-out mobile users had no way to reach sign-in from the header.
---
 src/app/layout/header/header.component.html   | 23 +++++++++++++++++++
 .../layout/header/header.component.spec.ts    | 16 +++++++++++--
 src/app/layout/header/header.component.ts     |  5 ++++
 3 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/app/layout/header/header.component.html b/src/app/layout/header/header.component.html
index 2f2e63f568..c2ff6c5833 100644
--- a/src/app/layout/header/header.component.html
+++ b/src/app/layout/header/header.component.html
@@ -99,6 +99,29 @@
       [ngClass]="{ container: platform.columns12 }"
       tabindex="-1"
     >
+      <ul
+        class="row mobile-auth-menu"
+        *ngIf="checkMenuItemRequirements({ desktop: false })"
+      >
+        <li
+          class="col no-gutters button-wrapper"
+          *ngIf="checkMenuItemRequirements({ logging: false })"
+        >
+          <button
+            [ngClass]="{ active: activeMenuItemId === 'header-signin' }"
+            class="top-menu-button sign-in-button"
+            mat-button
+            (click)="onNavClick('signin', 'header-signin')"
+            id="header-signin"
+          >
+            <ng-container i18n="@@header.signin">Sign in</ng-container
+            >&nbsp;/&nbsp;<ng-container i18n="@@header.register"
+              >Register</ng-container
+            >
+          </button>
+        </li>
+      </ul>
+
       <ng-template #recursiveList let-list let-parents="parents">
         <ul class="row" *ngIf="!isDesktopThirdLevelMenu(parents)">
           <ng-container *ngFor="let item of list">
diff --git a/src/app/layout/header/header.component.spec.ts b/src/app/layout/header/header.component.spec.ts
index 0b22b56c98..5209778474 100644
--- a/src/app/layout/header/header.component.spec.ts
+++ b/src/app/layout/header/header.component.spec.ts
@@ -80,7 +80,7 @@ describe('HeaderComponent', () => {
     )
   }
 
-  it('renders public nav items without a sign-in/register action', () => {
+  it('renders a sign-in/register action above the public nav items', () => {
     component.platform = mobilePlatform
     component.mobileMenuState = true
     component.user = undefined
@@ -88,8 +88,20 @@ describe('HeaderComponent', () => {
 
     const buttonLabels = mobileNavButtonLabels()
 
-    expect(buttonLabels[0]).toBe('ABOUT')
+    expect(buttonLabels[0]).toBe('Sign in / Register')
+    expect(buttonLabels[1]).toBe('ABOUT')
+  })
+
+  it('hides the sign-in/register action when the user is signed in', () => {
+    component.platform = mobilePlatform
+    component.mobileMenuState = true
+    component.user = {} as any
+    fixture.detectChanges()
+
+    const buttonLabels = mobileNavButtonLabels()
+
     expect(buttonLabels.some((label) => label?.includes('Sign in'))).toBe(false)
+    expect(buttonLabels[0]).toBe('ABOUT')
   })
 
   it('shows the main menu only on the homepage', () => {
diff --git a/src/app/layout/header/header.component.ts b/src/app/layout/header/header.component.ts
index a56163be10..050ab72f06 100644
--- a/src/app/layout/header/header.component.ts
+++ b/src/app/layout/header/header.component.ts
@@ -381,6 +381,11 @@ export class HeaderComponent implements OnInit, AfterViewInit, OnDestroy {
       : 'null'
   }
 
+  onNavClick(route: string, menuItemId: string) {
+    this.activeMenuItemId = menuItemId
+    this.goto(route)
+  }
+
   goto(route: string) {
     if (route === 'signin') {
       this._router.navigate([ApplicationRoutes.signin])

From 33f076c825f176141ccc74de2e0aa4b4ca5887b3 Mon Sep 17 00:00:00 2001
From: cryptalith <leomendoza123@gmail.com>
Date: Fri, 21 Aug 2026 16:58:11 -0600
Subject: [PATCH 3/3] PD-5720 Add a focus ring to the header action buttons

The MDC outlined button draws no focus indicator of its own, so the four
mobile header buttons were unreachable-looking for keyboard users
(WCAG 2.4.7). Reuse the inset ring the header nav buttons already use.
---
 src/app/layout/_header-action-button.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/app/layout/_header-action-button.scss b/src/app/layout/_header-action-button.scss
index 09384702ed..9f0f908a90 100644
--- a/src/app/layout/_header-action-button.scss
+++ b/src/app/layout/_header-action-button.scss
@@ -15,6 +15,14 @@
   padding: 0;
   margin: 0;
 
+  // The MDC outlined button draws no focus ring of its own, so keyboard users
+  // get no indicator without this. Matches the ring used by the header nav
+  // buttons in header.component.scss.
+  &:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--orcid-color-ui-focus, #1098ff);
+    outline: none;
+  }
+
   mat-icon {
     width: 24px;
     height: 24px;