Add channels link in menu

client/src/app/core/menu/menu.service.ts

@@ -7,6 +7,7 @@ import { ScreenService } from '../wrappers'
 
 export type MenuLink = {
   icon: GlobalIconName
+  iconClass?: string
 
   label: string
   // Used by the left menu for example
@@ -70,6 +71,14 @@ export class MenuService {
     let links: MenuLink[] = []
 
     if (userCanSeeVideosLink) {
+      links.push({
+        path: '/my-library/video-channels',
+        icon: 'channel' as GlobalIconName,
+        iconClass: 'channel-icon',
+        shortLabel: $localize`Channels`,
+        label: $localize`My channels`
+      })
+
       links.push({
         path: '/my-library/videos',
         icon: 'videos' as GlobalIconName,

client/src/app/menu/menu.component.html

@@ -88,7 +88,7 @@
           </a>
 
           <a class="menu-link" routerLink="/my-library" routerLinkActive="active" #libraryLink (click)="onActiveLinkScrollToAnchor(libraryLink)">
-            <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon>
+            <my-global-icon class="channel-icon" iconName="channel" aria-hidden="true"></my-global-icon>
             <ng-container i18n>My library</ng-container>
           </a>
 
@@ -111,7 +111,7 @@
           <div i18n class="block-title">{{ menuSection.title }}</div>
 
           <a class="menu-link" *ngFor="let link of menuSection.links" [routerLink]="link.path" routerLinkActive="active">
-            <my-global-icon *ngIf="link.icon" [iconName]="link.icon" aria-hidden="true"></my-global-icon>
+            <my-global-icon *ngIf="link.icon" [iconName]="link.icon" [ngClass]="link.iconClass" aria-hidden="true"></my-global-icon>
             <ng-container>{{ link.shortLabel }}</ng-container>
           </a>
         </div>

client/src/app/menu/menu.component.scss

@@ -391,26 +391,17 @@ my-actor-avatar {
 }
 
 my-global-icon {
-  &[iconName=playlists] {
+  position: relative;
+  top: -1px;
+
+  .playlist-icon {
     @include margin-right(16px);
 
     height: 24px;
     width: 24px;
   }
 
-  &[iconName=videos] {
+  &.channel-icon {
-    position: relative;
+   top: -2px;
-    right: -1px;
-  }
-
-  &[iconName=channel] {
-    margin-top: -2px;
-  }
-
-  &[iconName='sign-out'] {
-    position: relative;
-    right: -2px;
-    height: 20px;
-    width: 20px;
   }
 }

client/src/assets/images/feather/log-out.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-out"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="24" viewBox="0 0 22 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-out"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>