From b9bf0189662f487461427e39b1662a65bf7ad09e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 28 Oct 2021 16:15:27 +0200
Subject: [PATCH] MOBILE-3807 usermenu: Show on side main menu bar

---
 .../components/user-menu-button/user-menu-button.scss     | 3 +++
 .../components/user-menu-button/user-menu-button.ts       | 1 +
 src/core/features/mainmenu/mainmenu-lazy.module.ts        | 2 ++
 src/core/features/mainmenu/pages/menu/menu.html           | 2 ++
 src/core/features/mainmenu/pages/menu/menu.scss           | 8 +++++++-
 5 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 src/core/features/mainmenu/components/user-menu-button/user-menu-button.scss

diff --git a/src/core/features/mainmenu/components/user-menu-button/user-menu-button.scss b/src/core/features/mainmenu/components/user-menu-button/user-menu-button.scss
new file mode 100644
index 000000000..15aa50df5
--- /dev/null
+++ b/src/core/features/mainmenu/components/user-menu-button/user-menu-button.scss
@@ -0,0 +1,3 @@
+:host-context(ion-tabs.placement-side div.tabs-inner) {
+    display: none;
+}
\ No newline at end of file
diff --git a/src/core/features/mainmenu/components/user-menu-button/user-menu-button.ts b/src/core/features/mainmenu/components/user-menu-button/user-menu-button.ts
index d95001748..a27782b73 100644
--- a/src/core/features/mainmenu/components/user-menu-button/user-menu-button.ts
+++ b/src/core/features/mainmenu/components/user-menu-button/user-menu-button.ts
@@ -27,6 +27,7 @@ import { CoreMainMenuUserMenuComponent } from '../user-menu/user-menu';
 @Component({
     selector: 'core-user-menu-button',
     templateUrl: 'user-menu-button.html',
+    styleUrls: ['user-menu-button.scss'],
 })
 export class CoreMainMenuUserButtonComponent implements OnInit {
 
diff --git a/src/core/features/mainmenu/mainmenu-lazy.module.ts b/src/core/features/mainmenu/mainmenu-lazy.module.ts
index ff9c67189..22f30d18b 100644
--- a/src/core/features/mainmenu/mainmenu-lazy.module.ts
+++ b/src/core/features/mainmenu/mainmenu-lazy.module.ts
@@ -22,6 +22,7 @@ import { MAIN_MENU_ROUTES } from './mainmenu-routing.module';
 import { CoreMainMenuPage } from './pages/menu/menu';
 import { CoreMainMenuHomeHandlerService } from './services/handlers/mainmenu';
 import { CoreMainMenuProvider } from './services/mainmenu';
+import { CoreMainMenuComponentsModule } from './components/components.module';
 
 function buildRoutes(injector: Injector): Routes {
     const routes = resolveModuleRoutes(injector, MAIN_MENU_ROUTES);
@@ -54,6 +55,7 @@ function buildRoutes(injector: Injector): Routes {
 @NgModule({
     imports: [
         CoreSharedModule,
+        CoreMainMenuComponentsModule,
     ],
     declarations: [
         CoreMainMenuPage,
diff --git a/src/core/features/mainmenu/pages/menu/menu.html b/src/core/features/mainmenu/pages/menu/menu.html
index 893737e2f..18a5bb380 100644
--- a/src/core/features/mainmenu/pages/menu/menu.html
+++ b/src/core/features/mainmenu/pages/menu/menu.html
@@ -4,6 +4,8 @@
         [@menuShowHideAnimation]="tabsPlacement == 'side' ? '' : (isMainScreen ? 'visible' : 'hidden')">
         <ion-spinner *ngIf="!loaded" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
 
+        <core-user-menu-button *ngIf="loaded && tabsPlacement == 'side'"></core-user-menu-button>
+
         <ion-tab-button *ngFor="let tab of tabs" (keydown)="tabAction.keyDown($event)" (keyup)="tabAction.keyUp(tab.page, $event)"
             [hidden]="!loaded && tab.hide" [tab]="tab.page" [disabled]="tab.hide" layout="label-hide" class="{{tab.class}}"
             [selected]="tab.page === selectedTab" [tabindex]="selectedTab == tab.page ? 0 : -1" [attr.aria-controls]="tab.id">
diff --git a/src/core/features/mainmenu/pages/menu/menu.scss b/src/core/features/mainmenu/pages/menu/menu.scss
index 7f362ec1d..b359d98f0 100644
--- a/src/core/features/mainmenu/pages/menu/menu.scss
+++ b/src/core/features/mainmenu/pages/menu/menu.scss
@@ -71,7 +71,7 @@
 
             @include padding(var(--ion-safe-area-top), 0px, var(--ion-safe-area-bottom), var(--ion-safe-area-left));
 
-            ion-tab-button {
+            ion-tab-button, core-user-menu-button {
                 width: 100%;
                 min-height: var(--menutabbar-size);
                 flex: 0;
@@ -83,6 +83,12 @@
         }
     }
 
+    core-user-menu-button {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+    }
+
     .core-network-message {
         --network-message-height: 16px;
         position: absolute;