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

This commit is contained in:
Alex Martzios 2024-03-05 12:26:07 +02:00
parent 3599f3d7d9
commit 62f9a62531
2 changed files with 49 additions and 10 deletions

View File

@ -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 {ActivatedRoute, Router} from "@angular/router";
import {MenuItem} from "./openaireLibrary/sharedComponents/menu"; import {MenuItem} from "./openaireLibrary/sharedComponents/menu";
import {Header} from "./openaireLibrary/sharedComponents/navigationBar.component"; import {Header} from "./openaireLibrary/sharedComponents/navigationBar.component";
@ -108,6 +108,8 @@ export class AppComponent extends ResearcherBaseComponent implements OnInit, Aft
user: User; user: User;
isClient: boolean = false; isClient: boolean = false;
stakeholderUtils: StakeholderUtils = new StakeholderUtils(); stakeholderUtils: StakeholderUtils = new StakeholderUtils();
windowWidth: number;
compactMenuItems: boolean = false;
constructor(protected _route: ActivatedRoute, constructor(protected _route: ActivatedRoute,
protected _router: Router, protected _router: Router,
@ -122,6 +124,7 @@ export class AppComponent extends ResearcherBaseComponent implements OnInit, Aft
protected _searchResearchResultsService: SearchResearchResultsService protected _searchResearchResultsService: SearchResearchResultsService
) { ) {
super(); super();
this.getWindowWidth();
// this.configurationService.initStaticPortal(this.irish.portal); // this.configurationService.initStaticPortal(this.irish.portal);
// this.configurationService.initPortal(this.properties, this.properties.adminToolsCommunity); // this.configurationService.initPortal(this.properties, this.properties.adminToolsCommunity);
this.setProperties(this.properties.adminToolsCommunity, this.properties.adminToolsPortalType); this.setProperties(this.properties.adminToolsCommunity, this.properties.adminToolsPortalType);
@ -129,6 +132,11 @@ export class AppComponent extends ResearcherBaseComponent implements OnInit, Aft
this.userManagementService.allowDoubleRedirectToFixAndCurrentPage = true; this.userManagementService.allowDoubleRedirectToFixAndCurrentPage = true;
} }
@HostListener('window:resize', ['$event'])
onResize(event) {
this.getWindowWidth();
}
ngOnDestroy() { ngOnDestroy() {
super.ngOnDestroy(); super.ngOnDestroy();
this.customFilterService.clearSubscriptions(); this.customFilterService.clearSubscriptions();
@ -189,6 +197,24 @@ export class AppComponent extends ResearcherBaseComponent implements OnInit, Aft
} }
initialize() { 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 = [ this.menuItems = [
new MenuItem("home", "Home", "", "/", false, [], null, {}, null, null, null), 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("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("researcher", "Researcher Monitors", "", "/researcher", false, [], null, {}, null, null, null, "/researcher"),
new MenuItem("repository", "Repository Monitors", "", "/repository", false, [], null, {}, null, null, null, "/repository") new MenuItem("repository", "Repository Monitors", "", "/repository", false, [], null, {}, null, null, null, "/repository")
]; ];
}
if (this.properties.environment != "beta") { if (this.properties.environment != "beta") {
this.menuItems.push( this.menuItems.push(
new MenuItem("resources", "Resources & Help", "", "", false, [], null, {}, null, null, null, "/resources", "_blank", "internal", false, 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() { public get isAdmin() {
return Session.isPortalAdministrator(this.user) || Session.isMonitorCurator(this.user) || Session.isKindOfMonitorManager(this.user); 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