From a6d3b208b01a18f42fbef394607d7edaf4b3769d Mon Sep 17 00:00:00 2001
From: Willem Dantuma <willem.dantuma@dobs.nl>
Date: Mon, 12 Apr 2021 15:10:29 +0200
Subject: [PATCH] Hide buttons when no routing to sink

---
 .../components/app-menu/app-menu.component.html |  2 +-
 .../components/app-menu/app-menu.component.ts   | 16 +++++++++++++---
 .../help-menu/help-menu.component.html          |  2 +-
 .../components/help-menu/help-menu.component.ts | 16 +++++++++++++---
 .../notification-menu.component.html            |  2 +-
 .../notification-menu.component.ts              | 17 +++++++++++++----
 6 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/projects/common/src/fm/components/app-menu/app-menu.component.html b/projects/common/src/fm/components/app-menu/app-menu.component.html
index 950d683..5a9b54d 100644
--- a/projects/common/src/fm/components/app-menu/app-menu.component.html
+++ b/projects/common/src/fm/components/app-menu/app-menu.component.html
@@ -1,5 +1,5 @@
 <div>
-    <div   (click)="toggle($event)" class="rounded-circle menu-button hidden"  [ngClass]="{'hidden':!user}">
+    <div   (click)="toggle($event)" class="rounded-circle menu-button hidden"  [ngClass]="{'hidden':!user || noContent}">
         <span i18n-title title="Apps"><i class="fas fa-th" aria-hidden="true"></i></span>
         <div class="menu hidden" [ngClass]="{'hidden':!showMenu}">                                     
             <router-outlet name="app-menu"></router-outlet>            
diff --git a/projects/common/src/fm/components/app-menu/app-menu.component.ts b/projects/common/src/fm/components/app-menu/app-menu.component.ts
index 4df1e62..d9f405a 100644
--- a/projects/common/src/fm/components/app-menu/app-menu.component.ts
+++ b/projects/common/src/fm/components/app-menu/app-menu.component.ts
@@ -1,4 +1,5 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input,AfterViewInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 
 
 import { IUser } from '../../models/user';
@@ -11,16 +12,25 @@ import * as appActions from '../../actions/app-common.actions';
   templateUrl: './app-menu.component.html',
   styleUrls: ['./app-menu.component.scss']
 })
