@propbinder/mobile-design 0.2.48 → 0.2.50

package/src/components/tab-bar/ds-mobile-tab-bar.ts

@@ -0,0 +1,735 @@
+import { Component, Input, Output, EventEmitter, signal, OnInit, AfterViewInit, OnDestroy, ElementRef, computed, inject, effect } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Router, NavigationEnd } from '@angular/router';
+import { filter } from 'rxjs/operators';
+import { IonTabBar, IonTabButton, IonLabel, ModalController } from '@ionic/angular/standalone';
+import { DsIconComponent } from '@propbinder/design-system';
+import { DsAvatarComponent } from '@propbinder/design-system';
+import { DsLogoComponent } from '../logo/ds-logo';
+import { DsMobileProfileActionsSheetComponent, ActionResult, ActionGroup, Language } from '../bottom-sheet';
+import { disableModalShadowPointerEvents } from '../bottom-sheet/modal-shadow-fix';
+import { UserService } from '../../services/user.service';
+
+export interface TabConfig {
+  id: string;
+  label: string;
+  route: string;
+  icon: string;
+  iconActive: string;
+}
+
+/**
+ * DsMobileTabBarComponent
+ *
+ * Responsive navigation tab bar that adapts from mobile to desktop:
+ * - Mobile (< 768px): Bottom tab bar with icons + labels
+ * - Desktop (≥ 768px): Top navigation bar with logo, tabs, and avatar
+ *
+ * Use this component INSIDE your own `ion-tabs` when Angular routing
+ * requires `ion-tabs` to be a direct child in your component.
+ *
+ * @example
+ * ```html
+ * <!-- In your component with child routes -->
+ * <!-- IMPORTANT: Add class="ds-tabs-wrapper" to ion-tabs for proper styling -->
+ * <ion-tabs class="ds-tabs-wrapper">
+ *   <ds-mobile-tab-bar
+ *     [tabs]="tabs"
+ *     [avatarInitials]="'JD'"
+ *     [profileMenuItems]="profileMenuItems"
+ *     (profileActionSelected)="handleProfileAction($event)"
+ *   />
+ * </ion-tabs>
+ * ```
+ *
+ * @example With profile menu configuration
+ * ```typescript
+ * profileMenuItems: ActionGroup[] = [
+ *   {
+ *     actions: [
+ *       { action: 'profile', title: 'My Profile', icon: 'remixUser3Line' },
+ *       { action: 'settings', title: 'Settings', icon: 'remixSettings3Line' }
+ *     ]
+ *   },
+ *   {
+ *     actions: [
+ *       { action: 'logout', title: 'Log Out', icon: 'remixLogoutBoxLine', destructive: true }
+ *     ]
+ *   }
+ * ];
+ *
+ * handleProfileAction(result: ActionResult): void {
+ *   switch (result.action) {
+ *     case 'profile': // Navigate to profile
+ *     case 'settings': // Navigate to settings
+ *     case 'logout': // Handle logout
+ *   }
+ * }
+ * ```
+ *
+ * @note When using this component, you must add the class "ds-tabs-wrapper"
+ * to your `ion-tabs` element, or manually apply these styles:
+ * ```css
+ * ion-tabs {
+ *   height: 100%;
+ *   background: var(--color-header-surface);
+ * }
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-tab-bar',
+  standalone: true,
+  imports: [CommonModule, IonTabBar, IonTabButton, IonLabel, DsIconComponent, DsAvatarComponent, DsLogoComponent],
+  styleUrls: ['./ds-mobile-tab-bar.css'],
+  template: `
+    <ion-tab-bar [attr.slot]="isDesktop() ? 'top' : 'bottom'" class="ds-tab-bar" [class.ds-tab-bar--desktop]="isDesktop()">
+      <!-- Logo (desktop only, full logo in header) -->
+      <div class="ds-tab-bar__logo">
+        <ds-logo variant="full" size="lg" />
+      </div>
+
+      <!-- Tab buttons container -->
+      <div class="ds-tab-bar__tabs" *ngIf="tabs">
+        <ion-tab-button
+          *ngFor="let tab of tabs; trackBy: trackByTabId"
+          [tab]="tab.route"
+          [attr.data-icon]="tab.icon"
+          [attr.data-icon-active]="tab.iconActive"
+          [attr.aria-label]="tab.label"
+          class="ds-tab-button ion-activatable"
+          [class.tab-selected]="isTabActive(tab.route)"
+        >
+          <div class="tab-icon-ripple"></div>
+          <div class="tab-icon-wrapper">
+            <ds-icon [name]="tab.icon" [size]="isDesktop() ? '20px' : '24px'" class="tab-icon-inactive" />
+            <ds-icon [name]="tab.iconActive" [size]="isDesktop() ? '20px' : '24px'" class="tab-icon-active" />
+          </div>
+          <ion-label [attr.aria-hidden]="true">{{ tab.label }}</ion-label>
+        </ion-tab-button>
+      </div>
+
+      <!-- Avatar (desktop only, positioned via CSS) -->
+      <div class="ds-tab-bar__actions">
+        <ds-avatar [size]="'md'" [type]="avatarType" [initials]="avatarInitials" [src]="avatarSrc" [iconName]="avatarIconName" (click)="handleAvatarClick()" />
+      </div>
+    </ion-tab-bar>
+  `,
+})
+export class DsMobileTabBarComponent implements OnInit, AfterViewInit, OnDestroy {
+  // Inputs
+  @Input() tabs: TabConfig[] = [];
+
+  // Avatar inputs
+  @Input() avatarType: 'initials' | 'photo' | 'icon' = 'initials';
+  @Input() avatarInitials: string = 'U';
+  @Input() avatarSrc: string = '';
+  @Input() avatarIconName: string = 'remixUser3Line';
+
+  /**
+   * Profile menu action groups to display when avatar is clicked.
+   * If not provided, only the avatarClick event will be emitted.
+   *
+   * @example
+   * ```typescript
+   * profileMenuItems: ActionGroup[] = [
+   *   {
+   *     actions: [
+   *       { action: 'profile', title: 'My Profile', icon: 'remixUser3Line' },
+   *       { action: 'settings', title: 'Settings', icon: 'remixSettings3Line' }
+   *     ]
+   *   }
+   * ];
+   * ```
+   */
+  @Input() profileMenuItems?: ActionGroup[];
+
+  // Outputs
+  @Output() avatarClick = new EventEmitter<void>();
+
+  /**
+   * Emitted when a profile menu action is selected.
+   * Parent component should handle the action logic (navigation, logout, etc.).
+   */
+  @Output() profileActionSelected = new EventEmitter<ActionResult>();
+
+  // Internal state - exposed for template binding
+  activeTab = signal<string>('');
+  isDesktop = signal<boolean>(false);
+
+  private mutationObserver?: MutationObserver;
+  private slotEnforcementObserver?: MutationObserver;
+  private resizeObserver?: ResizeObserver;
+  private mediaQuery?: MediaQueryList;
+  private routerSubscription?: any;
+
+  private router?: Router | null;
+  private modalController = inject(ModalController);
+  private userService = inject(UserService);
+
+  constructor(private elementRef: ElementRef) {
+    // Inject Router optionally
+    this.router = inject(Router, { optional: true }) || undefined;
+
+    // Initialize breakpoint detection EARLY (before effect)
+    // This ensures isDesktop() is set before the effect runs
+    this.setupBreakpointDetection();
+
+    // Debug: Log initial state
+    setTimeout(() => {
+      // console.log('[ds-mobile-tab-bar] Initial state:', {
+      //   isDesktop: this.isDesktop(),
+      //   windowWidth: window.innerWidth,
+      //   mediaQuery: this.mediaQuery?.matches,
+      //   userAgent: navigator.userAgent
+      // });
+    }, 100);
+
+    // Watch for isDesktop changes and update slot reactively
+    // effect() must be called in constructor (injection context)
+    effect(() => {
+      // This effect runs whenever isDesktop() changes
+      const _ = this.isDesktop(); // Read the signal to create dependency
+      // console.log('[ds-mobile-tab-bar] effect() triggered, isDesktop:', this.isDesktop());
+      if (this.elementRef.nativeElement) {
+        // Use setTimeout to ensure DOM is ready
+        setTimeout(() => this.updateSlot(), 0);
+      }
+    });
+  }
+
+  ngOnInit(): void {
+    // Listen to router events to detect active tab from URL
+    if (this.router) {
+      this.routerSubscription = this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((event: any) => {
+        const url = event.urlAfterRedirects || event.url;
+        // Extract the route segment (e.g., /tab-bar-test/home -> home)
+        const segments = url.split('/').filter((s: string) => s);
+        const lastSegment = segments[segments.length - 1];
+
+        // Find matching tab by route
+        if (this.tabs && lastSegment) {
+          const matchingTab = this.tabs.find((tab) => tab.route === lastSegment);
+          if (matchingTab) {
+            this.activeTab.set(matchingTab.route);
+          }
+        }
+      });
+    }
+  }
+
+  ngAfterViewInit(): void {
+    // Initial removal
+    this.removeTitleAttributes();
+
+    // Set up mutation observer to continuously remove title attributes
+    this.setupTitleRemovalObserver();
+
+    // Set up active tab detection
+    this.setupActiveTabDetection();
+
+    // Ensure slot is set correctly on initial render (with retries)
+    this.updateSlot();
+
+    // Set up slot enforcement to prevent Ionic from overriding
+    setTimeout(() => {
+      this.setupSlotEnforcement();
+      // Also retry updateSlot a few times to ensure it sticks
+      setTimeout(() => this.updateSlot(), 100);
+      setTimeout(() => this.updateSlot(), 300);
+    }, 0);
+  }
+
+  private updateSlot(): void {
+    // CRITICAL: Set slot on the HOST element (ds-mobile-tab-bar) first
+    // Ionic positions children based on the wrapper's slot, not the inner element's slot
+    const hostElement = this.elementRef.nativeElement;
+    const hostSlotValue = this.isDesktop() ? 'top' : 'bottom';
+    const currentHostSlot = hostElement.getAttribute('slot');
+
+    if (currentHostSlot !== hostSlotValue) {
+      // console.log('[ds-mobile-tab-bar] updateSlot: Setting HOST slot from', currentHostSlot, 'to', hostSlotValue);
+      hostElement.setAttribute('slot', hostSlotValue);
+      (hostElement as any).slot = hostSlotValue;
+    }
+
+    // Get the ion-tab-bar element
+    const tabBar = this.elementRef.nativeElement.querySelector('ion-tab-bar');
+    if (!tabBar) {
+      // console.log('[ds-mobile-tab-bar] updateSlot: tabBar not found, retrying...');
+      // Retry if element not found yet
+      setTimeout(() => this.updateSlot(), 50);
+      return;
+    }
+
+    const slotValue = this.isDesktop() ? 'top' : 'bottom';
+    const currentSlot = tabBar.getAttribute('slot');
+    const currentSlotProperty = (tabBar as any).slot;
+
+    // Debug logging
+    // console.log('[ds-mobile-tab-bar] updateSlot:', {
+    //   isDesktop: this.isDesktop(),
+    //   windowWidth: window.innerWidth,
+    //   slotValue,
+    //   currentSlotAttribute: currentSlot,
+    //   currentSlotProperty: currentSlotProperty,
+    //   tabBarElement: tabBar,
+    //   tabBarParent: tabBar.parentElement?.tagName,
+    //   tabBarInIonTabs: tabBar.closest('ion-tabs') !== null
+    // });
+
+    // Only update if different to avoid unnecessary DOM manipulation
+    if (currentSlot !== slotValue || currentSlotProperty !== slotValue) {
+      // console.log('[ds-mobile-tab-bar] updateSlot: Setting slot from', currentSlot, 'to', slotValue);
+
+      // Set both attribute and property to ensure it works
+      tabBar.setAttribute('slot', slotValue);
+      (tabBar as any).slot = slotValue;
+
+      // Also try setting it on the parent ion-tabs
+      const parentIonTabs = tabBar.closest('ion-tabs');
+      if (parentIonTabs) {
+        // console.log('[ds-mobile-tab-bar] updateSlot: Found parent ion-tabs');
+        // Force Ionic to recognize the slot change
+        (parentIonTabs as any).forceUpdate?.();
+      }
+
+      // Force a reflow to ensure Ionic processes the change
+      void tabBar.offsetHeight;
+
+      // Verify it was set
+      const verifySlot = tabBar.getAttribute('slot');
+      const verifySlotProperty = (tabBar as any).slot;
+      // console.log('[ds-mobile-tab-bar] updateSlot: After update, slot attribute:', verifySlot, 'slot property:', verifySlotProperty);
+
+      // Check computed styles
+      const computedStyle = window.getComputedStyle(tabBar);
+      const parentComputedStyle = tabBar.parentElement ? window.getComputedStyle(tabBar.parentElement) : null;
+      const ionTabsForStyles = tabBar.closest('ion-tabs');
+      const ionTabsComputedStyle = ionTabsForStyles ? window.getComputedStyle(ionTabsForStyles) : null;
+
+      // console.log('[ds-mobile-tab-bar] updateSlot: Computed styles:', {
+      //   tabBar: {
+      //     position: computedStyle.position,
+      //     top: computedStyle.top,
+      //     bottom: computedStyle.bottom,
+      //     order: computedStyle.order,
+      //     display: computedStyle.display,
+      //     zIndex: computedStyle.zIndex,
+      //     transform: computedStyle.transform
+      //   },
+      //   parent: parentComputedStyle ? {
+      //     display: parentComputedStyle.display,
+      //     flexDirection: parentComputedStyle.flexDirection,
+      //     gridTemplateRows: parentComputedStyle.gridTemplateRows
+      //   } : null,
+      //   ionTabs: ionTabsComputedStyle ? {
+      //     display: ionTabsComputedStyle.display,
+      //     flexDirection: ionTabsComputedStyle.flexDirection,
+      //     gridTemplateRows: ionTabsComputedStyle.gridTemplateRows,
+      //     position: ionTabsComputedStyle.position
+      //   } : null,
+      //   tabBarRect: tabBar.getBoundingClientRect(),
+      //   windowHeight: window.innerHeight
+      // });
+    } else {
+      // console.log('[ds-mobile-tab-bar] updateSlot: Slot already correct, no update needed');
+
+      // Even if slot is correct, check computed styles to see why it's not at top
+      const computedStyle = window.getComputedStyle(tabBar);
+      const ionTabsForStyles = tabBar.closest('ion-tabs');
+      const ionTabsComputedStyle = ionTabsForStyles ? window.getComputedStyle(ionTabsForStyles) : null;
+      const tabBarRect = tabBar.getBoundingClientRect();
+
+      // Log key values directly so they're always visible
+      // console.log('[ds-mobile-tab-bar] KEY VALUES:');
+      // console.log('  tabBar.position:', computedStyle.position);
+      // console.log('  tabBar.top:', computedStyle.top);
+      // console.log('  tabBar.bottom:', computedStyle.bottom);
+      // console.log('  tabBar.order:', computedStyle.order);
+      // console.log('  tabBar.display:', computedStyle.display);
+      // console.log('  tabBarRect.top:', tabBarRect.top, 'px from top');
+      // console.log('  tabBarRect.bottom:', tabBarRect.bottom, 'px from top');
+      // console.log('  window.innerHeight:', window.innerHeight);
+      if (ionTabsComputedStyle) {
+        // console.log('  ionTabs.display:', ionTabsComputedStyle.display);
+        // console.log('  ionTabs.flexDirection:', ionTabsComputedStyle.flexDirection);
+        // console.log('  ionTabs.gridTemplateRows:', ionTabsComputedStyle.gridTemplateRows);
+      }
+      if (ionTabsForStyles) {
+        const children = Array.from(ionTabsForStyles.children);
+        // console.log('  ionTabs children count:', children.length);
+        children.forEach((child: any, index) => {
+          // console.log(`    [${index}] ${child.tagName} slot="${child.getAttribute('slot')}" order="${window.getComputedStyle(child).order}"`);
+        });
+      }
+
+      // console.log('[ds-mobile-tab-bar] updateSlot: Computed styles (slot correct but visually wrong):', {
+      //   tabBar: {
+      //     position: computedStyle.position,
+      //     top: computedStyle.top,
+      //     bottom: computedStyle.bottom,
+      //     order: computedStyle.order,
+      //     display: computedStyle.display,
+      //     zIndex: computedStyle.zIndex,
+      //     transform: computedStyle.transform,
+      //     marginTop: computedStyle.marginTop,
+      //     marginBottom: computedStyle.marginBottom,
+      //     width: computedStyle.width,
+      //     height: computedStyle.height
+      //   },
+      //   ionTabs: ionTabsComputedStyle ? {
+      //     display: ionTabsComputedStyle.display,
+      //     flexDirection: ionTabsComputedStyle.flexDirection,
+      //     gridTemplateRows: ionTabsComputedStyle.gridTemplateRows,
+      //     gridTemplateColumns: ionTabsComputedStyle.gridTemplateColumns,
+      //     position: ionTabsComputedStyle.position,
+      //     alignItems: ionTabsComputedStyle.alignItems,
+      //     justifyContent: ionTabsComputedStyle.justifyContent,
+      //     height: ionTabsComputedStyle.height,
+      //     minHeight: ionTabsComputedStyle.minHeight
+      //   } : null,
+      //   tabBarRect: {
+      //     top: tabBarRect.top,
+      //     bottom: tabBarRect.bottom,
+      //     height: tabBarRect.height,
+      //     y: tabBarRect.y,
+      //     left: tabBarRect.left,
+      //     right: tabBarRect.right,
+      //     width: tabBarRect.width
+      //   },
+      //   windowHeight: window.innerHeight,
+      //   distanceFromTop: tabBarRect.top,
+      //   distanceFromBottom: window.innerHeight - tabBarRect.bottom,
+      //   // Check if tab bar is actually in the DOM at the right position
+      //   tabBarParent: tabBar.parentElement?.tagName,
+      //   tabBarNextSibling: tabBar.nextElementSibling?.tagName,
+      //   tabBarPreviousSibling: tabBar.previousElementSibling?.tagName,
+      //   // Check all children of ion-tabs to see DOM order
+      //   ionTabsChildren: ionTabsForStyles ? Array.from(ionTabsForStyles.children).map((child: any) => ({
+      //     tagName: child.tagName,
+      //     slot: child.getAttribute('slot'),
+      //     order: window.getComputedStyle(child).order
+      //   })) : null
+      // });
+    }
+  }
+
+  private setupSlotEnforcement(): void {
+    const hostElement = this.elementRef.nativeElement;
+    const tabBar = this.elementRef.nativeElement.querySelector('ion-tab-bar');
+    if (!tabBar) {
+      // console.log('[ds-mobile-tab-bar] setupSlotEnforcement: tabBar not found, retrying...');
+      // Retry if element not found yet
+      setTimeout(() => this.setupSlotEnforcement(), 50);
+      return;
+    }
+
+    // console.log('[ds-mobile-tab-bar] setupSlotEnforcement: Setting up MutationObserver');
+
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'slot') {
+          const target = mutation.target as HTMLElement;
+          const expectedSlot = this.isDesktop() ? 'top' : 'bottom';
+
+          // Check both host element and tab bar
+          if (target === hostElement || target === tabBar) {
+            const currentSlot = target.getAttribute('slot');
+
+            // console.log('[ds-mobile-tab-bar] Slot changed by external source:', {
+            //   target: target.tagName,
+            //   currentSlot,
+            //   expectedSlot,
+            //   isDesktop: this.isDesktop()
+            // });
+
+            // If Ionic or something else changed it, force it back
+            if (currentSlot !== expectedSlot) {
+              // console.log('[ds-mobile-tab-bar] Enforcing slot back to:', expectedSlot);
+              // Use requestAnimationFrame to avoid infinite loops
+              requestAnimationFrame(() => {
+                target.setAttribute('slot', expectedSlot);
+                (target as any).slot = expectedSlot;
+              });
+            }
+          }
+        }
+      });
+    });
+
+    // Observe both host element and tab bar for slot changes
+    observer.observe(hostElement, {
+      attributes: true,
+      attributeFilter: ['slot'],
+    });
+
+    observer.observe(tabBar, {
+      attributes: true,
+      attributeFilter: ['slot'],
+    });
+
+    // Store observer for cleanup
+    this.slotEnforcementObserver = observer;
+  }
+
+  ngOnDestroy(): void {
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+    }
+    if (this.slotEnforcementObserver) {
+      this.slotEnforcementObserver.disconnect();
+    }
+    if (this.mediaQuery) {
+      this.mediaQuery.removeEventListener('change', this.handleBreakpointChange);
+    }
+    if (this.routerSubscription) {
+      this.routerSubscription.unsubscribe();
+    }
+  }
+
+  private setupBreakpointDetection(): void {
+    // Use matchMedia for responsive breakpoint detection
+    this.mediaQuery = window.matchMedia('(min-width: 768px)');
+    this.isDesktop.set(this.mediaQuery.matches);
+
+    this.handleBreakpointChange = this.handleBreakpointChange.bind(this);
+    this.mediaQuery.addEventListener('change', this.handleBreakpointChange);
+  }
+
+  private handleBreakpointChange = (e: MediaQueryListEvent): void => {
+    // console.log('[ds-mobile-tab-bar] handleBreakpointChange:', {
+    //   matches: e.matches,
+    //   windowWidth: window.innerWidth,
+    //   previousIsDesktop: this.isDesktop()
+    // });
+    this.isDesktop.set(e.matches);
+    // Force update the slot when breakpoint changes
+    this.updateSlot();
+  };
+
+  private setupTitleRemovalObserver(): void {
+    const config = {
+      attributes: true,
+      attributeFilter: ['title'],
+      subtree: true,
+      childList: true,
+    };
+
+    this.mutationObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'title') {
+          const target = mutation.target as HTMLElement;
+          if (target.tagName === 'ION-TAB-BUTTON' && target.hasAttribute('title')) {
+            target.removeAttribute('title');
+          }
+        }
+      });
+      // Also do a sweep after any changes
+      this.removeTitleAttributes();
+    });
+
+    this.mutationObserver.observe(this.elementRef.nativeElement, config);
+  }
+
+  private removeTitleAttributes(): void {
+    const tabButtons = this.elementRef.nativeElement.querySelectorAll('ion-tab-button');
+    tabButtons.forEach((button: HTMLElement) => {
+      if (button.hasAttribute('title')) {
+        button.removeAttribute('title');
+      }
+      // Also remove from the native button inside shadow DOM
+      const nativeButton = button.shadowRoot?.querySelector('button');
+      if (nativeButton?.hasAttribute('title')) {
+        nativeButton.removeAttribute('title');
+      }
+    });
+  }
+
+  private setupActiveTabDetection(): void {
+    // Find the parent ion-tabs element
+    const ionTabs = this.elementRef.nativeElement.closest('ion-tabs');
+    if (!ionTabs) {
+      console.warn('ds-mobile-tab-bar: Could not find parent ion-tabs element');
+      return;
+    }
+
+    // Listen for tab changes using Ionic events
+    ionTabs.addEventListener('ionTabsDidChange', (event: any) => {
+      const tabRoute = event.detail?.tab;
+      if (tabRoute) {
+        this.activeTab.set(tabRoute);
+      } else {
+        // Fallback: check DOM immediately after event
+        setTimeout(() => this.updateActiveTabFromDOM(), 0);
+      }
+    });
+
+    // Also listen for tab button clicks
+    this.elementRef.nativeElement.addEventListener('click', (event: any) => {
+      const button = event.target.closest('ion-tab-button');
+      if (button) {
+        setTimeout(() => this.updateActiveTabFromDOM(), 50);
+      }
+    });
+
+    // Get initial selected tab
+    this.updateActiveTabFromDOM();
+
+    // Watch for selected attribute changes on tab buttons (more reliable)
+    const observer = new MutationObserver(() => {
+      this.updateActiveTabFromDOM();
+    });
+
+    observer.observe(this.elementRef.nativeElement, {
+      attributes: true,
+      attributeFilter: ['selected', 'tab'],
+      subtree: true,
+      childList: true,
+    });
+
+    // Also watch the parent ion-tabs for changes
+    observer.observe(ionTabs, {
+      attributes: true,
+      attributeFilter: ['selected', 'tab'],
+      subtree: true,
+    });
+
+    // Periodic check as fallback (in case events don't fire)
+    setInterval(() => {
+      this.updateActiveTabFromDOM();
+    }, 100);
+  }
+
+  private updateActiveTabFromDOM(): void {
+    // Check parent ion-tabs for selected tab (most reliable)
+    const ionTabs = this.elementRef.nativeElement.closest('ion-tabs');
+    if (ionTabs) {
+      // Method 1: Check for ion-tab with selected attribute
+      const selectedTab = ionTabs.querySelector('ion-tab[selected]');
+      if (selectedTab) {
+        const tabRoute = selectedTab.getAttribute('tab');
+        if (tabRoute) {
+          this.activeTab.set(tabRoute);
+          return;
+        }
+      }
+
+      // Method 2: Check for ion-tab without tab-hidden class (Ionic shows active tab)
+      const visibleTab = ionTabs.querySelector('ion-tab:not(.tab-hidden)');
+      if (visibleTab) {
+        const tabRoute = visibleTab.getAttribute('tab');
+        if (tabRoute) {
+          this.activeTab.set(tabRoute);
+          return;
+        }
+      }
+    }
+
+    // Method 3: Check tab buttons for selected state
+    const tabButtons = this.elementRef.nativeElement.querySelectorAll('ion-tab-button');
+    tabButtons.forEach((button: any) => {
+      // Check Ionic's native selected property
+      if (button.selected === true) {
+        const tabRoute = button.getAttribute('tab');
+        if (tabRoute) {
+          this.activeTab.set(tabRoute);
+        }
+      }
+    });
+  }
+
+  trackByTabId(index: number, tab: TabConfig): string {
+    return tab.id;
+  }
+
+  isTabActive(tabRoute: string): boolean {
+    const currentActive = this.activeTab();
+    // Match by route (primary) or by checking if the tab button is selected
+    if (currentActive === tabRoute) {
+      return true;
+    }
+
+    // Fallback: check if this button is actually selected in the DOM
+    const tabButtons = this.elementRef.nativeElement.querySelectorAll('ion-tab-button');
+    for (let i = 0; i < tabButtons.length; i++) {
+      const button = tabButtons[i] as any;
+      if (button.getAttribute('tab') === tabRoute && button.selected === true) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  /**
+   * Handle avatar click - opens profile menu if configured, otherwise just emits avatarClick
+   */
+  async handleAvatarClick(): Promise<void> {
+    // Emit the basic click event (for backwards compatibility)
+    this.avatarClick.emit();
+
+    // Use input if provided, otherwise fall back to service
+    const menuItems = this.profileMenuItems || this.userService.profileMenuItems();
+
+    // If no menu items configured, just emit and return
+    if (!menuItems || menuItems.length === 0) {
+      return;
+    }
+
+    // Open the bottom sheet with configured menu items
+    const sheet = await this.modalController.create({
+      component: DsMobileProfileActionsSheetComponent,
+      componentProps: {
+        actionGroups: menuItems,
+        currentLanguage: 'da', // TODO: Get from language service
+        availableLanguages: [
+          {
+            code: 'da',
+            nativeName: 'Dansk',
+            englishName: 'Danish',
+            flagIcon: '/Assets/country-flags/denmark.svg',
+          },
+          {
+            code: 'en',
+            nativeName: 'English',
+            englishName: 'English',
+            flagIcon: '/Assets/country-flags/united kingdom.svg',
+          },
+          {
+            code: 'sv',
+            nativeName: 'Svenska',
+            englishName: 'Swedish',
+            flagIcon: '/Assets/country-flags/sweden.svg',
+          },
+          {
+            code: 'no',
+            nativeName: 'Norsk',
+            englishName: 'Norwegian',
+            flagIcon: '/Assets/country-flags/norway.svg',
+          },
+          {
+            code: 'de',
+            nativeName: 'Deutsch',
+            englishName: 'German',
+            flagIcon: '/Assets/country-flags/germany.svg',
+          },
+        ],
+      },
+      breakpoints: [0, 1],
+      initialBreakpoint: 1,
+      handle: true,
+      cssClass: ['ds-bottom-sheet', 'auto-height'],
+    });
+
+    await sheet.present();
+    disableModalShadowPointerEvents(sheet);
+
+    const result = await sheet.onWillDismiss<ActionResult>();
+    if (result.data?.action) {
+      // Emit the selected action to parent
+      this.profileActionSelected.emit(result.data);
+      // Also notify globally via UserService
+      this.userService.notifyProfileAction(result.data);
+    }
+  }
+}