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

   1 <div class="menu-wrapper">
   2   <menu>
   3     <div class="top-menu">
   4       <div *ngIf="isLoggedIn" class="logged-in-block">
   5         <my-avatar-notification [user]="user"></my-avatar-notification>
   6
   7         <div class="logged-in-info">
   8           <a routerLink="/my-account/settings" class="logged-in-username">{{ user.account?.displayName }}</a>
   9           <div class="logged-in-email">{{ user.username }}</div>
  10         </div>
  11
  12         <div class="logged-in-more" ngbDropdown placement="bottom-right">
  13           <span class="glyphicon glyphicon-option-vertical" ngbDropdownToggle role="button"></span>
  14
  15           <div ngbDropdownMenu>
  16             <a *ngIf="user.account" i18n [routerLink]="[ '/accounts', user.account.nameWithHost ]" class="dropdown-item">
  17              My public profile
  18             </a>
  19
  20             <a i18n routerLink="/my-account" class="dropdown-item">
  21               My account
  22             </a>
  23
  24             <a i18n routerLink="/my-account/videos" class="dropdown-item">
  25               My videos
  26             </a>
  27
  28             <a i18n (click)="logout($event)" class="dropdown-item" href="#">
  29               Log out
  30             </a>
  31           </div>
  32         </div>
  33       </div>
  34
  35       <div *ngIf="!isLoggedIn" class="button-block">
  36         <a i18n routerLink="/login" class="login-button">Login</a>
  37         <a i18n *ngIf="isRegistrationAllowed()" routerLink="/signup" class="create-account-button">Create an account</a>
  38       </div>
  39
  40       <div class="panel-block">
  41         <div i18n class="block-title">Videos</div>
  42
  43         <a *ngIf="isLoggedIn" routerLink="/videos/subscriptions" routerLinkActive="active">
  44           <span class="icon icon-videos-subscriptions"></span>
  45           <ng-container i18n>Subscriptions</ng-container>
  46         </a>
  47
  48         <a routerLink="/videos/overview" routerLinkActive="active">
  49           <span class="icon icon-videos-overview"></span>
  50           <ng-container i18n>Overview</ng-container>
  51         </a>
  52
  53         <a routerLink="/videos/trending" routerLinkActive="active">
  54           <span class="icon icon-videos-trending"></span>
  55           <ng-container i18n>Trending</ng-container>
  56         </a>
  57
  58         <a routerLink="/videos/recently-added" routerLinkActive="active">
  59           <span class="icon icon-videos-recently-added"></span>
  60           <ng-container i18n>Recently added</ng-container>
  61         </a>
  62
  63         <a routerLink="/videos/local" routerLinkActive="active">
  64           <span class="icon icon-videos-local"></span>
  65           <ng-container i18n>Local</ng-container>
  66         </a>
  67       </div>
  68
  69       <div class="panel-block">
  70         <div class="block-title" i18n>More</div>
  71
  72         <a *ngIf="userHasAdminAccess" [routerLink]="getFirstAdminRouteAvailable()" routerLinkActive="active">
  73           <span class="icon icon-administration"></span>
  74           <ng-container i18n>Administration</ng-container>
  75         </a>
  76
  77         <a routerLink="/about" routerLinkActive="active">
  78           <span class="icon icon-about"></span>
  79           <ng-container i18n>About</ng-container>
  80         </a>
  81       </div>
  82     </div>
  83
  84     <div class="footer d-flex justify-content-between">
  85       <span class="language">
  86         <span tabindex="0" (keyup.enter)="openLanguageChooser()" (click)="openLanguageChooser()" i18n-title title="Change the language" class="icon icon-language"></span>
  87       </span>
  88       <span class="shortcuts">
  89         <span tabindex="0" (keyup.enter)="openHotkeysCheatSheet()" (click)="openHotkeysCheatSheet()" i18n-title title="Show keyboard shortcuts" class="icon icon-shortcuts"></span>
  90       </span>
  91       <span class="color-palette">
  92         <span tabindex="0" (keyup.enter)="toggleDarkTheme()" (click)="toggleDarkTheme()" i18n-title title="Toggle dark interface" class="icon icon-moonsun"></span>
  93       </span>
  94     </div>
  95   </menu>
  96 </div>
  97
  98 <my-language-chooser #languageChooserModal></my-language-chooser>