From d324291378ee65c49933bac1c3fe87576a918f5d Mon Sep 17 00:00:00 2001
From: Greg Shear <greg@estuary.dev>
Date: Mon, 1 Jun 2026 15:30:11 -0400
Subject: [PATCH] Move account and help menus to side nav footer

Relocate UserMenu (account/avatar) and HelpMenu from the top app bar to the
lower-left of the side navigation. Their popups now open upward and drop the
downward-pointing arrow to suit the new bottom-docked position.
---
 src/components/menus/HelpMenu.tsx        | 5 +++++
 src/components/menus/UserMenu.tsx        | 5 +++++
 src/components/navigation/Navigation.tsx | 6 ++++++
 src/components/navigation/TopBar.tsx     | 6 ------
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/menus/HelpMenu.tsx b/src/components/menus/HelpMenu.tsx
index c1855ce0a8..956cd4d687 100644
--- a/src/components/menus/HelpMenu.tsx
+++ b/src/components/menus/HelpMenu.tsx
@@ -13,6 +13,11 @@ function HelpMenu() {
             icon={<HelpCircle />}
             identifier="help-menu"
             tooltip={intl.formatMessage({ id: 'helpMenu.tooltip' })}
+            hideArrow
+            customMenuPosition={{
+                anchorOrigin: { vertical: 'top', horizontal: 'left' },
+                transformOrigin: { vertical: 'bottom', horizontal: 'left' },
+            }}
         >
             <ExternalLinkMenuItem
                 link={intl.formatMessage({ id: 'helpMenu.docs.link' })}
diff --git a/src/components/menus/UserMenu.tsx b/src/components/menus/UserMenu.tsx
index 7bf6a3ccd4..ddcd26e2d4 100644
--- a/src/components/menus/UserMenu.tsx
+++ b/src/components/menus/UserMenu.tsx
@@ -50,6 +50,11 @@ const UserMenu = ({ iconColor }: Props) => {
                 }
                 identifier="account-menu"
                 tooltip={intl.formatMessage({ id: 'accountMenu.tooltip' })}
+                hideArrow
+                customMenuPosition={{
+                    anchorOrigin: { vertical: 'top', horizontal: 'left' },
+                    transformOrigin: { vertical: 'bottom', horizontal: 'left' },
+                }}
             >
                 <MenuItem sx={nonInteractiveMenuStyling}>
                     <ListItemIcon>
diff --git a/src/components/navigation/Navigation.tsx b/src/components/navigation/Navigation.tsx
index 82ef0714bd..82e654d41a 100644
--- a/src/components/navigation/Navigation.tsx
+++ b/src/components/navigation/Navigation.tsx
@@ -23,6 +23,8 @@ import {
 import { useIntl } from 'react-intl';
 
 import { authenticatedRoutes } from 'src/app/routes';
+import HelpMenu from 'src/components/menus/HelpMenu';
+import UserMenu from 'src/components/menus/UserMenu';
 import ListItemLink from 'src/components/navigation/ListItemLink';
 import ModeSwitch from 'src/components/navigation/ModeSwitch';
 import { paperBackground } from 'src/context/Theme';
@@ -118,6 +120,10 @@ const Navigation = ({ open, width, onNavigationToggle }: NavigationProps) => {
                             py: 1,
                         }}
                     >
+                        <UserMenu iconColor={theme.palette.text.primary} />
+
+                        <HelpMenu />
+
                         <ModeSwitch />
 
                         <Tooltip
diff --git a/src/components/navigation/TopBar.tsx b/src/components/navigation/TopBar.tsx
index 5d35e1a122..6b2de160a8 100644
--- a/src/components/navigation/TopBar.tsx
+++ b/src/components/navigation/TopBar.tsx
@@ -4,8 +4,6 @@ import { useTheme } from '@mui/material/styles';
 
 import { HeaderPill } from 'src/components/AgentSkills/HeaderPill';
 import CompanyLogo from 'src/components/graphics/CompanyLogo';
-import HelpMenu from 'src/components/menus/HelpMenu';
-import UserMenu from 'src/components/menus/UserMenu';
 import PageTitle from 'src/components/navigation/PageTitle';
 import SidePanelDocsOpenButton from 'src/components/sidePanelDocs/OpenButton';
 import { UpdateAlert } from 'src/components/UpdateAlert';
@@ -45,10 +43,6 @@ const Topbar = () => {
 
                     <HeaderPill />
 
-                    <HelpMenu />
-
-                    <UserMenu iconColor={theme.palette.text.primary} />
-
                     <SidePanelDocsOpenButton />
                 </Stack>
             </Toolbar>