Implementing basic sticky top navbar #587 #44 #27 #615 #427

src/frontend/app/ui/frame/frame.component.css

@@ -1,12 +1,30 @@
-nav {
-  z-index: 999;
-}
-
-.navbar {
+.navbar-container {
+  z-index: 1040;
   margin-bottom: 20px;
+  position: absolute;
+  width: 100%;
 }
 
+.auto-hide-navbar {
+  position: sticky;
+  top: 0;
+  transform: translateY(0);
+}
 
+.navbar-keep-top {
+  position: relative;
+  transform: translateY(0);
+  transition: transform 0s;
+}
+
+.hide-navbar {
+  transform: translateY(-100%);
+
+}
+
+.animate-navbar {
+  transition: transform 0.3s ease-in-out;
+}
 
 .divider-vertical:first-child {
   display: none;
@@ -28,7 +46,6 @@ nav {
 }
 
 
-
 a.dropdown-item, button.dropdown-item, div.dropdown-item {
   padding: 0.3rem 1.0rem 0.3rem 0.8rem;
 }

src/frontend/app/ui/frame/frame.component.html

@@ -1,156 +1,162 @@
 <ngx-loading-bar [includeSpinner]="false" color="#337ab7" height="3px"></ngx-loading-bar>
-<nav class="navbar navbar-expand navbar-dark bg-dark">
-  <div class="container-fluid">
-    <a class="navbar-brand d-none d-sm-block" [routerLink]="['/gallery']"
-       [queryParams]="queryService.getParams()">
-      <img src="assets/icon_inv.png" width="30" height="30" class="d-inline-block align-top" alt="">
-      <strong class="d-none d-lg-inline-block">{{title}}</strong>
-    </a>
-    <div class="collapse navbar-collapse text-center" id="navbarCollapse" [collapse]="collapsed">
-      <ul class="navbar-nav mb-0 me-2 text-lg-start d-none d-md-flex">
-        <ng-container *ngFor="let link of navbarLinks">
-          <li class="nav-item" *ngIf="link.type === NavigationLinkTypes.albums && isAlbumsAvailable()">
-            <a class="nav-link" [routerLink]="['/albums']" [class.active]="isLinkActive('/albums')" i18n>Albums</a>
-          </li>
-          <li class="nav-item" *ngIf="link.type === NavigationLinkTypes.faces && isFacesAvailable()">
-            <a class="nav-link" [routerLink]="['/faces']" [class.active]="isLinkActive('/faces')" i18n>Faces</a>
-          </li>
-          <li class="nav-item" *ngIf="link.type === NavigationLinkTypes.gallery">
-            <a class="nav-link"
-               [routerLink]="['/gallery']"
-               [queryParams]="queryService.getParams()" [class.active]="isLinkActive('/gallery')" i18n>Gallery</a>
-          </li>
-          <li class="nav-item" *ngIf="link.type === NavigationLinkTypes.url">
-            <a class="nav-link" [href]="link.url" [class.active]="isLinkActive(link.url)">{{link.name}}</a>
-          </li>
-          <li class="nav-item" *ngIf="link.type === NavigationLinkTypes.search">
-            <a class="nav-link" [routerLink]="['/search', link.SearchQuery | json]"
-               [class.active]="isSearchActive(link.SearchQuery)">{{link.name}}</a>
-          </li>
-        </ng-container>
-      </ul>
-      <div class="text-lg-end w-100">
-        <ul class="navbar-nav">
-          <li class="flex-grow-1"></li>
-          <ng-content select="[navbar]"></ng-content>
-          <li class="nav-item w-100" *ngIf="showSearch">
-            <app-gallery-search></app-gallery-search>
-          </li>
-          <li class="nav-item d-xl-block d-none" *ngIf="showShare">
-            <app-gallery-share></app-gallery-share>
-          </li>
-          <li class="nav-item divider-vertical  d-xl-block d-none"
-              *ngIf="authenticationRequired && user.value && showShare">
-          </li>
-          <ng-container *ngIf="authenticationRequired && user.value">
-            <li class="nav-item me-2 ms-2 navbar-text d-xl-block d-none">
+<div #navContainer class="navbar-container auto-hide-navbar "
+     [class.navbar-keep-top]="navbarKeepTop"
+     [class.hide-navbar]="!navbarKeepTop && shouldHideNavbar"
+     [class.animate-navbar]="animateNavbar">
+  <nav class="navbar navbar-expand navbar-dark bg-dark">
+    <div class="container-fluid">
+      <a class="navbar-brand d-none d-sm-block" [routerLink]="['/gallery']"
+         [queryParams]="queryService.getParams()">
+        <img src="assets/icon_inv.png" width="30" height="30" class="d-inline-block align-top" alt="">
+        <strong class="d-none d-lg-inline-block">{{title}}</strong>
+      </a>
+      <div class="collapse navbar-collapse text-center" id="navbarCollapse" [collapse]="collapsed">
+        <ul class="navbar-nav mb-0 me-2 text-lg-start d-none d-md-flex">
+          <ng-container *ngFor="let link of navbarLinks">
+            <li class="nav-item" *ngIf="link.type === NavigationLinkTypes.albums && isAlbumsAvailable()">
+              <a class="nav-link" [routerLink]="['/albums']" [class.active]="isLinkActive('/albums')" i18n>Albums</a>
+            </li>
+            <li class="nav-item" *ngIf="link.type === NavigationLinkTypes.faces && isFacesAvailable()">
+              <a class="nav-link" [routerLink]="['/faces']" [class.active]="isLinkActive('/faces')" i18n>Faces</a>
+            </li>
+            <li class="nav-item" *ngIf="link.type === NavigationLinkTypes.gallery">
+              <a class="nav-link"
+                 [routerLink]="['/gallery']"
+                 [queryParams]="queryService.getParams()" [class.active]="isLinkActive('/gallery')" i18n>Gallery</a>
+            </li>
+            <li class="nav-item" *ngIf="link.type === NavigationLinkTypes.url">
+              <a class="nav-link" [href]="link.url" [class.active]="isLinkActive(link.url)">{{link.name}}</a>
+            </li>
+            <li class="nav-item" *ngIf="link.type === NavigationLinkTypes.search">
+              <a class="nav-link" [routerLink]="['/search', link.SearchQuery | json]"
+                 [class.active]="isSearchActive(link.SearchQuery)">{{link.name}}</a>
+            </li>
+          </ng-container>
+        </ul>
+        <div class="text-lg-end w-100">
+          <ul class="navbar-nav">
+            <li class="flex-grow-1"></li>
+            <ng-content select="[navbar]"></ng-content>
+            <li class="nav-item w-100" *ngIf="showSearch">
+              <app-gallery-search></app-gallery-search>
+            </li>
+            <li class="nav-item d-xl-block d-none" *ngIf="showShare">
+              <app-gallery-share></app-gallery-share>
+            </li>
+            <li class="nav-item divider-vertical  d-xl-block d-none"
+                *ngIf="authenticationRequired && user.value && showShare">
+            </li>
+            <ng-container *ngIf="authenticationRequired && user.value">
+              <li class="nav-item me-2 ms-2 navbar-text d-xl-block d-none">
              <span style="white-space: nowrap;">
                 <span class="oi oi-person"></span> {{user.value.name}}
               </span>
-            </li>
-            <li class="nav-item divider-vertical  d-xl-block d-none">
-            </li>
-          </ng-container>
-          <li class="nav-item d-xl-block d-none">
+              </li>
+              <li class="nav-item divider-vertical  d-xl-block d-none">
+              </li>
+            </ng-container>
+            <li class="nav-item d-xl-block d-none">
             <span>
-              <app-language class="navbar-btn" [isDark]="true"></app-language>
+              <app-language #languageSelector class="navbar-btn" [isDark]="true"></app-language>
             </span>
-          </li>
-          <li class="nav-item divider-vertical d-xl-block d-none">
-          </li>
-          <li class="nav-item dropdown">
-            <div class="btn-group" dropdown placement="bottom"
-                 [insideClick]="true"
-                 *ngIf="isAdmin() || authenticationRequired">
-              <button id="button-alignment" dropdownToggle
-                      type="button" class="btn btn-dark dropdown-toggle"
-                      aria-controls="dropdown-alignment">
-                <span class="oi oi-menu"></span>
-                <span *ngIf="isAdmin() && notificationService.numberOfNotifications>0"
-                      class="navbar-badge badge badge-warning">{{notificationService.numberOfNotifications}}</span>
-              </button>
-              <ul id="dropdown-alignment" *dropdownMenu
-                  class="dropdown-menu dropdown-menu-right"
-                  role="menu" aria-labelledby="button-alignment">
+            </li>
+            <li class="nav-item divider-vertical d-xl-block d-none">
+            </li>
+            <li class="nav-item dropdown">
+              <div class="btn-group" dropdown  #dropdown="bs-dropdown" placement="bottom"
+                   [insideClick]="true">
+                <button id="button-alignment" dropdownToggle
+                        type="button" class="btn btn-dark dropdown-toggle"
+                        aria-controls="dropdown-alignment">
+                  <span class="oi oi-menu"></span>
+                  <span *ngIf="isAdmin() && notificationService.numberOfNotifications>0"
+                        class="navbar-badge badge badge-warning">{{notificationService.numberOfNotifications}}</span>
+                </button>
+                <ul id="dropdown-alignment" *dropdownMenu
+                    class="dropdown-menu dropdown-menu-right"
+                    role="menu" aria-labelledby="button-alignment">
 
-                <li role="menuitem" class="d-xl-none">
-                  <div style="white-space: nowrap;" class="dropdown-item">
-                    <ng-container *ngIf="authenticationRequired && user.value">
-                      <span class="oi oi-person"></span>{{user.value.name}}
-                    </ng-container>
-                    <app-language class="navbar-btn d-inline-block" [isDark]="false"></app-language>
-                  </div>
-                </li>
-                <li class="nav-item d-xl-none" *ngIf="showShare">
-                  <app-gallery-share [dropDownItem]="true"></app-gallery-share>
-                </li>
-                <hr class="d-xl-none"/>
-                <ng-container *ngFor="let link of navbarLinks">
-                  <li class="nav-item d-md-none"
-                      *ngIf="link.type === NavigationLinkTypes.albums && isAlbumsAvailable()">
-                    <a class="dropdown-item" [routerLink]="['/albums']" [class.active]="isLinkActive('/albums')">
-                      <span class="oi oi-grid-two-up"></span>
-                      <ng-container i18n>Albums</ng-container>
-                    </a>
+                  <li role="menuitem" class="d-xl-none">
+                    <div style="white-space: nowrap;" class="dropdown-item">
+                      <ng-container *ngIf="authenticationRequired && user.value">
+                        <span class="oi oi-person"></span>{{user.value.name}}
+                      </ng-container>
+                      <app-language class="navbar-btn d-inline-block" [isDark]="false"></app-language>
+                    </div>
                   </li>
-                  <li class="nav-item d-md-none" *ngIf="link.type === NavigationLinkTypes.faces && isFacesAvailable()">
-                    <a class="dropdown-item" [routerLink]="['/faces']" [class.active]="isLinkActive('/faces')">
-                      <span class="oi oi-people"></span>
-                      <ng-container i18n>Faces</ng-container>
-                    </a>
+                  <li class="nav-item d-xl-none" *ngIf="showShare">
+                    <app-gallery-share [dropDownItem]="true"></app-gallery-share>
                   </li>
-                  <li class="nav-item d-md-none" *ngIf="link.type === NavigationLinkTypes.gallery">
-                    <a class="dropdown-item"
-                       [routerLink]="['/gallery']"
-                       [queryParams]="queryService.getParams()" [class.active]="isLinkActive('/gallery')">
-                      <span class="oi oi-image"></span>
-                      <ng-container i18n>Gallery</ng-container>
-                    </a>
-                  </li>
-                  <li class="nav-item d-md-none" *ngIf="link.type === NavigationLinkTypes.url">
-                    <a class="dropdown-item" [href]="link.url" [class.active]="isLinkActive(link.url)">
-                      <span class="oi oi-external-link"></span>
-                      {{link.name}}
-                    </a>
-                  </li>
-                  <li class="nav-item d-md-none" *ngIf="link.type === NavigationLinkTypes.search">
-                    <a class="dropdown-item" [routerLink]="['/search', link.SearchQuery | json]"
-                       [class.active]="isSearchActive(link.SearchQuery)">
-                      <span class="oi oi-link-intact"></span>
-                      {{link.name}}
-                    </a>
-                  </li>
-                </ng-container>
-                <hr class="d-md-none"/>
+                  <hr class="d-xl-none"/>
+                  <ng-container *ngFor="let link of navbarLinks">
+                    <li class="nav-item d-md-none"
+                        *ngIf="link.type === NavigationLinkTypes.albums && isAlbumsAvailable()">
+                      <a class="dropdown-item" [routerLink]="['/albums']" [class.active]="isLinkActive('/albums')">
+                        <span class="oi oi-grid-two-up"></span>
+                        <ng-container i18n>Albums</ng-container>
+                      </a>
+                    </li>
+                    <li class="nav-item d-md-none"
+                        *ngIf="link.type === NavigationLinkTypes.faces && isFacesAvailable()">
+                      <a class="dropdown-item" [routerLink]="['/faces']" [class.active]="isLinkActive('/faces')">
+                        <span class="oi oi-people"></span>
+                        <ng-container i18n>Faces</ng-container>
+                      </a>
+                    </li>
+                    <li class="nav-item d-md-none" *ngIf="link.type === NavigationLinkTypes.gallery">
+                      <a class="dropdown-item"
+                         [routerLink]="['/gallery']"
+                         [queryParams]="queryService.getParams()" [class.active]="isLinkActive('/gallery')">
+                        <span class="oi oi-image"></span>
+                        <ng-container i18n>Gallery</ng-container>
+                      </a>
+                    </li>
+                    <li class="nav-item d-md-none" *ngIf="link.type === NavigationLinkTypes.url">
+                      <a class="dropdown-item" [href]="link.url" [class.active]="isLinkActive(link.url)">
+                        <span class="oi oi-external-link"></span>
+                        {{link.name}}
+                      </a>
+                    </li>
+                    <li class="nav-item d-md-none" *ngIf="link.type === NavigationLinkTypes.search">
+                      <a class="dropdown-item" [routerLink]="['/search', link.SearchQuery | json]"
+                         [class.active]="isSearchActive(link.SearchQuery)">
+                        <span class="oi oi-link-intact"></span>
+                        {{link.name}}
+                      </a>
+                    </li>
+                  </ng-container>
+                  <hr class="d-md-none"/>
 
-                <ng-content select="[navbar-menu]"></ng-content>
-                <li role="menuitem" *ngIf="isAdmin()">
-                  <a class="dropdown-item" [routerLink]="['/duplicates']">
-                    <span class="oi oi-layers"></span>
-                    <ng-container i18n>Duplicates</ng-container>
-                  </a>
-                </li>
-                <li role="menuitem" *ngIf="isAdmin()">
-                  <a class="dropdown-item" [routerLink]="['/admin']">
-                    <span class="oi oi-wrench"></span>
-                    <span *ngIf="notificationService.numberOfNotifications>0"
-                          class="badge">{{notificationService.numberOfNotifications}}</span>
-                    <ng-container i18n>Settings</ng-container>
-                  </a>
-                </li>
-                <li role="menuitem" *ngIf="authenticationRequired">
-                  <button class="dropdown-item btn btn-link" (click)="logout()">
-                    <span class="oi oi-account-logout"></span>
-                    <ng-container i18n>Logout</ng-container>
-                  </button>
-                </li>
-              </ul>
-            </div>
-          </li>
-        </ul>
+                  <ng-content select="[navbar-menu]"></ng-content>
+                  <li role="menuitem" *ngIf="isAdmin()">
+                    <a class="dropdown-item" [routerLink]="['/duplicates']">
+                      <span class="oi oi-layers"></span>
+                      <ng-container i18n>Duplicates</ng-container>
+                    </a>
+                  </li>
+                  <li role="menuitem" *ngIf="isAdmin()">
+                    <a class="dropdown-item" [routerLink]="['/admin']">
+                      <span class="oi oi-wrench"></span>
+                      <span *ngIf="notificationService.numberOfNotifications>0"
+                            class="badge">{{notificationService.numberOfNotifications}}</span>
+                      <ng-container i18n>Settings</ng-container>
+                    </a>
+                  </li>
+                  <li role="menuitem" *ngIf="authenticationRequired">
+                    <button class="dropdown-item btn btn-link" (click)="logout()">
+                      <span class="oi oi-account-logout"></span>
+                      <ng-container i18n>Logout</ng-container>
+                    </button>
+                  </li>
+                </ul>
+              </div>
+            </li>
+          </ul>
 
+        </div>
       </div>
     </div>
-  </div>
-</nav>
+  </nav>
+  <ng-content select="[navbar-appendix]"></ng-content>
+</div>
 <ng-content select="[body]"></ng-content>

src/frontend/app/ui/frame/frame.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input, ViewEncapsulation} from '@angular/core';
+import {Component, ElementRef, HostListener, Input, ViewChild, ViewEncapsulation} from '@angular/core';
 import {Router, RouterLink} from '@angular/router';
 import {AuthenticationService} from '../../model/network/authentication.service';
 import {UserDTO, UserRoles} from '../../../../common/entities/UserDTO';
@@ -9,6 +9,9 @@ import {QueryService} from '../../model/query.service';
 import {NavigationLinkTypes} from '../../../../common/config/public/ClientConfig';
 import {SearchQueryDTO} from '../../../../common/entities/SearchQueryDTO';
 import {Utils} from '../../../../common/Utils';
+import {PageHelper} from '../../model/page.helper';
+import {BsDropdownDirective} from 'ngx-bootstrap/dropdown';
+import {LanguageComponent} from '../language/language.component';
 
 @Component({
   selector: 'app-frame',
@@ -28,6 +31,15 @@ export class FrameComponent {
   public readonly NavigationLinkTypes = NavigationLinkTypes;
   public readonly stringify = JSON.stringify;
 
+  /* sticky top navbar */
+  private lastScroll = 0;
+  public shouldHideNavbar = false;
+  public navbarKeepTop = true;
+  public  animateNavbar = false;
+  @ViewChild('navContainer', {static: true}) navContainer: ElementRef;
+  @ViewChild('dropdown', {static: true}) dropdown: BsDropdownDirective;
+  @ViewChild('languageSelector', {static: true}) languageSelector: LanguageComponent;
+
   constructor(
     private authService: AuthenticationService,
     public notificationService: NotificationService,
@@ -74,5 +86,37 @@ export class FrameComponent {
   isAlbumsAvailable(): boolean {
     return Config.Album.enabled;
   }
+
+
+
+  @HostListener('window:scroll')
+  onScroll(): void {
+    const up = this.lastScroll > PageHelper.ScrollY;
+    const down = this.lastScroll < PageHelper.ScrollY;
+    //we are the top where the navbar by default lives
+    if (this.navContainer.nativeElement.offsetHeight > PageHelper.ScrollY) {
+      // do not force move navbar up when we are scrolling up from bottom
+      if (this.shouldHideNavbar != false) {
+        this.navbarKeepTop = true;
+      }
+
+    } else {
+      // enable navigation once we left the top part to prevent hide extra animation
+      this.animateNavbar = !(this.navbarKeepTop && down);
+      this.navbarKeepTop = false;
+      if (down) {
+        this.dropdown.hide();
+        this.languageSelector.dropdown.hide();
+      }
+    }
+
+    if (up) { //scroll up
+      this.shouldHideNavbar = false;
+    } else if (down) { // scroll down
+      this.shouldHideNavbar = true;
+    }
+
+    this.lastScroll = PageHelper.ScrollY;
+  }
 }
 

src/frontend/app/ui/gallery/gallery.component.css

@@ -1,7 +1,6 @@
 .container-fluid {
   width: 100%;
   padding: 0;
-  margin-top: -20px;
 }
 
 .blog-wrapper {

src/frontend/app/ui/gallery/gallery.component.html

@@ -2,7 +2,7 @@
 <app-frame [showSearch]="showSearchBar" [showShare]="showShare">
 
   <ng-container navbar>
-    <li class="nav-item navbar-text"  *ngIf="countDown">
+    <li class="nav-item navbar-text" *ngIf="countDown">
       <span>
         <ng-container i18n>Link availability</ng-container>
         : {{countDown.day}}
@@ -21,6 +21,7 @@
   </ng-container>
 
 
+  <app-gallery-navbar navbar-appendix></app-gallery-navbar>
   <div body class="container-fluid">
     <ng-container *ngIf="ContentWrapper.error">
       <div class="alert alert-danger" role="alert">
@@ -34,9 +35,6 @@
         Too many results to show. Refine your search.
       </div>
 
-      <!-- Its safe to hand over both as only one should have a value (search result or dir listing)-->
-      <app-gallery-navbar></app-gallery-navbar>
-
 
       <app-gallery-directories class="directories"
                                [directories]="directoryContent?.directories || []"></app-gallery-directories>

src/frontend/app/ui/gallery/navigator/navigator.gallery.component.html

@@ -53,7 +53,7 @@
         </a>
         <div class="divider">&nbsp;</div>
       </ng-container>
-      <div class="btn-group" dropdown placement="bottom right">
+      <div class="btn-group" dropdown #dropdown="bs-dropdown" placement="bottom right">
         <button id="button-alignment" dropdownToggle type="button"
                 class="btn btn-secondary dropdown-toggle"
                 [ngClass]="{'btn-secondary':sortingService.sorting.value !== DefaultSorting}"
@@ -78,4 +78,4 @@
 
 </div>
 
-<app-gallery-filter *ngIf="showFilters && ItemCount> 0"></app-gallery-filter>
+<app-gallery-filter *ngIf="showFilters && ItemCount> 0" class="position-absolute w-100"></app-gallery-filter>

src/frontend/app/ui/gallery/navigator/navigator.gallery.component.ts

@@ -1,4 +1,4 @@
-import {Component, HostListener} from '@angular/core';
+import {Component, HostListener, ViewChild} from '@angular/core';
 import {Router, RouterLink} from '@angular/router';
 import {UserDTOUtils} from '../../../../../common/entities/UserDTO';
 import {AuthenticationService} from '../../../model/network/authentication.service';
@@ -11,6 +11,8 @@ import {SearchQueryTypes, TextSearch, TextSearchQueryMatchTypes,} from '../../..
 import {Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
 import {GallerySortingService} from './sorting.service';
+import {PageHelper} from '../../../model/page.helper';
+import {BsDropdownDirective} from 'ngx-bootstrap/dropdown';
 
 @Component({
   selector: 'app-gallery-navbar',
@@ -31,6 +33,9 @@ export class GalleryNavigatorComponent {
   private readonly RootFolderName: string;
   private parentPath: string = null;
 
+  private lastScroll = 0;
+  @ViewChild('dropdown', {static: true}) dropdown: BsDropdownDirective;
+
   constructor(
     public authService: AuthenticationService,
     public queryService: QueryService,
@@ -180,6 +185,16 @@ export class GalleryNavigatorComponent {
         break;
     }
   }
+
+
+  @HostListener('window:scroll')
+  onScroll(): void {
+    if (this.lastScroll < PageHelper.ScrollY) { // scroll down
+      this.showFilters = false;
+      this.dropdown.hide();
+    }
+    this.lastScroll = PageHelper.ScrollY;
+  }
 }
 
 interface NavigatorPath {

src/frontend/app/ui/gallery/search/search-field-base/search-field-base.gallery.component.html

@@ -15,14 +15,12 @@
          #name="ngModel"
          ngControl="search"
          name="srch-term"
-         id="srch-term"
          #SearchField
          autocomplete="off">
   <input type="text"
          class="form-control search-hint rounded-0"
          [ngModel]="SearchHint"
          name="srch-term-hint"
-         id="srch-term-hint"
          #SearchHintField
          autocomplete="off">
 

src/frontend/app/ui/language/language.component.html

@@ -1,4 +1,4 @@
-<div class="dropdown" dropdown>
+<div class="dropdown" dropdown   #dropdown="bs-dropdown">
   <button dropdownToggle
           class="btn btn-secondary dropdown-toggle"
           type="button"

src/frontend/app/ui/language/language.component.ts

@@ -1,7 +1,8 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, ViewChild} from '@angular/core';
 import {Config} from '../../../../common/config/public/Config';
 import {CookieNames} from '../../../../common/CookieNames';
 import {CookieService} from 'ngx-cookie-service';
+import {BsDropdownDirective} from 'ngx-bootstrap/dropdown';
 
 @Component({
   selector: 'app-language',
@@ -14,6 +15,8 @@ export class LanguageComponent {
   current: string = null;
   urlBase = Config.Server.urlBase;
 
+  @ViewChild('dropdown', {static: true}) dropdown: BsDropdownDirective;
+
   constructor(private cookieService: CookieService) {
     this.languages = Config.Server.languages.sort();
     if (this.cookieService.get(CookieNames.lang) != null) {