|
|
|
@ -92,34 +92,49 @@ |
|
|
|
let showBranchMenu = $state(false); |
|
|
|
let showBranchMenu = $state(false); |
|
|
|
let showOwnerMenu = $state(false); |
|
|
|
let showOwnerMenu = $state(false); |
|
|
|
let moreMenuElement = $state<HTMLDivElement | null>(null); |
|
|
|
let moreMenuElement = $state<HTMLDivElement | null>(null); |
|
|
|
|
|
|
|
let menuButtonElement = $state<HTMLButtonElement | null>(null); |
|
|
|
|
|
|
|
|
|
|
|
// Adjust menu position to prevent overflow on both sides on mobile |
|
|
|
// Adjust menu position to prevent overflow on the right side |
|
|
|
$effect(() => { |
|
|
|
$effect(() => { |
|
|
|
if (showMoreMenu && moreMenuElement) { |
|
|
|
if (showMoreMenu && moreMenuElement && menuButtonElement) { |
|
|
|
// Use requestAnimationFrame to ensure DOM is updated |
|
|
|
// Use double requestAnimationFrame to ensure DOM is fully rendered |
|
|
|
requestAnimationFrame(() => { |
|
|
|
requestAnimationFrame(() => { |
|
|
|
if (!moreMenuElement) return; |
|
|
|
requestAnimationFrame(() => { |
|
|
|
const rect = moreMenuElement.getBoundingClientRect(); |
|
|
|
if (!moreMenuElement || !menuButtonElement) return; |
|
|
|
const viewportWidth = window.innerWidth; |
|
|
|
|
|
|
|
const padding = 10; // Padding from viewport edges |
|
|
|
const menuRect = moreMenuElement.getBoundingClientRect(); |
|
|
|
|
|
|
|
const buttonRect = menuButtonElement.getBoundingClientRect(); |
|
|
|
let transformX = 0; |
|
|
|
const viewportWidth = window.innerWidth; |
|
|
|
|
|
|
|
const padding = 16; // Padding from viewport edges |
|
|
|
// Check if menu overflows on the right |
|
|
|
|
|
|
|
if (rect.right > viewportWidth - padding) { |
|
|
|
// Menu is positioned with left: 0, so its left edge aligns with button's left edge |
|
|
|
const overflow = rect.right - (viewportWidth - padding); |
|
|
|
// Calculate where the menu's right edge currently is |
|
|
|
transformX = -overflow; |
|
|
|
const menuWidth = menuRect.width || 280; // Fallback to min-width |
|
|
|
} |
|
|
|
const currentLeft = buttonRect.left; |
|
|
|
|
|
|
|
const currentRight = currentLeft + menuWidth; |
|
|
|
// Check if menu overflows on the left (after right adjustment) |
|
|
|
|
|
|
|
const adjustedLeft = rect.left + transformX; |
|
|
|
let transformX = 0; |
|
|
|
if (adjustedLeft < padding) { |
|
|
|
|
|
|
|
// Menu would be cut off on the left, shift it right |
|
|
|
// Check if menu overflows on the right |
|
|
|
transformX = padding - rect.left; |
|
|
|
if (currentRight > viewportWidth - padding) { |
|
|
|
} |
|
|
|
// Menu would overflow on the right, shift it left |
|
|
|
|
|
|
|
const rightOverflow = currentRight - (viewportWidth - padding); |
|
|
|
moreMenuElement.style.transform = `translateX(${transformX}px)`; |
|
|
|
transformX = -rightOverflow; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Re-check left after adjustment - ensure we don't go off left |
|
|
|
|
|
|
|
const finalLeft = currentLeft + transformX; |
|
|
|
|
|
|
|
if (finalLeft < padding) { |
|
|
|
|
|
|
|
// If we'd go off left, position it at the left edge with padding |
|
|
|
|
|
|
|
transformX = padding - currentLeft; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
moreMenuElement.style.transform = `translateX(${transformX}px)`; |
|
|
|
|
|
|
|
}); |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
} else if (moreMenuElement) { |
|
|
|
|
|
|
|
// Reset transform when menu closes |
|
|
|
|
|
|
|
moreMenuElement.style.transform = ''; |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
@ -149,6 +164,7 @@ |
|
|
|
<div class="menu-button-wrapper"> |
|
|
|
<div class="menu-button-wrapper"> |
|
|
|
<button |
|
|
|
<button |
|
|
|
class="menu-button" |
|
|
|
class="menu-button" |
|
|
|
|
|
|
|
bind:this={menuButtonElement} |
|
|
|
onclick={() => { |
|
|
|
onclick={() => { |
|
|
|
onMenuToggle?.(); |
|
|
|
onMenuToggle?.(); |
|
|
|
showMoreMenu = !showMoreMenu; |
|
|
|
showMoreMenu = !showMoreMenu; |
|
|
|
|
