Use isDisplayed() method intead of isHidden value

client/src/app/+admin/admin.component.ts

@@ -21,65 +21,74 @@ export class AdminComponent implements OnInit {
   ngOnInit () {
     const federationItems: TopMenuDropdownParam = {
       label: this.i18n('Federation'),
+      isDisplayed: () => true,
       children: [
         {
           label: this.i18n('Instances you follow'),
           routerLink: '/admin/follows/following-list',
-          iconName: 'following'
+          iconName: 'following',
+          isDisplayed: () => true
         },
         {
           label: this.i18n('Instances following you'),
           routerLink: '/admin/follows/followers-list',
-          iconName: 'follower'
+          iconName: 'follower',
+          isDisplayed: () => true
         },
         {
           label: this.i18n('Video redundancies'),
           routerLink: '/admin/follows/video-redundancies-list',
-          iconName: 'videos'
+          iconName: 'videos',
+          isDisplayed: () => true
         }
       ]
     }
 
     const moderationItems: TopMenuDropdownParam = {
       label: this.i18n('Moderation'),
-      children: []
+      children: [],
+      isDisplayed: () => true
     }
 
     if (this.hasAbusesRight()) {
       moderationItems.children.push({
         label: this.i18n('Reports'),
         routerLink: '/admin/moderation/abuses/list',
-        iconName: 'flag'
+        iconName: 'flag',
+        isDisplayed: () => true
       })
     }
     if (this.hasVideoBlocklistRight()) {
       moderationItems.children.push({
         label: this.i18n('Video blocks'),
         routerLink: '/admin/moderation/video-blocks/list',
-        iconName: 'cross'
+        iconName: 'cross',
+        isDisplayed: () => true
       })
     }
     if (this.hasAccountsBlocklistRight()) {
       moderationItems.children.push({
         label: this.i18n('Muted accounts'),
         routerLink: '/admin/moderation/blocklist/accounts',
-        iconName: 'user-x'
+        iconName: 'user-x',
+        isDisplayed: () => true
       })
     }
     if (this.hasServersBlocklistRight()) {
       moderationItems.children.push({
         label: this.i18n('Muted servers'),
         routerLink: '/admin/moderation/blocklist/servers',
-        iconName: 'peertube-x'
+        iconName: 'peertube-x',
+        isDisplayed: () => true
       })
     }
 
-    if (this.hasUsersRight()) this.menuEntries.push({ label: this.i18n('Users'), routerLink: '/admin/users' })
+    if (this.hasUsersRight()) this.menuEntries.push({ label: this.i18n('Users'), routerLink: '/admin/users', isDisplayed: () => true })
     if (this.hasServerFollowRight()) this.menuEntries.push(federationItems)
     if (this.hasAbusesRight() || this.hasVideoBlocklistRight()) this.menuEntries.push(moderationItems)
-    if (this.hasConfigRight()) this.menuEntries.push({ label: this.i18n('Configuration'), routerLink: '/admin/config' })
-    if (this.hasPluginsRight()) this.menuEntries.push({ label: this.i18n('Plugins/Themes'), routerLink: '/admin/plugins' })
-    if (this.hasJobsRight() || this.hasLogsRight() || this.hasDebugRight()) this.menuEntries.push({ label: this.i18n('System'), routerLink: '/admin/system' })
+    if (this.hasConfigRight()) this.menuEntries.push({ label: this.i18n('Configuration'), routerLink: '/admin/config', isDisplayed: () => true })
+    if (this.hasPluginsRight()) this.menuEntries.push({ label: this.i18n('Plugins/Themes'), routerLink: '/admin/plugins', isDisplayed: () => true })
+    if (this.hasJobsRight() || this.hasLogsRight() || this.hasDebugRight()) this.menuEntries.push({ label: this.i18n('System'), routerLink: '/admin/system', isDisplayed: () => true })
   }
 
   hasUsersRight () {

client/src/app/+my-account/my-account.component.ts

@@ -32,32 +32,37 @@ export class MyAccountComponent implements OnInit {
       () => {
         const libraryEntries: TopMenuDropdownParam = {
           label: this.i18n('My library'),
+          isDisplayed: () => true,
           children: [
             {
               label: this.i18n('My channels'),
               routerLink: '/my-account/video-channels',
-              iconName: 'channel'
+              iconName: 'channel',
+              isDisplayed: () => true
             },
             {
               label: this.i18n('My videos'),
               routerLink: '/my-account/videos',
               iconName: 'videos',
-              isHidden: !this.user.canSeeVideosLink()
+              isDisplayed: () => this.user.canSeeVideosLink()
             },
             {
               label: this.i18n('My playlists'),
               routerLink: '/my-account/video-playlists',
-              iconName: 'playlists'
+              iconName: 'playlists',
+              isDisplayed: () => true
             },
             {
               label: this.i18n('My subscriptions'),
               routerLink: '/my-account/subscriptions',
-              iconName: 'inbox-full'
+              iconName: 'inbox-full',
+              isDisplayed: () => true
             },
             {
               label: this.i18n('My history'),
               routerLink: '/my-account/history/videos',
-              iconName: 'history'
+              iconName: 'history',
+              isDisplayed: () => true
             }
           ]
         }
@@ -67,39 +72,45 @@ export class MyAccountComponent implements OnInit {
             label: 'My imports',
             routerLink: '/my-account/video-imports',
             iconName: 'cloud-download',
-            isHidden: !this.user.canSeeVideosLink()
+            isDisplayed: () => this.user.canSeeVideosLink()
           })
         }
 
         const miscEntries: TopMenuDropdownParam = {
           label: this.i18n('Misc'),
+          isDisplayed: () => true,
           children: [
             {
               label: this.i18n('Muted accounts'),
               routerLink: '/my-account/blocklist/accounts',
-              iconName: 'user-x'
+              iconName: 'user-x',
+              isDisplayed: () => true
             },
             {
               label: this.i18n('Muted servers'),
               routerLink: '/my-account/blocklist/servers',
-              iconName: 'peertube-x'
+              iconName: 'peertube-x',
+              isDisplayed: () => true
             },
             {
               label: this.i18n('Ownership changes'),
               routerLink: '/my-account/ownership',
-              iconName: 'download'
+              iconName: 'download',
+              isDisplayed: () => true
             }
           ]
         }
 
         this.menuEntries = [
           {
             label: this.i18n('My settings'),
-            routerLink: '/my-account/settings'
+            routerLink: '/my-account/settings',
+            isDisplayed: () => true
           },
           {
             label: this.i18n('My notifications'),
-            routerLink: '/my-account/notifications'
+            routerLink: '/my-account/notifications',
+            isDisplayed: () => true
           },
           libraryEntries,
           miscEntries

client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html

@@ -1,9 +1,9 @@
 <div class="sub-menu" [ngClass]="{ 'no-scroll': isModalOpened }">
   <ng-container *ngFor="let menuEntry of menuEntries; index as id">
 
-    <a *ngIf="menuEntry.routerLink && !menuEntry.isHidden" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page title-page-settings">{{ menuEntry.label }}</a>
+    <a *ngIf="menuEntry.routerLink && menuEntry.isDisplayed()" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page title-page-settings">{{ menuEntry.label }}</a>
 
-    <div *ngIf="!menuEntry.routerLink" ngbDropdown class="parent-entry"
+    <div *ngIf="!menuEntry.routerLink && menuEntry.isDisplayed()" ngbDropdown class="parent-entry"
       #dropdown="ngbDropdown" autoClose="outside">
       <span
         *ngIf="isInSmallView"
@@ -26,7 +26,7 @@
 
       <div ngbDropdownMenu>
         <ng-container *ngFor="let menuChild of menuEntry.children">
-          <a *ngIf="!menuChild.isHidden" class="dropdown-item"
+          <a *ngIf="menuChild.isDisplayed()" class="dropdown-item"
             [ngClass]="{ icon: hasIcons, active: suffixLabels[menuEntry.label] === menuChild.label }"
             [routerLink]="menuChild.routerLink">
             <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName" aria-hidden="true"></my-global-icon>
@@ -44,7 +44,7 @@
     <ng-container *ngFor="let menuEntry of menuEntries; index as id">
       <div [ngClass]="{ hidden: id !== currentMenuEntryIndex }">
         <ng-container *ngFor="let menuChild of menuEntry.children">
-          <a *ngIf="!menuChild.isHidden"
+          <a *ngIf="menuChild.isDisplayed()"
             [ngClass]="{ icon: hasIcons }"
             [routerLink]="menuChild.routerLink" routerLinkActive="active" (click)="dismissOtherModals()">
             <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName" aria-hidden="true"></my-global-icon>

client/src/app/shared/shared-main/misc/top-menu-dropdown.component.ts

@@ -9,12 +9,12 @@ import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap'
 export type TopMenuDropdownParam = {
   label: string
   routerLink?: string
-  isHidden?: boolean
+  isDisplayed (): boolean
 
   children?: {
     label: string
     routerLink: string
-    isHidden?: boolean
+    isDisplayed (): boolean
     iconName?: GlobalIconName
   }[]
 }