Merge pull request #1902 from 4Science/CST-7119

Fix issues with user menu on different screen sizes
2025-10-07 01:54:15 +00:00 · 2022-10-31 10:25:34 -05:00
parent c876055855 dd4d709d9c
commit 41e694507e
18 changed files with 112 additions and 40 deletions
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
@@ -1,4 +1,4 @@
-<div class="nav-item dropdown expandable-navbar-section"
+<div class="nav-item dropdown expandable-navbar-section text-md-center"
    *ngVar="(active | async) as isActive"
    (keyup.enter)="isActive ? deactivateSection($event) : activateSection($event)"
    (keyup.space)="isActive ? deactivateSection($event) : activateSection($event)"
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
@@ -1,3 +1,10 @@
+.expandable-navbar-section {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+}
+
 .dropdown-menu {
    overflow: hidden;
    min-width: 100%;
--- a/src/app/navbar/navbar-section/navbar-section.component.html
+++ b/src/app/navbar/navbar-section/navbar-section.component.html
@@ -1,3 +1,3 @@
-<div class="nav-item navbar-section">
+<div class="nav-item navbar-section text-md-center">
  <ng-container *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
-</div>
+</div>
--- a/src/app/navbar/navbar-section/navbar-section.component.scss
+++ b/src/app/navbar/navbar-section/navbar-section.component.scss
@@ -0,0 +1,5 @@
+.navbar-section {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -1,10 +1,13 @@
 <nav [ngClass]="{'open': !(menuCollapsed | async)}" [@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
    class="navbar navbar-light navbar-expand-md p-md-0 navbar-container" role="navigation" [attr.aria-label]="'nav.main.description' | translate">
    <!-- TODO remove navbar-container class when https://github.com/twbs/bootstrap/issues/24726 is fixed -->
-    <div class="container">
+    <div class="navbar-inner-container w-100" [class.container]="!(isXsOrSm$ | async)">
        <div class="reset-padding-md w-100">
            <div id="collapsingNav">
                <ul class="navbar-nav navbar-navigation mr-auto shadow-none">
+                    <li *ngIf="(isXsOrSm$ | async) && (isAuthenticated$ | async)">
+                        <ds-user-menu [inExpandableNavbar]="true"></ds-user-menu>
+                    </li>
                    <ng-container *ngFor="let section of (sections | async)">
                        <ng-container *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>
                    </ng-container>
--- a/src/app/navbar/navbar.component.scss
+++ b/src/app/navbar/navbar.component.scss
@@ -6,13 +6,14 @@ nav.navbar {
 /** Mobile menu styling **/
@media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
    .navbar {
-        width: 100vw;
+        width: 100%;
        background-color: var(--bs-white);
        position: absolute;
        overflow: hidden;
        height: 0;
        &.open {
-            height: 100vh; //doesn't matter because wrapper is sticky
+          height: auto;
+          min-height: 100vh; //doesn't matter because wrapper is sticky
        }
    }
 }
@@ -27,7 +28,7 @@ nav.navbar {
 /* TODO remove when https://github.com/twbs/bootstrap/issues/24726 is fixed */
 .navbar-expand-md.navbar-container {
    @media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
-        > .container {
+        > .navbar-inner-container {
            padding: 0 var(--bs-spacer);
        }
        padding: 0;
--- a/src/app/navbar/navbar.component.spec.ts
+++ b/src/app/navbar/navbar.component.spec.ts
@@ -22,9 +22,17 @@ import { Item } from '../core/shared/item.model';
 import { AuthorizationDataService } from '../core/data/feature-authorization/authorization-data.service';
 import { ThemeService } from '../shared/theme-support/theme.service';
 import { getMockThemeService } from '../shared/mocks/theme-service.mock';
+import { Store, StoreModule } from '@ngrx/store';
+import { AppState, storeModuleConfig } from '../app.reducer';
+import { authReducer } from '../core/auth/auth.reducer';
+import { provideMockStore } from '@ngrx/store/testing';
+import { AuthTokenInfo } from '../core/auth/models/auth-token-info.model';
+import { EPersonMock } from '../shared/testing/eperson.mock';

 let comp: NavbarComponent;
 let fixture: ComponentFixture<NavbarComponent>;
+let store: Store<AppState>;
+let initialState: any;

 const authorizationService = jasmine.createSpyObj('authorizationService', {
  isAuthorized: observableOf(true)
@@ -83,10 +91,24 @@ describe('NavbarComponent', () => {
        }
      ),
    ];
+    initialState = {
+      core: {
+        auth: {
+          authenticated: true,
+          loaded: true,
+          blocking: false,
+          loading: false,
+          authToken: new AuthTokenInfo('test_token'),
+          userId: EPersonMock.id,
+          authMethods: []
+        }
+      }
+    };

    TestBed.configureTestingModule({
      imports: [
        TranslateModule.forRoot(),
+        StoreModule.forRoot({ auth: authReducer }, storeModuleConfig),
        NoopAnimationsModule,
        ReactiveFormsModule,
        RouterTestingModule],
@@ -99,6 +121,7 @@ describe('NavbarComponent', () => {
        { provide: ActivatedRoute, useValue: routeStub },
        { provide: BrowseService, useValue: { getBrowseDefinitions: createSuccessfulRemoteDataObject$(buildPaginatedList(undefined, browseDefinitions)) } },
        { provide: AuthorizationDataService, useValue: authorizationService },
+        provideMockStore({ initialState }),
      ],
      schemas: [NO_ERRORS_SCHEMA]
    })
@@ -107,7 +130,7 @@ describe('NavbarComponent', () => {

  // synchronous beforeEach
  beforeEach(() => {
-
+    store = TestBed.inject(Store);
    fixture = TestBed.createComponent(NavbarComponent);

    comp = fixture.componentInstance;
--- a/src/app/navbar/navbar.component.ts
+++ b/src/app/navbar/navbar.component.ts
@@ -8,6 +8,10 @@ import { ActivatedRoute } from '@angular/router';
 import { AuthorizationDataService } from '../core/data/feature-authorization/authorization-data.service';
 import { MenuID } from '../shared/menu/menu-id.model';
 import { ThemeService } from '../shared/theme-support/theme.service';
+import { Observable } from 'rxjs';
+import { select, Store } from '@ngrx/store';
+import { AppState } from '../app.reducer';
+import { isAuthenticated } from '../core/auth/selectors';

 /**
 * Component representing the public navbar
@@ -25,18 +29,29 @@ export class NavbarComponent extends MenuComponent {
   */
  menuID = MenuID.PUBLIC;

+  /**
+   * Whether user is authenticated.
+   * @type {Observable<string>}
+   */
+  public isAuthenticated$: Observable<boolean>;
+
+  public isXsOrSm$: Observable<boolean>;
+
  constructor(protected menuService: MenuService,
    protected injector: Injector,
              public windowService: HostWindowService,
              public browseService: BrowseService,
              public authorizationService: AuthorizationDataService,
              public route: ActivatedRoute,
-              protected themeService: ThemeService
+              protected themeService: ThemeService,
+              private store: Store<AppState>,
  ) {
    super(menuService, injector, authorizationService, route, themeService);
  }

  ngOnInit(): void {
    super.ngOnInit();
+    this.isXsOrSm$ = this.windowService.isXsOrSm();
+    this.isAuthenticated$ = this.store.pipe(select(isAuthenticated));
  }
 }
--- a/src/app/root/root.component.html
+++ b/src/app/root/root.component.html
@@ -1,9 +1,9 @@
-<div class="outer-wrapper" [class.d-none]="shouldShowFullscreenLoader">
-  <ds-themed-admin-sidebar></ds-themed-admin-sidebar>
-  <div class="inner-wrapper" [@slideSidebarPadding]="{
+<div class="outer-wrapper" [class.d-none]="shouldShowFullscreenLoader" [@slideSidebarPadding]="{
     value: (!(sidebarVisible | async) ? 'hidden' : (slideSidebarOver | async) ? 'shown' : 'expanded'),
     params: {collapsedSidebarWidth: (collapsedSidebarWidth | async), totalSidebarWidth: (totalSidebarWidth | async)}
    }">
+  <ds-themed-admin-sidebar></ds-themed-admin-sidebar>
+  <div class="inner-wrapper">
    <ds-themed-header-navbar-wrapper></ds-themed-header-navbar-wrapper>
    <main class="main-content">
      <ds-themed-breadcrumbs></ds-themed-breadcrumbs>
--- a/src/app/shared/animations/slide.ts
+++ b/src/app/shared/animations/slide.ts
@@ -12,7 +12,7 @@ export const slide = trigger('slide', [

 export const slideMobileNav = trigger('slideMobileNav', [

-  state('expanded', style({ height: '100vh' })),
+  state('expanded', style({ height: 'auto', 'min-height': '100vh' })),

  state('collapsed', style({ height: 0 })),

--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
@@ -2,11 +2,11 @@
  <li *ngIf="!(isAuthenticated | async) && !(isXsOrSm$ | async) && (showAuth | async)" class="nav-item"
      (click)="$event.stopPropagation();">
    <div ngbDropdown #loginDrop display="dynamic" placement="bottom-right" class="d-inline-block" @fadeInOut>
-      <a href="javascript:void(0);" class="dropdownLogin px-1 " [attr.aria-label]="'nav.login' |translate" (click)="$event.preventDefault()" [attr.data-test]="'login-menu' | dsBrowserOnly" ngbDropdownToggle>
-        {{ 'nav.login' | translate }}
-      </a>
+      <a href="javascript:void(0);" class="dropdownLogin px-1" [attr.aria-label]="'nav.login' |translate"
+         (click)="$event.preventDefault()" [attr.data-test]="'login-menu' | dsBrowserOnly"
+         ngbDropdownToggle>{{ 'nav.login' | translate }}</a>
      <div class="loginDropdownMenu" [ngClass]="{'pl-3 pr-3': (loading | async)}" ngbDropdownMenu
-           [attr.aria-label]="'nav.login' |translate">
+           [attr.aria-label]="'nav.login' | translate">
        <ds-log-in
          [isStandalonePage]="false"></ds-log-in>
      </div>
@@ -19,16 +19,16 @@
  </li>
  <li *ngIf="(isAuthenticated | async) && !(isXsOrSm$ | async) && (showAuth | async)" class="nav-item">
    <div ngbDropdown display="dynamic" placement="bottom-right" class="d-inline-block" @fadeInOut>
-      <a href="javascript:void(0);" role="button" [attr.aria-label]="'nav.logout' |translate" (click)="$event.preventDefault()" [title]="'nav.logout' | translate" class="px-1" [attr.data-test]="'user-menu' | dsBrowserOnly" ngbDropdownToggle>
+      <a href="javascript:void(0);" role="button" [attr.aria-label]="'nav.user-profile-menu-and-logout' |translate" (click)="$event.preventDefault()" [title]="'nav.user-profile-menu-and-logout' | translate" class="px-1" [attr.data-test]="'user-menu' | dsBrowserOnly" ngbDropdownToggle>
        <i class="fas fa-user-circle fa-lg fa-fw"></i></a>
-      <div class="logoutDropdownMenu" ngbDropdownMenu [attr.aria-label]="'nav.logout' |translate">
+      <div class="logoutDropdownMenu" ngbDropdownMenu [attr.aria-label]="'nav.user-profile-menu-and-logout' |translate">
        <ds-user-menu></ds-user-menu>
      </div>
    </div>
  </li>
  <li *ngIf="(isAuthenticated | async) && (isXsOrSm$ | async)" class="nav-item">
    <a id="logoutLink" role="button" [attr.aria-label]="'nav.logout' |translate" [title]="'nav.logout' | translate" routerLink="/logout" routerLinkActive="active" class="px-1">
-      <i class="fas fa-user-circle fa-lg fa-fw"></i>
+      <i class="fas fa-sign-out-alt fa-lg fa-fw"></i>
      <span class="sr-only">(current)</span>
    </a>
  </li>
--- 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,10 +1,13 @@
 <ds-themed-loading *ngIf="(loading$ | async)"></ds-themed-loading>
 <div *ngIf="!(loading$ | async)">
-  <span class="dropdown-item-text">{{(user$ | async)?.name}} ({{(user$ | async)?.email}})</span>
-  <a class="dropdown-item" [routerLink]="[profileRoute]" routerLinkActive="active">{{'nav.profile' | translate}}</a>
-  <a class="dropdown-item" [routerLink]="[mydspaceRoute]" routerLinkActive="active">{{'nav.mydspace' | translate}}</a>
+  <span class="dropdown-item-text" [class.pl-0]="inExpandableNavbar">
+    {{(user$ | async)?.name}}<br>
+    <span class="text-muted">{{(user$ | async)?.email}}</span>
+  </span>
+  <a [ngClass]="inExpandableNavbar ? 'nav-item nav-link' : 'dropdown-item'" [routerLink]="[profileRoute]" routerLinkActive="active">{{'nav.profile' | translate}}</a>
+  <a [ngClass]="inExpandableNavbar ? 'nav-item nav-link' : 'dropdown-item'" [routerLink]="[mydspaceRoute]" routerLinkActive="active">{{'nav.mydspace' | translate}}</a>
  <div class="dropdown-divider"></div>
-  <ds-log-out></ds-log-out>
+  <ds-log-out *ngIf="!inExpandableNavbar" data-test="log-out-component"></ds-log-out>
 </div>


--- a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.spec.ts
+++ b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.spec.ts
@@ -162,10 +162,24 @@ describe('UserMenuComponent', () => {
    });

    it('should display user name and email', () => {
-      const user = 'User Test (test@test.com)';
+      const username = 'User Test';
+      const email = 'test@test.com';
      const span = deUserMenu.query(By.css('.dropdown-item-text'));
      expect(span).toBeDefined();
-      expect(span.nativeElement.innerHTML).toBe(user);
+      expect(span.nativeElement.innerHTML).toContain(username);
+      expect(span.nativeElement.innerHTML).toContain(email);
+    });
+
+    it('should create logout component', () => {
+      const components = fixture.debugElement.query(By.css('[data-test="log-out-component"]'));
+      expect(components).toBeTruthy();
+    });
+
+    it('should not create logout component', () => {
+      component.inExpandableNavbar = true;
+      fixture.detectChanges();
+      const components = fixture.debugElement.query(By.css('[data-test="log-out-component"]'));
+      expect(components).toBeFalsy();
    });

  });
--- a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.ts
+++ b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';

 import { Observable } from 'rxjs';
 import { select, Store } from '@ngrx/store';
@@ -20,6 +20,11 @@ import { getProfileModuleRoute } from '../../../app-routing-paths';
 })
 export class UserMenuComponent implements OnInit {

+  /**
+   * The input flag to show user details in navbar expandable menu
+   */
+  @Input() inExpandableNavbar = false;
+
  /**
   * True if the authentication is loading.
   * @type {Observable<boolean>}
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -2874,7 +2874,9 @@

  "nav.login": "Log In",

-  "nav.logout": "User profile menu and Log Out",
+  "nav.user-profile-menu-and-logout": "User profile menu and Log Out",
+
+  "nav.logout": "Log Out",

  "nav.main.description": "Main navigation bar",

--- a/src/themes/dspace/app/navbar/navbar.component.html
+++ b/src/themes/dspace/app/navbar/navbar.component.html
@@ -1,12 +1,15 @@
 <nav [ngClass]="{'open': !(menuCollapsed | async)}" [@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
  class="navbar navbar-expand-md navbar-light p-0 navbar-container" role="navigation" [attr.aria-label]="'nav.main.description' | translate">
-  <div class="container h-100">
+  <div class="navbar-inner-container w-100 h-100" [class.container]="!(isXsOrSm$ | async)">
    <a class="navbar-brand my-2" routerLink="/home">
      <img src="assets/images/dspace-logo.svg" [attr.alt]="'menu.header.image.logo' | translate" />
    </a>

    <div id="collapsingNav" class="w-100 h-100">
-      <ul class="navbar-nav navbar-navigation me-auto mb-2 mb-lg-0 h-100 d-flex align-items-center">
+      <ul class="navbar-nav me-auto mb-2 mb-lg-0 h-100">
+        <li *ngIf="(isXsOrSm$ | async) && (isAuthenticated$ | async)">
+            <ds-user-menu [inExpandableNavbar]="true"></ds-user-menu>
+        </li>
        <ng-container *ngFor="let section of (sections | async)">
          <ng-container *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>
        </ng-container>
--- a/src/themes/dspace/app/navbar/navbar.component.scss
+++ b/src/themes/dspace/app/navbar/navbar.component.scss
@@ -29,7 +29,7 @@ nav.navbar {
 /* TODO remove when https://github.com/twbs/bootstrap/issues/24726 is fixed */
 .navbar-expand-md.navbar-container {
  @media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
-    > .container {
+    > .navbar-inner-container {
      padding: 0 var(--bs-spacer);
      a.navbar-brand {
        display: none;
--- a/src/themes/dspace/styles/_global-styles.scss
+++ b/src/themes/dspace/styles/_global-styles.scss
@@ -21,12 +21,3 @@
    font-size: 1.1rem
  }
 }
-
-header {
-  .navbar-navigation > li {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    height: 100%;
-  }
-}