[DURACOM-195] post mouse

4Science · Nov 30, 2023 · a5678c1 · a5678c1
1 parent 220148a
commit a5678c1
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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()"