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

Fix issues with user menu on different screen sizes

Author: tdonohue

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)"

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%;

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>

src/app/navbar/navbar-section/navbar-section.component.scss

@@ -0,0 +1,5 @@
+.navbar-section {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}

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>

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;

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;

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));
   }
 }

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>

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 })),