Fix product menu for mobile not showing in LayoutHeader (#35170)

apps/studio/components/layouts/DefaultLayout.tsx

@@ -6,6 +6,7 @@ import { AppBannerContextProvider } from 'components/interfaces/App/AppBannerWra
 import { useIsNewLayoutEnabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
 import { Sidebar } from 'components/interfaces/Sidebar'
 import { useShowLayoutHeader } from 'hooks/misc/useShowLayoutHeader'
+import { useRouter } from 'next/router'
 import { SidebarProvider } from 'ui'
 import { LayoutHeader } from './ProjectLayout/LayoutHeader'
 import MobileNavigationBar from './ProjectLayout/NavigationBar/MobileNavigationBar'
@@ -24,13 +25,14 @@ export interface DefaultLayoutProps {
  * - App banner (e.g for notices or incidents)
  * - Mobile navigation bar
  * - First level side navigation bar (e.g For navigating to Table Editor, SQL Editor, Database page, etc)
- * @param showProductMenu - (Mobile only) Show button to toggle visiblity of product menu (Default: true)
  */
 const DefaultLayout = ({ children, headerTitle }: PropsWithChildren<DefaultLayoutProps>) => {
   const newLayoutPreview = useIsNewLayoutEnabled()
   const showLayoutHeader = useShowLayoutHeader()
 
   const { ref } = useParams()
+  const router = useRouter()
+  const showProductMenu = !!ref && router.pathname !== '/project/[ref]'
 
   return (
     <SidebarProvider defaultOpen={false}>
@@ -42,7 +44,7 @@ const DefaultLayout = ({ children, headerTitle }: PropsWithChildren<DefaultLayou
             <div className="flex-shrink-0">
               <MobileNavigationBar />
               {newLayoutPreview || showLayoutHeader ? (
-                <LayoutHeader headerTitle={headerTitle} />
+                <LayoutHeader showProductMenu={showProductMenu} headerTitle={headerTitle} />
               ) : null}
             </div>
             {/* Main Content Area */}