From ab763ca2425c9c915a605b22bf5411364cfd0609 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Wed, 19 Mar 2025 15:19:57 -0300
Subject: [PATCH] fix: show notifications on mobile (#17008)

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"
/>
---
 .../modules/dashboard/Navbar/MobileMenu.tsx   |  3 +-
 .../modules/dashboard/Navbar/NavbarView.tsx   | 48 ++++++++++---------
 2 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/site/src/modules/dashboard/Navbar/MobileMenu.tsx b/site/src/modules/dashboard/Navbar/MobileMenu.tsx
index 3debc742a9..d973ed5f34 100644
--- 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
index 56ce03f342..cb636e428e 100644
--- 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,18 +67,6 @@ export const NavbarView: FC<NavbarViewProps> = ({
 					canViewHealth={canViewHealth}
 				/>
 
-				<NotificationsInbox
-					fetchNotifications={API.getInboxNotifications}
-					markAllAsRead={() => {
-						throw new Error("Function not implemented.");
-					}}
-					markNotificationAsRead={(notificationId) =>
-						API.updateInboxNotificationReadStatus(notificationId, {
-							is_read: true,
-						})
-					}
-				/>
-
 				{user && (
 					<UserDropdown
 						user={user}
@@ -89,16 +77,30 @@ export const NavbarView: FC<NavbarViewProps> = ({
 				)}
 			</div>
 
-			<MobileMenu
-				proxyContextValue={proxyContextValue}
-				user={user}
-				supportLinks={supportLinks}
-				onSignOut={onSignOut}
-				canViewAuditLog={canViewAuditLog}
-				canViewOrganizations={canViewOrganizations}
-				canViewDeployment={canViewDeployment}
-				canViewHealth={canViewHealth}
-			/>
+			<div className="ml-auto flex items-center gap-3 md:hidden">
+				<NotificationsInbox
+					fetchNotifications={API.getInboxNotifications}
+					markAllAsRead={() => {
+						throw new Error("Function not implemented.");
+					}}
+					markNotificationAsRead={(notificationId) =>
+						API.updateInboxNotificationReadStatus(notificationId, {
+							is_read: true,
+						})
+					}
+				/>
+
+				<MobileMenu
+					proxyContextValue={proxyContextValue}
+					user={user}
+					supportLinks={supportLinks}
+					onSignOut={onSignOut}
+					canViewAuditLog={canViewAuditLog}
+					canViewOrganizations={canViewOrganizations}
+					canViewDeployment={canViewDeployment}
+					canViewHealth={canViewHealth}
+				/>
+			</div>
 		</div>
 	);
 };