Add channels link in menu

diff --git a/client/src/app/core/menu/menu.service.ts b/client/src/app/core/menu/menu.service.ts
index 81837db7eb024746aec2a0274f4bcf1363fe395d..d865c7da2e7ce2e5f0e75c1370571e6d6ec915b8 100644 (file)
--- a/client/src/app/core/menu/menu.service.ts
+++ b/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,

diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index c1e5f79a6fa75eb51f0e1e5aa3b6f2cd5b736726..c5d08ab75a8037d2e867d42f08225396648d3596 100644 (file)
--- a/client/src/app/menu/menu.component.html
+++ b/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>

diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index a824c69fe91237f8f62b8839f4fa8d6c2f631c73..6cfe2643118ca210225778cb919e3748f885290c 100644 (file)
--- a/client/src/app/menu/menu.component.scss
+++ b/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] {
-    position: relative;
-    right: -1px;
-  }
-
-  &[iconName=channel] {
-    margin-top: -2px;
-  }
-
-  &[iconName='sign-out'] {
-    position: relative;
-    right: -2px;
-    height: 20px;
-    width: 20px;
+  &.channel-icon {
+   top: -2px;
   }
 }

diff --git a/client/src/assets/images/feather/log-out.svg b/client/src/assets/images/feather/log-out.svg
index c9002c903aa06031c75cc32b66db30e70365d28a..627b444936d53f8bdf9a0eceae40e8c12b9795a6 100644 (file)
--- a/client/src/assets/images/feather/log-out.svg
+++ b/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>
\ No newline at end of file
+<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>