From e682b375e7573b71125fcf3157b8f8e1db16615c Mon Sep 17 00:00:00 2001
From: Willem Dantuma <willem.dantuma@dobs.nl>
Date: Fri, 4 Sep 2020 10:10:01 +0200
Subject: [PATCH] Add user-menu router outlet

---
 .../src/fm/components/user-menu/user-menu.component.html | 9 +++++----
 .../src/fm/components/user-menu/user-menu.component.scss | 7 +++++--
 .../src/fm/components/user-menu/user-menu.component.ts   | 2 +-
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/projects/common/src/fm/components/user-menu/user-menu.component.html b/projects/common/src/fm/components/user-menu/user-menu.component.html
index fa8895e..1c76fe3 100644
--- a/projects/common/src/fm/components/user-menu/user-menu.component.html
+++ b/projects/common/src/fm/components/user-menu/user-menu.component.html
@@ -1,13 +1,14 @@
-<div *ngIf="user">
-    <div (click)="toggle($event)" class="rounded-circle menu-button" [title]="user.name">
-        <span>{{getLetter()}}</span>
+<div>
+    <div (click)="toggle($event)" class="rounded-circle menu-button hidden" [ngClass]="{'hidden':!user}">
+        <span *ngIf="user"><span  [title]="user.name">{{getLetter()}}</span></span>
         <div class="menu hidden" [ngClass]="{'hidden':!showMenu}">
-            <div  class="card">           
+            <div  class="card" *ngIf="user">           
                 <div class="card-body">
                     <div class="username">{{user.name}}</div>
                     <div><a href="#" (click)="logout($event)" i18n>logout</a></div>
                 </div>
             </div>    
+            <router-outlet name="user-menu"></router-outlet>
         </div>
     </div>
 </div>
diff --git a/projects/common/src/fm/components/user-menu/user-menu.component.scss b/projects/common/src/fm/components/user-menu/user-menu.component.scss
index a3fe179..4c121de 100644
--- a/projects/common/src/fm/components/user-menu/user-menu.component.scss
+++ b/projects/common/src/fm/components/user-menu/user-menu.component.scss
@@ -26,8 +26,7 @@ div.menu-button > span {
 
 .card {      
     padding:0.5rem;
-    min-width: 10rem;      
-    overflow: hidden;
+    min-width: 10rem;          
 }
 
 .username {
@@ -43,4 +42,8 @@ div.menu-button > span {
 
 .hidden {
     max-height: 0;   
+}
+
+.menu-button.hidden {
+    overflow: hidden;
 }
\ No newline at end of file
diff --git a/projects/common/src/fm/components/user-menu/user-menu.component.ts b/projects/common/src/fm/components/user-menu/user-menu.component.ts
index 8e3f826..7e279d5 100644
--- a/projects/common/src/fm/components/user-menu/user-menu.component.ts
+++ b/projects/common/src/fm/components/user-menu/user-menu.component.ts
@@ -21,7 +21,7 @@ export class UserMenuComponent implements OnInit {
   }
 
   getLetter():string {
-      return this.user.name ? this.user.name.substr(0,1).toUpperCase():"";
+      return this.user && this.user.name ? this.user.name.substr(0,1).toUpperCase():"";
   }
 
   logout(event:MouseEvent) {