diff --git a/apps/studio-prototype/src/app/[org]/branch-menu.tsx b/apps/studio-prototype/src/app/[org]/branch-menu.tsx
index 2d997236b12..d61e0aae336 100644
--- a/apps/studio-prototype/src/app/[org]/branch-menu.tsx
+++ b/apps/studio-prototype/src/app/[org]/branch-menu.tsx
@@ -2,7 +2,7 @@
import { orgs } from '@/src/config/org'
import { useConfig } from '@/src/hooks/use-config'
-import { resolveHideBranchesDropdown } from '@/src/utils/url-resolver'
+import { resolveHideBranchesDropdown, resolveHideProjectsDropdown } from '@/src/utils/url-resolver'
import { Check, ChevronsUpDown, GitBranch, Shield } from 'lucide-react'
import { usePathname } from 'next/navigation'
@@ -36,6 +36,7 @@ export function BranchMenu() {
const branches = projects.find((proj) => proj.key === projectFocus || project)?.branches || []
const hideBranchesDropdown = resolveHideBranchesDropdown(pathName, organization, project)
+ const hideProjectsDropdown = resolveHideProjectsDropdown(pathName, organization, project)
const branchBasedSettings =
!hideBranchesDropdown && pathName.startsWith(`/${organization}/settings/project`)
@@ -51,7 +52,11 @@ export function BranchMenu() {
aria-expanded={openProject}
className={cn(
'z-10 w-[180px] justify-between',
- !hideBranchesDropdown && 'rounded-r-none'
+ !hideBranchesDropdown && 'rounded-r-none',
+ 'left-0',
+ 'opacity-100',
+ hideProjectsDropdown && '-left-[8px] opacity-0',
+ 'transition-all duration-200 ease-out'
)}
iconRight={}
>
@@ -78,7 +83,7 @@ export function BranchMenu() {
'rounded-l-none',
'left-0',
'opacity-100',
- hideBranchesDropdown && '-left-[180px] opacity-0',
+ hideBranchesDropdown ? '-left-[180px] opacity-0' : 'delay-500',
'transition-all duration-200 ease-out'
)}
iconRight={}
diff --git a/apps/studio-prototype/src/utils/url-resolver.ts b/apps/studio-prototype/src/utils/url-resolver.ts
index 722200a007c..dfcd4ddd673 100644
--- a/apps/studio-prototype/src/utils/url-resolver.ts
+++ b/apps/studio-prototype/src/utils/url-resolver.ts
@@ -14,3 +14,15 @@ export function resolveHideBranchesDropdown(
pathName.startsWith(`/${organization}/settings/project/${project}/branching`)
)
}
+
+export function resolveHideProjectsDropdown(
+ pathName: string,
+ organization: string | undefined,
+ project: string | undefined
+) {
+ return (
+ pathName.startsWith(`/${organization}/settings`) &&
+ !pathName.startsWith(`/${organization}/settings/project/${project}`) &&
+ !pathName.startsWith(`/${organization}/settings/account`)
+ )
+}