[master | DONE | FIXED] navigation: create compact menu items between @m and @xl breakpoints to avoid clutter with logo
This commit is contained in:
parent
3599f3d7d9
commit
62f9a62531
|
@ -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,6 +197,24 @@ export class AppComponent extends ResearcherBaseComponent implements OnInit, Aft
|
|||
}
|
||||
|
||||
initialize() {
|
||||
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),
|
||||
|
@ -197,6 +223,7 @@ export class AppComponent extends ResearcherBaseComponent implements OnInit, Aft
|
|||
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();
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1 +1 @@
|
|||
Subproject commit 9ef3f71ea656dca035238bb4f715666348a29616
|
||||
Subproject commit e0de892998d76b2236babf3439ed532e4501145d
|
Loading…
Reference in New Issue