From a5678c190e806abfc2a4eb391919b68d1d0d2005 Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.com>
Date: Thu, 30 Nov 2023 23:35:29 +0100
Subject: [PATCH] [DURACOM-195] post mouse

---
 .../expandable-navbar-section.component.html  |  2 +-
 .../expandable-navbar-section.component.scss  |  2 +-
 .../user-menu/user-menu.component.html        | 32 +++++++++++++------
 src/app/shared/host-window.service.ts         | 16 ++++++++++
 .../dspace/app/header/header.component.html   | 13 ++++----
 5 files changed, 47 insertions(+), 18 deletions(-)

diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
index 827cebb227f..43c4b47122b 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
@@ -20,7 +20,7 @@
           *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
         <span class="sr-only">{{'nav.expandable-navbar-section-suffix' | translate}}</span>
       </span>
-      <i class="fas fa-caret-down fa-xs toggler" aria-hidden="true"></i>
+      <i class="fas fa-caret-down fa-xs toggle-menu-icon" aria-hidden="true"></i>
     </a>
     <ul @slide *ngIf="isActive" (click)="deactivateSection($event)"
         [id]="expandableNavbarSectionId(section.id)"
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
index 8c601ae5049..f3f3678b7af 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
@@ -10,7 +10,7 @@
     border-top-right-radius: 0;
   }
 
-  .toggler {
+  .toggle-menu-icon {
     &, &:hover {
       text-decoration: none;
     }
diff --git a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.html b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.html
index b8a5876fdc1..a02acd90514 100644
--- a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.html
+++ b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.html
@@ -1,15 +1,27 @@
 <ds-themed-loading *ngIf="(loading$ | async)"></ds-themed-loading>
-<div *ngIf="!(loading$ | async)">
-  <span class="dropdown-item-text" [class.pl-0]="inExpandableNavbar">
+<ng-container *ngIf="!(loading$ | async)">
+  <li class="menu-item-wrapper">
     {{dsoNameService.getName(user$ | async)}}<br>
     <span class="text-muted">{{(user$ | async)?.email}}</span>
-  </span>
-  <a role="menuitem" [ngClass]="inExpandableNavbar ? 'nav-item nav-link' : 'dropdown-item'" [routerLink]="[profileRoute]" routerLinkActive="active">{{'nav.profile' | translate}}</a>
-  <a role="menuitem" [ngClass]="inExpandableNavbar ? 'nav-item nav-link' : 'dropdown-item'" [routerLink]="[mydspaceRoute]" routerLinkActive="active">{{'nav.mydspace' | translate}}</a>
-  <a role="menuitem" [ngClass]="inExpandableNavbar ? 'nav-item nav-link' : 'dropdown-item'" [routerLink]="[subscriptionsRoute]" routerLinkActive="active">{{'nav.subscriptions' | translate}}</a>
-
-  <div class="dropdown-divider"></div>
-  <ds-log-out *ngIf="!inExpandableNavbar" data-test="log-out-component"></ds-log-out>
-</div>
+  </li>
+  <li class="menu-item-wrapper" role="presentation">
+    <a role="menuitem"
+       [routerLink]="[profileRoute]"
+       routerLinkActive="active">{{'nav.profile' | translate}}</a>
+  </li>
+  <li class="menu-item-wrapper" role="presentation">
+    <a role="menuitem"
+       [routerLink]="[mydspaceRoute]"
+       routerLinkActive="active">{{'nav.mydspace' | translate}}</a>
+  </li>
+  <li class="menu-item-wrapper" role="presentation">
+    <a role="menuitem"
+       [routerLink]="[subscriptionsRoute]"
+       routerLinkActive="active">{{'nav.subscriptions' | translate}}</a>
+  </li>
+  <li class="menu-item-wrapper" role="presentation">
+    <ds-log-out *ngIf="!inExpandableNavbar" data-test="log-out-component"></ds-log-out>
+  </li>
+</ng-container>
 
 
diff --git a/src/app/shared/host-window.service.ts b/src/app/shared/host-window.service.ts
index 551e16eb89a..1c71bf5075e 100644
--- a/src/app/shared/host-window.service.ts
+++ b/src/app/shared/host-window.service.ts
@@ -17,6 +17,8 @@ export enum WidthCategory {
   XL = 4,
 }
 
+export const maxMobileWidth = WidthCategory.SM;
+
 const hostWindowStateSelector = (state: AppState) => state.hostWindow;
 const widthSelector = createSelector(hostWindowStateSelector, (hostWindow: HostWindowState) => hostWindow.width);
 
@@ -120,6 +122,20 @@ export class HostWindowService {
     );
   }
 
+  isMobile(): Observable<boolean> {
+    return this.widthCategory.pipe(
+      map((widthCat: WidthCategory) => widthCat <= maxMobileWidth),
+      distinctUntilChanged()
+    );
+  }
+
+  isDesktop(): Observable<boolean> {
+    return this.widthCategory.pipe(
+      map((widthCat: WidthCategory) => widthCat > maxMobileWidth),
+      distinctUntilChanged()
+    );
+  }
+
   isXsOrSm(): Observable<boolean> {
     return observableCombineLatest(
       this.isXs(),
diff --git a/src/themes/dspace/app/header/header.component.html b/src/themes/dspace/app/header/header.component.html
index c3bf47bfacc..14b7e41c52d 100644
--- a/src/themes/dspace/app/header/header.component.html
+++ b/src/themes/dspace/app/header/header.component.html
@@ -13,14 +13,15 @@
       </nav>
     </div>
     <!-- Search bar and other menus -->
-    <div role="menubar" id="header-right" class="h-100 d-flex flex-row flex-nowrap justify-content-end align-items-center gapx-1">
+    <div id="header-right" class="h-100 d-flex flex-row flex-nowrap justify-content-end align-items-center gapx-1">
       <!-- TODO: add ARIA attribute to subcomponents -->
-      <!-- dropdown menus should have aria-haspopup=menu -->
       <ds-themed-search-navbar></ds-themed-search-navbar>
-      <ds-themed-lang-switch></ds-themed-lang-switch>
-      <ds-context-help-toggle></ds-context-help-toggle>
-      <ds-themed-auth-nav-menu></ds-themed-auth-nav-menu>
-      <ds-impersonate-navbar></ds-impersonate-navbar>
+      <div role="menubar" class="h-100 d-flex flex-row flex-nowrap align-items-center gapx-1">
+        <ds-themed-lang-switch></ds-themed-lang-switch>
+        <ds-context-help-toggle></ds-context-help-toggle>
+        <ds-themed-auth-nav-menu></ds-themed-auth-nav-menu>
+        <ds-impersonate-navbar></ds-impersonate-navbar>
+      </div>
 
       <div id="mobile-navbar-toggler" class="d-block d-lg-none ml-3" *ngIf="(isMobile$ | async)">
         <button id="navbar-toggler" class="btn" type="button" (click)="toggleNavbar()"