MOBILE-4842 menu: User menu button to signals

Author: crazyserver

src/core/features/mainmenu/components/user-menu-button/user-menu-button.html

@@ -1,4 +1,4 @@
-@if ((alwaysShow || (isMainScreen && menuPage?.tabsPlacement() === 'bottom')) && siteInfo) {
-    <core-user-avatar [site]="siteInfo" class="core-bar-button-image clickable" [linkProfile]="false"
+@if (showButton()) {
+    <core-user-avatar [site]="siteInfo()" class="core-bar-button-image clickable" [linkProfile]="false"
         (ariaButtonClick)="openUserMenu($event)" [attr.aria-label]="'core.user.useraccount' | translate" />
 }

src/core/features/mainmenu/components/user-menu-button/user-menu-button.ts

@@ -12,14 +12,15 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, Input, OnInit, inject } from '@angular/core';
+import { Component, OnInit, inject, input, linkedSignal, signal } from '@angular/core';
 import { CoreSiteInfo } from '@classes/sites/unauthenticated-site';
 import { IonRouterOutlet } from '@ionic/angular';
 import { CoreSites } from '@services/sites';
 import { CoreModals } from '@services/overlays/modals';
 import CoreMainMenuPage from '@features/mainmenu/pages/menu/menu';
 import { toBoolean } from '@/core/transforms/boolean';
 import { CoreSharedModule } from '@/core/shared.module';
+import { CoreMainMenuPlacement } from '@features/mainmenu/constants';
 
 /**
  * Component to display an avatar on the header to open user menu.
@@ -36,23 +37,43 @@ import { CoreSharedModule } from '@/core/shared.module';
 })
 export class CoreMainMenuUserButtonComponent implements OnInit {
 
-    @Input({ transform: toBoolean }) alwaysShow = false;
+    readonly alwaysShow = input(false, { transform: toBoolean });
 
-    siteInfo?: CoreSiteInfo;
-    isMainScreen = false;
+    readonly siteInfo = signal<CoreSiteInfo | undefined>(undefined);
+    readonly showButton = linkedSignal(() => this.shouldShowButton());
 
     protected routerOutlet = inject(IonRouterOutlet);
     protected menuPage = inject(CoreMainMenuPage, { optional: true });
 
     constructor() {
-        this.siteInfo = CoreSites.getCurrentSite()?.getInfo();
+        this.siteInfo.set(CoreSites.getCurrentSite()?.getInfo());
     }
 
     /**
      * @inheritdoc
      */
     ngOnInit(): void {
-        this.isMainScreen = !this.routerOutlet.canGoBack();
+        this.showButton.set(this.shouldShowButton());
+    }
+
+    /**
+     * Determine if the button should be shown.
+     *
+     * @returns True if the button should be shown, false otherwise.
+     */
+    protected shouldShowButton(): boolean {
+        if (!this.siteInfo()) {
+            return false;
+        }
+
+        if (this.alwaysShow()) {
+            return true;
+        }
+
+        const isMainScreen = !this.routerOutlet.canGoBack();
+        const tabsPlacement = this.menuPage?.tabsPlacement();
+
+        return isMainScreen && tabsPlacement === CoreMainMenuPlacement.BOTTOM;
     }
 
     /**