From a158f5a0582ea1b0d42d610d838d5a4b709ee26e Mon Sep 17 00:00:00 2001
From: LynithDev <61880709+LynithDev@users.noreply.github.com>
Date: Sun, 20 Oct 2024 16:36:47 +0200
Subject: [PATCH] fix: Navbar overlays mispositioned on startup

---
 apps/frontend/src/ui/components/Navbar.tsx | 67 +++++++++++-----------
 1 file changed, 35 insertions(+), 32 deletions(-)

diff --git a/apps/frontend/src/ui/components/Navbar.tsx b/apps/frontend/src/ui/components/Navbar.tsx
index c25a48c2..d507cf93 100644
--- a/apps/frontend/src/ui/components/Navbar.tsx
+++ b/apps/frontend/src/ui/components/Navbar.tsx
@@ -9,7 +9,6 @@ import PolyfrostFull from './logos/PolyfrostFull';
 import AccountPopup from './overlay/account/AccountsPopup';
 import useAccountController from './overlay/account/AddAccountModal';
 import NotificationPopup from './overlay/notifications/NotificationPopup';
-import Popup from './overlay/Popup';
 
 interface NavbarLinkProps {
 	path: string;
@@ -37,8 +36,8 @@ function Navbar() {
 
 	const navigate = useNavigate();
 
-	let profileButton!: HTMLButtonElement;
-	let notificationButton!: HTMLButtonElement;
+	let profileButtonContainer!: HTMLDivElement;
+	let notificationButtonContainer!: HTMLDivElement;
 
 	return (
 		<div class="h-15 min-h-[60px] flex flex-row items-center *:flex-1">
@@ -62,14 +61,23 @@ function Navbar() {
 				</Button>
 
 				{/* Notification Manager Button */}
-				<Button
-					buttonStyle="icon"
-					class="relative [&>div]:absolute"
-					onClick={() => setNotificationMenuOpen(!notificationMenuOpen())}
-					ref={notificationButton}
-				>
-					<Bell01Icon />
-				</Button>
+				<div class="relative" ref={notificationButtonContainer}>
+					<Button
+						buttonStyle="icon"
+						class="relative [&>div]:absolute"
+						onClick={() => setNotificationMenuOpen(!notificationMenuOpen())}
+					>
+						<Bell01Icon />
+					</Button>
+
+					<NotificationPopup
+						class="mt-2"
+						mount={notificationButtonContainer}
+						ref={el => el.classList.add('right-0')}
+						setVisible={setNotificationMenuOpen}
+						visible={notificationMenuOpen}
+					/>
+				</div>
 
 				{/* Launcher Settings Button */}
 				<Button buttonStyle="icon" onClick={() => navigate('/settings')}>
@@ -77,28 +85,23 @@ function Navbar() {
 				</Button>
 
 				{/* Account Menu Button */}
-				<button
-					class="hover:opacity-70"
-					onClick={() => setProfileMenuOpen(!profileMenuOpen())}
-					ref={profileButton}
-				>
-					<PlayerHead class="h-8 max-h-8 max-w-8 min-h-8 min-w-8 w-8 rounded-md" uuid={controller.defaultAccount()?.id} />
-				</button>
+				<div class="relative" ref={profileButtonContainer}>
+					<button
+						class="hover:opacity-70"
+						onClick={() => setProfileMenuOpen(!profileMenuOpen())}
+					>
+						<PlayerHead class="h-8 max-h-8 max-w-8 min-h-8 min-w-8 w-8 rounded-md" uuid={controller.defaultAccount()?.id} />
+					</button>
+
+					<AccountPopup
+						class="mt-2"
+						mount={profileButtonContainer}
+						ref={el => el.classList.add('right-0')}
+						setVisible={setProfileMenuOpen}
+						visible={profileMenuOpen}
+					/>
+				</div>
 			</div>
-
-			<AccountPopup
-				class="mt-2"
-				ref={el => Popup.setPos(profileButton, el)}
-				setVisible={setProfileMenuOpen}
-				visible={profileMenuOpen}
-			/>
-
-			<NotificationPopup
-				class="mt-2"
-				ref={el => Popup.setPos(notificationButton, el)}
-				setVisible={setNotificationMenuOpen}
-				visible={notificationMenuOpen}
-			/>
 		</div>
 	);
 }