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