[develop | DONE | FIXED]: navigationBar.component.ts: Added a class field public isClient: boolean = false; and set it in constructor with "this.isClient = !isPlatformServer(this.platform);" statement | navigationBar.component.html: Added checks not to display dropdowns on server (needed also for non destructive hydration).

This commit is contained in:
Konstantina Galouni 2024-09-10 02:07:04 +03:00
parent 38f411b514
commit e66192172a
2 changed files with 10 additions and 5 deletions

View File

@ -220,7 +220,7 @@
<a *ngIf="(menu.route.length == 0 && menu.url.length == 0) || ( menu.route.length >0 && menu.routeRequired && !isEnabled([menu.route], showPage) && isAtleastOneEnabled(menu.routeRequired, showPage))"> <a *ngIf="(menu.route.length == 0 && menu.url.length == 0) || ( menu.route.length >0 && menu.routeRequired && !isEnabled([menu.route], showPage) && isAtleastOneEnabled(menu.routeRequired, showPage))">
<span *ngIf="menu.badge" class="badge">{{menu.badge}}</span> <span *ngIf="menu.badge" class="badge">{{menu.badge}}</span>
{{menu.title}}</a> {{menu.title}}</a>
<div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left uk-height-max-medium uk-overflow-auto"> <div *ngIf="menu.items.length > 0 && isClient" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left uk-height-max-medium uk-overflow-auto">
<!-- Do not delete this div, because it will remove the margin bottom of navbar --> <!-- Do not delete this div, because it will remove the margin bottom of navbar -->
<div> <div>
<ul class="uk-nav uk-navbar-dropdown-nav"> <ul class="uk-nav uk-navbar-dropdown-nav">
@ -272,7 +272,7 @@
<a *ngIf="menu.type == 'noAction'"> <a *ngIf="menu.type == 'noAction'">
{{menu.title}} {{menu.title}}
</a> </a>
<div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left uk-height-max-medium uk-overflow-auto" <div *ngIf="menu.items.length > 0 && isClient" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left uk-height-max-medium uk-overflow-auto"
style="top: 80px; left: 0px;" id="{{menu._id}}" uk-toggle> style="top: 80px; left: 0px;" id="{{menu._id}}" uk-toggle>
<div> <div>
<ul class="uk-nav uk-navbar-dropdown-nav"> <ul class="uk-nav uk-navbar-dropdown-nav">

View File

@ -1,10 +1,10 @@
import { import {
ChangeDetectorRef, ChangeDetectorRef,
Component, ElementRef, Component, ElementRef, Inject,
Input, Input,
OnChanges, OnChanges,
OnDestroy, OnDestroy,
OnInit, QueryList, OnInit, PLATFORM_ID,
SimpleChanges, ViewChild, SimpleChanges, ViewChild,
ViewChildren ViewChildren
} from '@angular/core'; } from '@angular/core';
@ -21,6 +21,7 @@ import {NotificationConfiguration} from "../notifications/notifications-sidebar/
import {SearchInputComponent} from "./search-input/search-input.component"; import {SearchInputComponent} from "./search-input/search-input.component";
import {Filter} from "../searchPages/searchUtils/searchHelperClasses.class"; import {Filter} from "../searchPages/searchUtils/searchHelperClasses.class";
import {RouterHelper} from "../utils/routerHelper.class"; import {RouterHelper} from "../utils/routerHelper.class";
import {isPlatformServer} from "@angular/common";
declare var UIkit; declare var UIkit;
@ -97,12 +98,16 @@ export class NavigationBarComponent implements OnInit, OnDestroy, OnChanges {
@ViewChild('canvas') canvas: ElementRef; @ViewChild('canvas') canvas: ElementRef;
public routerHelper: RouterHelper = new RouterHelper(); public routerHelper: RouterHelper = new RouterHelper();
public isClient: boolean = false;
constructor(private router: Router, constructor(private router: Router,
private route: ActivatedRoute, private route: ActivatedRoute,
private config: ConfigurationService, private config: ConfigurationService,
private _helpContentService: HelpContentService, private _helpContentService: HelpContentService,
private layoutService: LayoutService, private layoutService: LayoutService,
private cdr: ChangeDetectorRef) {} private cdr: ChangeDetectorRef,
@Inject(PLATFORM_ID) private platform: any) {
this.isClient = !isPlatformServer(this.platform);
}
ngOnInit() { ngOnInit() {
this.subs.push(this.route.queryParams.subscribe(params => { this.subs.push(this.route.queryParams.subscribe(params => {