diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 6903ffc..891f093 100644 --- a/src/app/app.component.ts +++ b/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 = [ - 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") - ]; + this.buildMenuItems(); + } + + buildMenuItems() { + if(this.compactMenuItems) { + this.menuItems = [ + 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(); + } } diff --git a/src/app/openaireLibrary b/src/app/openaireLibrary index 9ef3f71..e0de892 160000 --- a/src/app/openaireLibrary +++ b/src/app/openaireLibrary @@ -1 +1 @@ -Subproject commit 9ef3f71ea656dca035238bb4f715666348a29616 +Subproject commit e0de892998d76b2236babf3439ed532e4501145d