Add title to left menu toggle

3 files changed, 11 insertions, 1 deletions

diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index 9a8a8e14f..77d876f8e 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -6,7 +6,7 @@
   <div class="header">
 
     <div class="top-left-block">
-      <span class="icon icon-menu" (click)="menu.toggleMenu()"></span>
+      <span class="icon icon-menu" role="button" [title]="getToggleTitle()" (click)="menu.toggleMenu()"></span>
 
       <a class="peertube-title" [routerLink]="defaultRoute">
         <span class="icon icon-logo"></span>
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index 75f4bdfe6..3d1026ac4 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -103,6 +103,12 @@ export class AppComponent implements OnInit, AfterViewInit {
     this.pluginService.initializeCustomModal(this.customModal)
   }
 
+  getToggleTitle () {
+    if (this.menu.isDisplayed()) return $localize`Close the left menu`
+
+    return $localize`Open the left menu`
+  }
+
   isUserLoggedIn () {
     return this.authService.isLoggedIn()
   }
diff --git a/client/src/app/core/menu/menu.service.ts b/client/src/app/core/menu/menu.service.ts
index 9c0433bca..502d3bb2f 100644
--- a/client/src/app/core/menu/menu.service.ts
+++ b/client/src/app/core/menu/menu.service.ts
@@ -25,6 +25,10 @@ export class MenuService {
     this.isMenuChangedByUser = true
   }
 
+  isDisplayed () {
+    return this.isMenuDisplayed
+  }
+
   setMenuDisplay (display: boolean) {
     this.isMenuDisplayed = display