fix: show notifications on mobile (#17008)

BrunoQuaresma · web-flow · commit ab763ca2425c · 2025-03-19T15:19:57.000-03:00
Show the notifications close to the menu button. **After fix:** <img width="515" alt="Screenshot 2025-03-19 at 15 09 36" src="https://github.com/user-attachments/assets/38f86c5b-d324-4a8b-9c68-ea818b226ae4" />
diff --git a/site/src/modules/dashboard/Navbar/MobileMenu.tsx b/site/src/modules/dashboard/Navbar/MobileMenu.tsx
@@ -67,9 +67,8 @@ export const MobileMenu: FC<MobileMenuProps> = ({
 			<DropdownMenuTrigger asChild>
 				<Button
 					aria-label={open ? "Close menu" : "Open menu"}
-					size="lg"
+					size="icon-lg"
 					variant="subtle"
-					className="ml-auto md:hidden"
 				>
 					{open ? <XIcon /> : <MenuIcon />}
 				</Button>
diff --git a/site/src/modules/dashboard/Navbar/NavbarView.tsx b/site/src/modules/dashboard/Navbar/NavbarView.tsx
@@ -55,7 +55,7 @@ export const NavbarView: FC<NavbarViewProps> = ({
 
 			<NavItems className="ml-4" />
 
-			<div className=" hidden md:flex items-center gap-3 ml-auto">
+			<div className="hidden md:flex items-center gap-3 ml-auto">
 				{proxyContextValue && (
 					<ProxyMenu proxyContextValue={proxyContextValue} />
 				)}
@@ -67,6 +67,17 @@ export const NavbarView: FC<NavbarViewProps> = ({
 					canViewHealth={canViewHealth}
 				/>
 
+				{user && (
+					<UserDropdown
+						user={user}
+						buildInfo={buildInfo}
+						supportLinks={supportLinks}
+						onSignOut={onSignOut}
+					/>
+				)}
+			</div>
+
+			<div className="ml-auto flex items-center gap-3 md:hidden">
 				<NotificationsInbox
 					fetchNotifications={API.getInboxNotifications}
 					markAllAsRead={() => {
@@ -79,26 +90,17 @@ export const NavbarView: FC<NavbarViewProps> = ({
 					}
 				/>
 
-				{user && (
-					<UserDropdown
-						user={user}
-						buildInfo={buildInfo}
-						supportLinks={supportLinks}
-						onSignOut={onSignOut}
-					/>
-				)}
+				<MobileMenu
+					proxyContextValue={proxyContextValue}
+					user={user}
+					supportLinks={supportLinks}
+					onSignOut={onSignOut}
+					canViewAuditLog={canViewAuditLog}
+					canViewOrganizations={canViewOrganizations}
+					canViewDeployment={canViewDeployment}
+					canViewHealth={canViewHealth}
+				/>
 			</div>
-
-			<MobileMenu
-				proxyContextValue={proxyContextValue}
-				user={user}
-				supportLinks={supportLinks}
-				onSignOut={onSignOut}
-				canViewAuditLog={canViewAuditLog}
-				canViewOrganizations={canViewOrganizations}
-				canViewDeployment={canViewDeployment}
-				canViewHealth={canViewHealth}
-			/>
 		</div>
 	);
 };
