Hide mobile nav menu on organizations page (supabase#39908)

* Hide mobile nav menu on organizations page

* Fix

Author: joshenlim

apps/studio/components/layouts/AccountLayout/WithSidebar.tsx

@@ -1,10 +1,10 @@
 import { ArrowLeft } from 'lucide-react'
 import Link from 'next/link'
 import { PropsWithChildren, ReactNode } from 'react'
+import { useAppStateSnapshot } from 'state/app-state'
 import { cn, Menu } from 'ui'
 import MobileSheetNav from 'ui-patterns/MobileSheetNav/MobileSheetNav'
 import type { SidebarSection } from './AccountLayout.types'
-import { useAppStateSnapshot } from 'state/app-state'
 
 interface WithSidebarProps {
   title: string
@@ -49,7 +49,7 @@ export const WithSidebar = ({
       )}
       <div className="flex flex-1 flex-col">
         <div className="flex-1 flex-grow overflow-y-auto">
-          <div className="mx-auto max-w-7xl w-full px-6 lg:px-14 xl:px-28 2xl:px-32 py-16">
+          <div className="mx-auto max-w-7xl w-full md:px-6 lg:px-14 xl:px-28 2xl:px-32 py-16">
             {children}
           </div>
         </div>

apps/studio/components/layouts/DefaultLayout.tsx

@@ -15,6 +15,7 @@ import { ProjectContextProvider } from './ProjectLayout/ProjectContext'
 
 export interface DefaultLayoutProps {
   headerTitle?: string
+  hideMobileMenu?: boolean
 }
 
 /**
@@ -27,7 +28,11 @@ export interface DefaultLayoutProps {
  * - Mobile navigation bar
  * - First level side navigation bar (e.g For navigating to Table Editor, SQL Editor, Database page, etc)
  */
-const DefaultLayout = ({ children, headerTitle }: PropsWithChildren<DefaultLayoutProps>) => {
+const DefaultLayout = ({
+  children,
+  headerTitle,
+  hideMobileMenu,
+}: PropsWithChildren<DefaultLayoutProps>) => {
   const { ref } = useParams()
   const router = useRouter()
   const appSnap = useAppStateSnapshot()
@@ -55,7 +60,7 @@ const DefaultLayout = ({ children, headerTitle }: PropsWithChildren<DefaultLayou
             {/* Top Banner */}
             <AppBannerWrapper />
             <div className="flex-shrink-0">
-              <MobileNavigationBar />
+              <MobileNavigationBar hideMobileMenu={hideMobileMenu} />
               <LayoutHeader
                 showProductMenu={showProductMenu}
                 headerTitle={headerTitle}

apps/studio/components/layouts/ProjectLayout/NavigationBar/MobileNavigationBar.tsx

@@ -6,14 +6,14 @@ import { useState } from 'react'
 import { useParams } from 'common'
 import { SidebarContent } from 'components/interfaces/Sidebar'
 import { IS_PLATFORM } from 'lib/constants'
-import { buttonVariants, cn } from 'ui'
+import { Button, cn } from 'ui'
 import { CommandMenuTrigger } from 'ui-patterns'
 import MobileSheetNav from 'ui-patterns/MobileSheetNav/MobileSheetNav'
 
 export const ICON_SIZE = 20
 export const ICON_STROKE_WIDTH = 1.5
 
-const MobileNavigationBar = () => {
+const MobileNavigationBar = ({ hideMobileMenu }: { hideMobileMenu?: boolean }) => {
   const router = useRouter()
   const [isSheetOpen, setIsSheetOpen] = useState(false)
   const { ref: projectRef } = useParams()
@@ -57,16 +57,15 @@ const MobileNavigationBar = () => {
               </div>
             </button>
           </CommandMenuTrigger>
-          <button
-            title="Menu dropdown button"
-            className={cn(
-              buttonVariants({ type: 'default' }),
-              'flex lg:hidden border-default bg-surface-100/75 text-foreground-light rounded-md min-w-[30px] w-[30px] h-[30px] data-[state=open]:bg-overlay-hover/30'
-            )}
-            onClick={() => setIsSheetOpen(true)}
-          >
-            <Menu size={18} strokeWidth={1} />
-          </button>
+          {!hideMobileMenu && (
+            <Button
+              title="Menu dropdown button"
+              type="default"
+              className="flex lg:hidden border-default bg-surface-100/75 text-foreground-light rounded-md min-w-[30px] w-[30px] h-[30px] data-[state=open]:bg-overlay-hover/30"
+              icon={<Menu />}
+              onClick={() => setIsSheetOpen(true)}
+            />
+          )}
         </div>
       </nav>
       <MobileSheetNav open={isSheetOpen} onOpenChange={setIsSheetOpen} data-state="expanded">

apps/studio/pages/account/audit.tsx

@@ -27,7 +27,7 @@ const Audit: NextPageWithLayout = () => {
 
 Audit.getLayout = (page) => (
   <AppLayout>
-    <DefaultLayout headerTitle="Account">
+    <DefaultLayout hideMobileMenu headerTitle="Account">
       <OrganizationLayout>
         <AccountLayout title="Audit Logs">{page}</AccountLayout>
       </OrganizationLayout>

apps/studio/pages/account/me.tsx

@@ -2,9 +2,9 @@ import { AccountConnections } from 'components/interfaces/Account/Preferences/Ac
 import { AccountDeletion } from 'components/interfaces/Account/Preferences/AccountDeletion'
 import { AccountIdentities } from 'components/interfaces/Account/Preferences/AccountIdentities'
 import { AnalyticsSettings } from 'components/interfaces/Account/Preferences/AnalyticsSettings'
+import { HotkeySettings } from 'components/interfaces/Account/Preferences/HotkeySettings'
 import { ProfileInformation } from 'components/interfaces/Account/Preferences/ProfileInformation'
 import { ThemeSettings } from 'components/interfaces/Account/Preferences/ThemeSettings'
-import { HotkeySettings } from 'components/interfaces/Account/Preferences/HotkeySettings'
 import AccountLayout from 'components/layouts/AccountLayout/AccountLayout'
 import AppLayout from 'components/layouts/AppLayout/AppLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
@@ -27,7 +27,7 @@ const User: NextPageWithLayout = () => {
 
 User.getLayout = (page) => (
   <AppLayout>
-    <DefaultLayout headerTitle="Account">
+    <DefaultLayout hideMobileMenu headerTitle="Account">
       <OrganizationLayout>
         <AccountLayout title="Account Settings">{page}</AccountLayout>
       </OrganizationLayout>

apps/studio/pages/account/security.tsx

@@ -81,7 +81,7 @@ const Security: NextPageWithLayout = () => {
 
 Security.getLayout = (page) => (
   <AppLayout>
-    <DefaultLayout headerTitle="Account">
+    <DefaultLayout hideMobileMenu headerTitle="Account">
       <OrganizationLayout>
         <AccountLayout title="Security">{page}</AccountLayout>
       </OrganizationLayout>

apps/studio/pages/account/tokens.tsx

@@ -72,7 +72,7 @@ const UserAccessTokens: NextPageWithLayout = () => {
 
 UserAccessTokens.getLayout = (page) => (
   <AppLayout>
-    <DefaultLayout headerTitle="Account">
+    <DefaultLayout hideMobileMenu headerTitle="Account">
       <OrganizationLayout>
         <AccountLayout title="Access Tokens">{page}</AccountLayout>
       </OrganizationLayout>

apps/studio/pages/organizations.tsx

@@ -114,8 +114,8 @@ const OrganizationsPage: NextPageWithLayout = () => {
 
 OrganizationsPage.getLayout = (page) => (
   <AppLayout>
-    <DefaultLayout headerTitle="Organizations">
-      <PageLayout title="Your Organizations" className="max-w-[1200px] px-6 mx-auto">
+    <DefaultLayout hideMobileMenu headerTitle="Organizations">
+      <PageLayout title="Your Organizations" className="max-w-[1200px] lg:px-6 mx-auto">
         {page}
       </PageLayout>
     </DefaultLayout>