4 files changed, 39 insertions, 3 deletions

diff --git a/client/src/app/shared/images/global-icon.component.ts b/client/src/app/shared/images/global-icon.component.ts
index 3fa6fea96..d85f269ea 100644
--- a/client/src/app/shared/images/global-icon.component.ts
+++ b/client/src/app/shared/images/global-icon.component.ts
@@ -2,6 +2,8 @@ import { Component, ElementRef, Input, OnInit } from '@angular/core'
 
 const icons = {
   'add': require('../../../assets/images/global/add.html'),
+  'user': require('../../../assets/images/global/user.html'),
+  'sign-out': require('../../../assets/images/global/sign-out.html'),
   'syndication': require('../../../assets/images/global/syndication.html'),
   'help': require('../../../assets/images/global/help.html'),
   'sparkle': require('../../../assets/images/global/sparkle.html'),
@@ -11,12 +13,15 @@ const icons = {
   'no': require('../../../assets/images/global/no.html'),
   'cloud-download': require('../../../assets/images/global/cloud-download.html'),
   'undo': require('../../../assets/images/global/undo.html'),
+  'history': require('../../../assets/images/global/history.html'),
   'circle-tick': require('../../../assets/images/global/circle-tick.html'),
   'cog': require('../../../assets/images/global/cog.html'),
   'download': require('../../../assets/images/global/download.html'),
+  'go': require('../../../assets/images/menu/go.html'),
   'edit': require('../../../assets/images/global/edit.html'),
   'im-with-her': require('../../../assets/images/global/im-with-her.html'),
   'delete': require('../../../assets/images/global/delete.html'),
+  'server': require('../../../assets/images/global/server.html'),
   'cross': require('../../../assets/images/global/cross.html'),
   'validate': require('../../../assets/images/global/validate.html'),
   'tick': require('../../../assets/images/global/tick.html'),
@@ -28,7 +33,17 @@ const icons = {
   'share': require('../../../assets/images/video/share.html'),
   'upload': require('../../../assets/images/video/upload.html'),
   'playlist-add': require('../../../assets/images/video/playlist-add.html'),
-  'play': require('../../../assets/images/global/play.html')
+  'play': require('../../../assets/images/global/play.html'),
+  'playlists': require('../../../assets/images/global/playlists.html'),
+  'about': require('../../../assets/images/menu/about.html'),
+  'globe': require('../../../assets/images/menu/globe.html'),
+  'home': require('../../../assets/images/menu/home.html'),
+  'recently-added': require('../../../assets/images/menu/recently-added.html'),
+  'trending': require('../../../assets/images/menu/trending.html'),
+  'videos': require('../../../assets/images/global/videos.html'),
+  'folder': require('../../../assets/images/global/folder.html'),
+  'administration': require('../../../assets/images/menu/administration.html'),
+  'subscriptions': require('../../../assets/images/menu/subscriptions.html')
 }
 
 export type GlobalIconName = keyof typeof icons
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.html b/client/src/app/shared/menu/top-menu-dropdown.component.html
index d3c896019..8d58fa1db 100644
--- a/client/src/app/shared/menu/top-menu-dropdown.component.html
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.html
@@ -13,7 +13,11 @@
       </span>
 
       <div ngbDropdownMenu>
-        <a *ngFor="let menuChild of menuEntry.children" class="dropdown-item" [routerLink]="menuChild.routerLink">{{ menuChild.label }}</a>
+        <a *ngFor="let menuChild of menuEntry.children" class="dropdown-item" [ngClass]="{ icon: hasIcons }" [routerLink]="menuChild.routerLink">
+          <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName"></my-global-icon>
+
+          {{ menuChild.label }}
+        </a>
       </div>
     </div>
 
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.scss b/client/src/app/shared/menu/top-menu-dropdown.component.scss
index 77159532f..d7c7de957 100644
--- a/client/src/app/shared/menu/top-menu-dropdown.component.scss
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.scss
@@ -1,3 +1,6 @@
+@import '_variables';
+@import '_mixins';
+
 .parent-entry {
   span[role=button] {
     cursor: pointer;
@@ -16,3 +19,9 @@
 /deep/ .dropdown-menu {
   margin-top: 0 !important;
 }
+
+.icon {
+  @include dropdown-with-icon-item;
+
+  top: -1px;
+}
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.ts b/client/src/app/shared/menu/top-menu-dropdown.component.ts
index e859c30dd..e951ea236 100644
--- a/client/src/app/shared/menu/top-menu-dropdown.component.ts
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.ts
@@ -3,6 +3,7 @@ import { filter, take } from 'rxjs/operators'
 import { NavigationEnd, Router } from '@angular/router'
 import { Subscription } from 'rxjs'
 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
+import { GlobalIconName } from '@app/shared/images/global-icon.component'
 
 export type TopMenuDropdownParam = {
   label: string
@@ -11,6 +12,8 @@ export type TopMenuDropdownParam = {
   children?: {
     label: string
     routerLink: string
+
+    iconName?: GlobalIconName
   }[]
 }
 
@@ -23,6 +26,7 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
   @Input() menuEntries: TopMenuDropdownParam[] = []
 
   suffixLabels: { [ parentLabel: string ]: string }
+  hasIcons = false
 
   private openedOnHover = false
   private routeSub: Subscription
@@ -35,6 +39,10 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
     this.routeSub = this.router.events
                         .pipe(filter(event => event instanceof NavigationEnd))
                         .subscribe(() => this.updateChildLabels(window.location.pathname))
+
+    this.hasIcons = this.menuEntries.some(
+      e => e.children && e.children.some(c => !!c.iconName)
+    )
   }
 
   ngOnDestroy () {
@@ -48,7 +56,7 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
     // Menu was closed
     dropdown.openChange
             .pipe(take(1))
-            .subscribe(e => this.openedOnHover = false)
+            .subscribe(() => this.openedOnHover = false)
   }
 
   dropdownAnchorClicked (dropdown: NgbDropdown) {