[master | DONE | FIXED] navigation: create compact menu items between @m and @xl breakpoints to avoid clutter with logo

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import {AfterViewInit, ChangeDetectorRef, Component, OnInit} from '@angular/core';
+import {AfterViewInit, ChangeDetectorRef, Component, HostListener, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from "@angular/router";
 import {MenuItem} from "./openaireLibrary/sharedComponents/menu";
 import {Header} from "./openaireLibrary/sharedComponents/navigationBar.component";
@@ -108,6 +108,8 @@ export class AppComponent extends ResearcherBaseComponent implements OnInit, Aft
   user: User;
   isClient: boolean = false;
   stakeholderUtils: StakeholderUtils = new StakeholderUtils();
+  windowWidth: number;
+  compactMenuItems: boolean = false;
 
   constructor(protected _route: ActivatedRoute,
               protected _router: Router,
@@ -122,6 +124,7 @@ export class AppComponent extends ResearcherBaseComponent implements OnInit, Aft
               protected _searchResearchResultsService: SearchResearchResultsService
   ) {
     super();
+    this.getWindowWidth();
     // this.configurationService.initStaticPortal(this.irish.portal);
     // this.configurationService.initPortal(this.properties, this.properties.adminToolsCommunity);
     this.setProperties(this.properties.adminToolsCommunity, this.properties.adminToolsPortalType);
@@ -129,6 +132,11 @@ export class AppComponent extends ResearcherBaseComponent implements OnInit, Aft
     this.userManagementService.allowDoubleRedirectToFixAndCurrentPage = true;
   }
 
+  @HostListener('window:resize', ['$event'])
+  onResize(event) {
+    this.getWindowWidth();
+  }
+
   ngOnDestroy() {
     super.ngOnDestroy();
     this.customFilterService.clearSubscriptions();
@@ -189,14 +197,33 @@ export class AppComponent extends ResearcherBaseComponent implements OnInit, Aft
   }
 
   initialize() {
-    this.menuItems = [
+    this.buildMenuItems();
-      new MenuItem("home", "Home", "", "/", false, [], null, {}, null, null, null),
+  }
-      new MenuItem("national", this.stakeholderUtils.entities.country + ' ' + this.stakeholderUtils.entities.stakeholder, "", "/national", false, [], null, {}, null, null, null),
+
-      new MenuItem("rpo", this.stakeholderUtils.entities.organization + ' ' + this.stakeholderUtils.entities.stakeholders, "", "/rpo", false, [], null, {}, null, null, null, "/rpo"),
+  buildMenuItems() {
-      new MenuItem("rfo", this.stakeholderUtils.entities.funder + ' ' + this.stakeholderUtils.entities.stakeholders, "", "/rfo", false, [], null, {}, null, null, null, "/rfo"),
+    if(this.compactMenuItems) {
-      new MenuItem("researcher", "Researcher Monitors", "", "/researcher", false, [], null, {}, null, null, null, "/researcher"),
+      this.menuItems = [
-      new MenuItem("repository", "Repository Monitors", "", "/repository", false, [], null, {}, null, null, null, "/repository")
+        new MenuItem("home", "Home", "", "/", false, [], null, {}, null, null, null),
-    ];
+        new MenuItem("monitors", "Monitors", "", "", false, [], null, {}, null, null, null, "/monitors", "_blank", "internal", false,
+              [
+                new MenuItem("national", this.stakeholderUtils.entities.country, "", "/national", false, [], null, {}, null, null, null),
+                new MenuItem("rpo", this.stakeholderUtils.entities.organization, "", "/rpo", false, [], null, {}, null, null, null, "/rpo"),
+                new MenuItem("rfo", this.stakeholderUtils.entities.funder, "", "/rfo", false, [], null, {}, null, null, null, "/rfo"),
+                new MenuItem("researcher", "Researcher", "", "/researcher", false, [], null, {}, null, null, null, "/researcher"),
+                new MenuItem("repository", "Repository", "", "/repository", false, [], null, {}, null, null, null, "/repository")
+              ]
+          )
+      ];
+    } else {
+      this.menuItems = [
+        new MenuItem("home", "Home", "", "/", false, [], null, {}, null, null, null),
+        new MenuItem("national", this.stakeholderUtils.entities.country + ' ' + this.stakeholderUtils.entities.stakeholder, "", "/national", false, [], null, {}, null, null, null),
+        new MenuItem("rpo", this.stakeholderUtils.entities.organization + ' ' + this.stakeholderUtils.entities.stakeholders, "", "/rpo", false, [], null, {}, null, null, null, "/rpo"),
+        new MenuItem("rfo", this.stakeholderUtils.entities.funder + ' ' + this.stakeholderUtils.entities.stakeholders, "", "/rfo", false, [], null, {}, null, null, null, "/rfo"),
+        new MenuItem("researcher", "Researcher Monitors", "", "/researcher", false, [], null, {}, null, null, null, "/researcher"),
+        new MenuItem("repository", "Repository Monitors", "", "/repository", false, [], null, {}, null, null, null, "/repository")
+      ];
+    }
     if (this.properties.environment != "beta") {
       this.menuItems.push(
           new MenuItem("resources", "Resources & Help", "", "", false, [], null, {}, null, null, null, "/resources", "_blank", "internal", false,
@@ -270,4 +297,16 @@ export class AppComponent extends ResearcherBaseComponent implements OnInit, Aft
   public get isAdmin() {
     return Session.isPortalAdministrator(this.user) || Session.isMonitorCurator(this.user) || Session.isKindOfMonitorManager(this.user);
   }
+
+  getWindowWidth() {
+    this.windowWidth = window.innerWidth;
+    let mBreakpoint = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--uk-breakpoint-m'));
+    let xlBreakpoint = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--uk-breakpoint-xl'));
+    if(this.windowWidth > mBreakpoint && this.windowWidth <= xlBreakpoint) {
+      this.compactMenuItems = true;
+    } else {
+      this.compactMenuItems = false;
+    }
+    this.buildMenuItems();
+  }
 }

src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit 9ef3f71ea656dca035238bb4f715666348a29616
+Subproject commit e0de892998d76b2236babf3439ed532e4501145d