Add ListOverflow component to prevent sub-menu overflow

2 files changed, 14 insertions, 4 deletions

diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index debda9948..735a8f2c8 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -29,10 +29,12 @@
       </div>
     </div>
 
-    <div class="links">
-      <a i18n routerLink="videos" routerLinkActive="active" class="title-page">Videos</a>
-      <a i18n routerLink="video-playlists" routerLinkActive="active" class="title-page">Video playlists</a>
-      <a i18n routerLink="about" routerLinkActive="active" class="title-page">About</a>
+    <div class="links w-100">
+      <ng-template #linkTemplate let-item="item">
+        <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page">{{ item.label }}</a>
+      </ng-template>
+
+      <list-overflow [items]="links" [itemTemplate]="linkTemplate"></list-overflow>
     </div>
   </div>
 
diff --git a/client/src/app/+video-channels/video-channels.component.ts b/client/src/app/+video-channels/video-channels.component.ts
index 5ca9581a8..0889ca854 100644
--- a/client/src/app/+video-channels/video-channels.component.ts
+++ b/client/src/app/+video-channels/video-channels.component.ts
@@ -9,6 +9,7 @@ import { AuthService, Notifier } from '@app/core'
 import { Hotkey, HotkeysService } from 'angular2-hotkeys'
 import { SubscribeButtonComponent } from '@app/shared/user-subscription/subscribe-button.component'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { ListOverflowItem } from '@app/shared/misc/list-overflow.component'
 
 @Component({
   templateUrl: './video-channels.component.html',
@@ -19,6 +20,7 @@ export class VideoChannelsComponent implements OnInit, OnDestroy {
 
   videoChannel: VideoChannel
   hotkeys: Hotkey[]
+  links: ListOverflowItem[] = []
   isChannelManageable = false
 
   private routeSub: Subscription
@@ -62,6 +64,12 @@ export class VideoChannelsComponent implements OnInit, OnDestroy {
       }, undefined, this.i18n('Subscribe to the account'))
     ]
     if (this.isUserLoggedIn()) this.hotkeysService.add(this.hotkeys)
+
+    this.links = [
+      { label: this.i18n('Videos'), routerLink: 'videos' },
+      { label: this.i18n('Video playlists'), routerLink: 'video-playlists' },
+      { label: this.i18n('About'), routerLink: 'about' }
+    ]
   }
 
   ngOnDestroy () {