From fadab47a31d53cab1656822fc8bcf6008c971983 Mon Sep 17 00:00:00 2001
From: Stefanos Anagnostou <stefanos@clerk.dev>
Date: Fri, 6 Oct 2023 13:00:44 +0300
Subject: [PATCH] fix(clerk-js): Add navbar menu for mobile on custom pages

---
 .../ui/common/CustomPageContentContainer.tsx  | 28 +++++++++++++++++++
 .../OrganizationProfileRoutes.tsx             |  4 +--
 .../UserProfile/UserProfileRoutes.tsx         |  4 +--
 3 files changed, 32 insertions(+), 4 deletions(-)
 create mode 100644 packages/clerk-js/src/ui/common/CustomPageContentContainer.tsx

diff --git a/packages/clerk-js/src/ui/common/CustomPageContentContainer.tsx b/packages/clerk-js/src/ui/common/CustomPageContentContainer.tsx
new file mode 100644
index 00000000000..e134a08f89e
--- /dev/null
+++ b/packages/clerk-js/src/ui/common/CustomPageContentContainer.tsx
@@ -0,0 +1,28 @@
+import { Col, descriptors } from '../customizables';
+import { CardAlert, NavbarMenuButtonRow, useCardState, withCardStateProvider } from '../elements';
+import type { CustomPageContent } from '../utils';
+import { ExternalElementMounter } from '../utils';
+
+export const CustomPageContentContainer = withCardStateProvider(
+  ({ mount, unmount }: Omit<CustomPageContent, 'url'>) => {
+    const card = useCardState();
+    return (
+      <Col
+        elementDescriptor={descriptors.page}
+        gap={8}
+      >
+        <CardAlert>{card.error}</CardAlert>
+        <NavbarMenuButtonRow />
+        <Col
+          elementDescriptor={descriptors.profilePage}
+          gap={8}
+        >
+          <ExternalElementMounter
+            mount={mount}
+            unmount={unmount}
+          />
+        </Col>
+      </Col>
+    );
+  },
+);
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx
index 8aacf80ccdc..49017282388 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx
@@ -1,8 +1,8 @@
+import { CustomPageContentContainer } from '../../common/CustomPageContentContainer';
 import { useOrganizationProfileContext } from '../../contexts';
 import { ProfileCardContent } from '../../elements';
 import { Route, Switch } from '../../router';
 import type { PropsOfComponent } from '../../styledSystem';
-import { ExternalElementMounter } from '../../utils';
 import { DeleteOrganizationPage, LeaveOrganizationPage } from './ActionConfirmationPage';
 import { AddDomainPage } from './AddDomainPage';
 import { InviteMembersPage } from './InviteMembersPage';
@@ -29,7 +29,7 @@ export const OrganizationProfileRoutes = (props: PropsOfComponent<typeof Profile
             path={!isPredefinedPageRoot && index === 0 ? undefined : customPage.url}
             key={`custom-page-${customPage.url}`}
           >
-            <ExternalElementMounter
+            <CustomPageContentContainer
               mount={customPage.mount}
               unmount={customPage.unmount}
             />
diff --git a/packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx b/packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx
index 0d7222f0756..f064b6b5521 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx
@@ -1,8 +1,8 @@
+import { CustomPageContentContainer } from '../../common/CustomPageContentContainer';
 import { useUserProfileContext } from '../../contexts';
 import { ProfileCardContent } from '../../elements';
 import { Route, Switch } from '../../router';
 import type { PropsOfComponent } from '../../styledSystem';
-import { ExternalElementMounter } from '../../utils';
 import { ConnectedAccountsPage } from './ConnectedAccountsPage';
 import { DeletePage } from './DeletePage';
 import { EmailPage } from './EmailPage';
@@ -36,7 +36,7 @@ export const UserProfileRoutes = (props: PropsOfComponent<typeof ProfileCardCont
             path={!isAccountPageRoot && index === 0 ? undefined : customPage.url}
             key={`custom-page-${customPage.url}`}
           >
-            <ExternalElementMounter
+            <CustomPageContentContainer
               mount={customPage.mount}
               unmount={customPage.unmount}
             />