MOBILE-3807 usermenu: Show on side main menu bar

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;
+}

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 {
 

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,

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">

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;