-export class AppMenuComponent implements OnInit {
+export class AppMenuComponent implements OnInit,AfterViewInit {
 
   @Input() user:IUser;
   @Input() showMenu:boolean;
+  public noContent: boolean = true;
 
-  constructor(private store: Store<appReducers.State>) { }
+  constructor(private store: Store<appReducers.State>, private route: ActivatedRoute) { }
 
   ngOnInit(): void {
   }
 
+  ngAfterViewInit() {
+    this.route.children.forEach((entry) => {
+      if(entry.outlet=="app-menu") {
+        this.noContent=false;
+      }
+    });
+  }
+
   toggle(event:MouseEvent) {
     event.stopPropagation();
     this.store.dispatch(new appActions.ToggleAppMenu());
diff --git a/projects/common/src/fm/components/help-menu/help-menu.component.html b/projects/common/src/fm/components/help-menu/help-menu.component.html
index c679e87..e6f42ad 100644
--- a/projects/common/src/fm/components/help-menu/help-menu.component.html
+++ b/projects/common/src/fm/components/help-menu/help-menu.component.html
@@ -1,5 +1,5 @@
 <div>
-    <div   (click)="toggle($event)" class="rounded-circle menu-button hidden"  [ngClass]="{'hidden':!user}">
+    <div   (click)="toggle($event)" class="rounded-circle menu-button hidden"  [ngClass]="{'hidden':!user || noContent}">
         <span i18n-title title="Help"><i class="fas fa-question" aria-hidden="true"></i></span>
         <div class="menu hidden" [ngClass]="{'hidden':!showMenu}">                                     
             <router-outlet name="help-menu"></router-outlet>            
diff --git a/projects/common/src/fm/components/help-menu/help-menu.component.ts b/projects/common/src/fm/components/help-menu/help-menu.component.ts
index f3ca928..ad2995e 100644
--- a/projects/common/src/fm/components/help-menu/help-menu.component.ts
+++ b/projects/common/src/fm/components/help-menu/help-menu.component.ts
@@ -1,5 +1,6 @@
 import { Input } from '@angular/core';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit,AfterViewInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 
 import { IUser } from '../../models/user';
 import {Store} from '@ngrx/store';
@@ -11,16 +12,25 @@ import * as appActions from '../../actions/app-common.actions';
   templateUrl: './help-menu.component.html',
   styleUrls: ['./help-menu.component.scss']
 })
-export class HelpMenuComponent implements OnInit {
+export class HelpMenuComponent implements OnInit, AfterViewInit {
   
   @Input() user:IUser;
   @Input() showMenu:boolean;
+  public noContent: boolean = true;
 
-  constructor(private store: Store<appReducers.State>) { }
+  constructor(private store: Store<appReducers.State>, private route: ActivatedRoute) { }
 
   ngOnInit(): void {
   }
 
+  ngAfterViewInit() {
+    this.route.children.forEach((entry) => {
+      if(entry.outlet=="help-menu") {
+        this.noContent=false;
+      }
+    });
+  }
+
   toggle(event:MouseEvent) {
     event.stopPropagation();
     this.store.dispatch(new appActions.ToggleHelpMenu());
diff --git a/projects/common/src/fm/components/notification-menu/notification-menu.component.html b/projects/common/src/fm/components/notification-menu/notification-menu.component.html
index fab5e66..5d25964 100644
--- a/projects/common/src/fm/components/notification-menu/notification-menu.component.html
+++ b/projects/common/src/fm/components/notification-menu/notification-menu.component.html
@@ -1,5 +1,5 @@
 <div>
-    <div   (click)="toggle($event)" class="rounded-circle menu-button hidden"  [ngClass]="{'hidden':!user}">
+    <div   (click)="toggle($event)" class="rounded-circle menu-button hidden"  [ngClass]="{'hidden':!user || noContent}">
         <span class="unread badge bg-info notification rounded-pill hidden" [ngClass]="{'hidden':unread==0}">{{unread}}</span>
         <span i18n-title title="Notifications"><i class="fas fa-bell" [ngClass]="{'fa-bell-on':unread!=0}" aria-hidden="true"></i></span>
         <div class="menu hidden" [ngClass]="{'hidden':!showMenu}">                                     
diff --git a/projects/common/src/fm/components/notification-menu/notification-menu.component.ts b/projects/common/src/fm/components/notification-menu/notification-menu.component.ts
index c1b2ace..349e214 100644
--- a/projects/common/src/fm/components/notification-menu/notification-menu.component.ts
+++ b/projects/common/src/fm/components/notification-menu/notification-menu.component.ts
@@ -1,5 +1,5 @@
-import { Component, OnInit, Input } from '@angular/core';
-
+import { Component, OnInit, Input,AfterViewInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 
 import { IUser } from '../../models/user';
 import {Store} from '@ngrx/store';
@@ -11,17 +11,26 @@ import * as appActions from '../../actions/app-common.actions';
   templateUrl: './notification-menu.component.html',
   styleUrls: ['./notification-menu.component.scss']
 })
-export class NotificationMenuComponent implements OnInit {
+export class NotificationMenuComponent implements OnInit,AfterViewInit {
 
   @Input() unread:number;
   @Input() user:IUser;
   @Input() showMenu:boolean;
+  public noContent: boolean = true;
 
-  constructor(private store: Store<appReducers.State>) { }
+  constructor(private store: Store<appReducers.State>, private route: ActivatedRoute) { }
 
   ngOnInit(): void {
   }
 
+  ngAfterViewInit() {
+    this.route.children.forEach((entry) => {
+      if(entry.outlet=="notification-menu") {
+        this.noContent=false;
+      }
+    });
+  }
+
   toggle(event:MouseEvent) {
     event.stopPropagation();
     this.store.dispatch(new appActions.ToggleNotificationMenu());