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

master
Alex Martzios 2 months ago
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,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();
}
}

@ -1 +1 @@
Subproject commit 9ef3f71ea656dca035238bb4f715666348a29616
Subproject commit e0de892998d76b2236babf3439ed532e4501145d
Loading…
Cancel
Save