fix(clerk-js): Add navbar menu for mobile on custom pages

clerk · Oct 6, 2023 · 09b5917 · 09b5917
1 parent 3fe7470
commit 09b5917
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 4 deletions.
diff --git a/packages/clerk-js/src/ui/common/CustomPageContentContainer.tsx 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
@@ -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
@@ -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}
             />