Finish mobile menu and user menu in mobile

login/userMini.component.ts

@@ -9,10 +9,10 @@ import {UserManagementService} from "../services/user-management.service";
 @Component({
   selector: 'user-mini',
   template: `
-    <ul *ngIf="!mobileView" class="uk-navbar-nav">
+    <ul class="uk-navbar-nav">
-      <li class="uk-parent">
+      <li>
-        <a *ngIf="!loggedIn" (click)="logIn()">Sign in</a>
+        <a *ngIf="!loggedIn && !mobileView" (click)="logIn()">Sign in</a>
-        <ng-container *ngIf="loggedIn">
+        <ng-container *ngIf="loggedIn && !mobileView">
           <a class="login uk-icon">
             <svg height="60" width="60">
               <circle cx="30" cy="30" r="20" stroke-width="2"></circle>
@@ -37,25 +37,48 @@ import {UserManagementService} from "../services/user-management.service";
             </ul>
           </div>
         </ng-container>
-      </li>
+        <a *ngIf="!loggedIn && mobileView" (click)="logIn()">
-    </ul>
+          <icon name="login" ratio="1.5" [flex]="true"></icon>
-    <ul *ngIf="mobileView" class="uk-nav uk-nav-primary uk-list uk-margin-top uk-nav-parent-icon" uk-nav>
-      <li [class.uk-parent]="loggedIn">
-        <a *ngIf="loggedIn">
-          {{user.fullname.toString()}}
         </a>
-        <a *ngIf="!loggedIn" (click)="logIn()">Sign in</a>
+        <a *ngIf="loggedIn && mobileView" href="#account" class="login uk-icon" uk-toggle>
-        <ul *ngIf="loggedIn" class="uk-nav-sub">
+          <svg height="30" width="30">
-          <ng-container *ngFor="let item of userMenuItems ">
+            <circle cx="15" cy="15" r="15" stroke-width="2"></circle>
-            <li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization">
+            <text x="50%" y="50%" text-anchor="middle" dy=".35em" font-size="14">
-              <a *ngIf="item.route" [routerLink]="item.route" (click)="closeCanvas()">{{item.title}}</a>
+              {{firstLetters ? firstLetters : 'AN'}}
-              <a *ngIf="!item.route && item.url" (click)="closeCanvas()" [href]="item.url" [class.custom-external]="item.target != '_self'"
+            </text>
-                 [target]="item.target">{{item.title}}</a>
+          </svg>
-            </li>
+        </a>
-          </ng-container>
+        <div *ngIf="loggedIn" id="account" class="uk-offcanvas" uk-offcanvas="flip: true; overlay: true">
-          <li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
+          <div class="uk-offcanvas-bar uk-padding-remove-horizontal">
-          <li><a (click)="logOut()">Log out</a></li>
+            <button class="uk-offcanvas-close uk-icon uk-close">
-        </ul>
+              <icon name="close" ratio="1.5" visuallyHidden="close menu"></icon>
+            </button>
+            <div class="uk-padding uk-flex uk-flex-middle">
+              <div class="login">
+                <svg height="60" width="60" style="max-width: 60px; height: 60px;">
+                  <circle cx="30" cy="30" r="20" stroke-width="2"></circle>
+                  <text x="50%" y="50%" text-anchor="middle" dy=".4em" font-size="16">
+                    {{firstLetters ? firstLetters : 'AN'}}
+                  </text>
+                </svg>
+              </div>
+              <h5 class="uk-margin-small-left uk-margin-remove-bottom uk-margin-remove-top uk-text-truncate">
+                {{user.fullname}}
+              </h5>
+            </div>
+            <ul class="uk-nav uk-nav-primary uk-list uk-margin-top uk-nav-parent-icon" uk-nav>
+              <ng-container *ngFor="let item of userMenuItems ">
+                <li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization">
+                  <a *ngIf="item.route" [routerLink]="item.route" (click)="closeCanvas()">{{item.title}}</a>
+                  <a *ngIf="!item.route && item.url" (click)="closeCanvas()" [href]="item.url" [class.custom-external]="item.target != '_self'"
+                     [target]="item.target">{{item.title}}</a>
+                </li>
+              </ng-container>
+              <li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
+              <li><a (click)="logOut()">Log out</a></li>
+            </ul>
+          </div>
+        </div>
       </li>
     </ul>
   `

login/userMiniModule.module.ts

@@ -4,10 +4,11 @@ import { FormsModule } from '@angular/forms';
 import { RouterModule } from "@angular/router";
 
 import {UserMiniComponent} from "./userMini.component";
+import {IconsModule} from "../utils/icons/icons.module";
 
 @NgModule({
   imports: [
-    CommonModule, FormsModule, RouterModule
+    CommonModule, FormsModule, RouterModule, IconsModule
   ],
   declarations: [
     UserMiniComponent

sharedComponents/navigationBar.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="showMenu && activeHeader">
-  <div class="uk-hidden@l">
+  <div class="uk-hidden@m">
     <nav class="uk-navbar-container uk-navbar" uk-navbar="delay-hide: 400">
         <div
             *ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo  && activeHeader.badge">
@@ -8,7 +8,7 @@
                alt="BETA" style="height: 60px; width: 60px;">
         </div>
         <div *ngIf="!onlyTop || userMenu" class="uk-navbar-left">
-          <a *ngIf="!offCanvasFlip" class="uk-navbar-toggle" href="#tm-mobile" uk-toggle="" style="z-index:1000;">
+          <a class="uk-navbar-toggle" href="#tm-mobile" uk-toggle>
             <div uk-navbar-toggle-icon="" class="uk-navbar-toggle-icon uk-icon custom-navbar-toggle-icon"></div>
             <span class="visually-hidden">toggle menu</span>
           </a>
@@ -17,12 +17,14 @@
           <ng-container *ngTemplateOutlet="header_template; context: {mobile: true}"></ng-container>
         </div>
         <div *ngIf="!onlyTop || userMenu" class="uk-navbar-right">
-          <a *ngIf="offCanvasFlip" class="uk-navbar-toggle" href="#tm-mobile" uk-toggle="">
+          <ng-container *ngIf="userMenu">
-            <div uk-navbar-toggle-icon="" class="uk-navbar-toggle-icon uk-icon custom-navbar-toggle-icon"></div>
+            <user-mini [user]="user" mobileView=true (closeCanvasEmitter)="closeCanvas(canvas)"
-          </a>
+                       [userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl
+                       [logOutUrl]=properties.logoutUrl [cookieDomain]=properties.cookieDomain></user-mini>
+          </ng-container>
         </div>
       </nav>
-    <div #canvas id="tm-mobile" [attr.uk-offcanvas]="(offCanvasFlip?'flip:'+(offCanvasFlip + ';'):'') + 'overlay: true'"
+    <div #canvas id="tm-mobile" [attr.uk-offcanvas]="'overlay: true'"
          class="uk-offcanvas">
       <div class="uk-offcanvas-bar uk-padding-remove-horizontal">
         <button class="uk-offcanvas-close uk-icon uk-close">
@@ -138,18 +140,13 @@
                 </li>
               </ng-container>
             </ng-container>
+            <ng-content select="[extra-s]"></ng-content>
           </ng-container>
         </ul>
-        <ng-container *ngIf="userMenu">
-          <user-mini [user]="user" mobileView=true (closeCanvasEmitter)="closeCanvas(canvas)"
-                     [userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl
-                     [logOutUrl]=properties.logoutUrl [cookieDomain]=properties.cookieDomain></user-mini>
-          <ng-content select="[extra-s]"></ng-content>
-        </ng-container>
       </div>
     </div>
   </div>
-  <div id="main-menu" class="uk-visible@l">
+  <div id="main-menu" class="uk-visible@m">
     <div *ngIf="activeHeader" [class.uk-light]='activeHeader.darkBg'>
       <div class="uk-navbar-container" uk-sticky="media@m">
         <div *ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo  && activeHeader.badge">
@@ -180,7 +177,9 @@
                 <user-mini *ngIf="userMenu" [user]="user"
                            [userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
                            [cookieDomain]=properties.cookieDomain></user-mini>
-                <ng-content select="[extra-m]"></ng-content>
+                <div class="uk-visible@l">
+                  <ng-content select="[extra-m]"></ng-content>
+                </div>
               </div>
               <ng-template #mainMenu>
                 <ul class="uk-navbar-nav" [class.uk-margin-right]="!userMenu">

sharedComponents/navigationBar.component.ts

@@ -48,7 +48,6 @@ export class NavigationBarComponent implements OnInit, OnDestroy {
   @Input() searchRoute: string = '/search/find';
   @Input() searchPlaceHolder: string = 'Search for research results';
   @Input() showLogo: boolean = true;
-  @Input() offCanvasFlip: boolean = false;
   replaceHeader: boolean = false;
   public activeHeader: Header;
   keyword: string = '';

sharedComponents/tabs/slider-tabs.component.ts

@@ -40,8 +40,7 @@ declare var UIkit;
       </div>
       <a *ngIf="position === 'horizontal'" class="uk-position-center-left uk-blur-background" uk-slider-item="previous"><span
           uk-icon="chevron-left"></span></a>
-      <a *ngIf="position === 'horizontal'" class="uk-position-center-right uk-blur-background"
+      <a *ngIf="position === 'horizontal'" class="uk-position-center-right uk-blur-background" uk-slider-item="next"><span
-         uk-slider-item="next"><span
           uk-icon="chevron-right"></span></a>
     </div>
   `,