From 095e3340c0c157cc490c276d4725f9559da0f89d Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Wed, 30 Nov 2022 17:49:38 +0200
Subject: [PATCH] Finish mobile menu and user menu in mobile

---
 login/userMini.component.ts                   | 67 +++++++++++++------
 login/userMiniModule.module.ts                |  3 +-
 sharedComponents/navigationBar.component.html | 27 ++++----
 sharedComponents/navigationBar.component.ts   |  1 -
 .../tabs/slider-tabs.component.ts             |  3 +-
 5 files changed, 61 insertions(+), 40 deletions(-)

diff --git a/login/userMini.component.ts b/login/userMini.component.ts
index e4fa87d0..f5b8b021 100644
--- a/login/userMini.component.ts
+++ b/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">
-      <li class="uk-parent">
-        <a *ngIf="!loggedIn" (click)="logIn()">Sign in</a>
-        <ng-container *ngIf="loggedIn">
+    <ul class="uk-navbar-nav">
+      <li>
+        <a *ngIf="!loggedIn && !mobileView" (click)="logIn()">Sign in</a>
+        <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>
-    </ul>
-    <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 *ngIf="!loggedIn && mobileView" (click)="logIn()">
+          <icon name="login" ratio="1.5" [flex]="true"></icon>
         </a>
-        <a *ngIf="!loggedIn" (click)="logIn()">Sign in</a>
-        <ul *ngIf="loggedIn" class="uk-nav-sub">
-          <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>
+        <a *ngIf="loggedIn && mobileView" href="#account" class="login uk-icon" uk-toggle>
+          <svg height="30" width="30">
+            <circle cx="15" cy="15" r="15" stroke-width="2"></circle>
+            <text x="50%" y="50%" text-anchor="middle" dy=".35em" font-size="14">
+              {{firstLetters ? firstLetters : 'AN'}}
+            </text>
+          </svg>
+        </a>
+        <div *ngIf="loggedIn" id="account" class="uk-offcanvas" uk-offcanvas="flip: true; overlay: true">
+          <div class="uk-offcanvas-bar uk-padding-remove-horizontal">
+            <button class="uk-offcanvas-close uk-icon uk-close">
+              <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>
   `
diff --git a/login/userMiniModule.module.ts b/login/userMiniModule.module.ts
index b53783ad..f8af2807 100644
--- a/login/userMiniModule.module.ts
+++ b/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
diff --git a/sharedComponents/navigationBar.component.html b/sharedComponents/navigationBar.component.html
index 031e72f7..15ca4b0a 100644
--- a/sharedComponents/navigationBar.component.html
+++ b/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="">
-            <div uk-navbar-toggle-icon="" class="uk-navbar-toggle-icon uk-icon custom-navbar-toggle-icon"></div>
-          </a>
+          <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-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">
diff --git a/sharedComponents/navigationBar.component.ts b/sharedComponents/navigationBar.component.ts
index 8e36a150..2b25600a 100644
--- a/sharedComponents/navigationBar.component.ts
+++ b/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 = '';
diff --git a/sharedComponents/tabs/slider-tabs.component.ts b/sharedComponents/tabs/slider-tabs.component.ts
index dbf79a17..63257c9b 100644
--- a/sharedComponents/tabs/slider-tabs.component.ts
+++ b/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"
-         uk-slider-item="next"><span
+      <a *ngIf="position === 'horizontal'" class="uk-position-center-right uk-blur-background" uk-slider-item="next"><span
           uk-icon="chevron-right"></span></a>
     </div>
   `,