Modify TopNav behavior to allow for page back

Author: youngkidwarrior

apps/next/pages/account/rewards/activity.tsx

@@ -3,7 +3,7 @@ import Head from 'next/head'
 import { userProtectedGetSSP } from 'utils/userProtected'
 import type { NextPageWithLayout } from 'next-app/pages/_app'
 import { HomeLayout } from 'app/features/home/layout.web'
-import { ButtonOption, TopNav } from 'app/components/TopNav'
+import { TopNav } from 'app/components/TopNav'
 import { MobileButtonRowLayout } from 'app/components/MobileButtonRowLayout'
 
 export const Page: NextPageWithLayout = () => {
@@ -21,9 +21,7 @@ export const getServerSideProps = userProtectedGetSSP()
 
 Page.getLayout = (children) => (
   <MobileButtonRowLayout.ActivityRewards>
-    <HomeLayout
-      TopNav={<TopNav header="Activity Rewards" showLogo button={ButtonOption.PROFILE} />}
-    >
+    <HomeLayout TopNav={<TopNav header="Activity Rewards" backToBasePath={false} />}>
       {children}
     </HomeLayout>
   </MobileButtonRowLayout.ActivityRewards>

apps/next/pages/account/rewards/index.tsx

@@ -3,7 +3,7 @@ import Head from 'next/head'
 import { userProtectedGetSSP } from 'utils/userProtected'
 import type { NextPageWithLayout } from 'next-app/pages/_app'
 import { HomeLayout } from 'app/features/home/layout.web'
-import { ButtonOption, TopNav } from 'app/components/TopNav'
+import { TopNav } from 'app/components/TopNav'
 
 export const Page: NextPageWithLayout = () => {
   return (
@@ -18,9 +18,7 @@ export const Page: NextPageWithLayout = () => {
 
 export const getServerSideProps = userProtectedGetSSP()
 Page.getLayout = (children) => (
-  <HomeLayout TopNav={<TopNav header="Rewards" button={ButtonOption.PROFILE} />}>
-    {children}
-  </HomeLayout>
+  <HomeLayout TopNav={<TopNav header="Rewards" />}>{children}</HomeLayout>
 )
 
 export default Page

packages/app/components/TopNav.tsx

@@ -51,6 +51,11 @@ interface TopNavProps {
    * @default false
    */
   noSubroute?: boolean
+  /**
+   * Whether the back arrow navigates to the base path
+   * @default true
+   */
+  backToBasePath?: boolean
 }
 
 export function AvatarMenuButton({ profile }: { profile?: Tables<'profiles'> | null }) {
@@ -91,6 +96,7 @@ export function TopNav({
   showReferral = false,
   button,
   noSubroute = false,
+  backToBasePath = true,
 }: TopNavProps) {
   const [queryParams, setRootParams] = useRootScreenParams()
   const path = usePathname()
@@ -118,7 +124,11 @@ export function TopNav({
       setRootParams({ ...queryParams, token: undefined })
       return
     }
-    const newPath = parts.length > 1 ? parts.slice(0, 1).join('/') : '/'
+    const newPath =
+      backToBasePath && parts.length > 1
+        ? parts.slice(0, 1).join('/')
+        : parts.slice(0, parts.length - 1).join('/')
+
     if (path.includes('/settings')) {
       push(`/${newPath}?nav=settings`)
       return
@@ -128,7 +138,10 @@ export function TopNav({
   }
   //@todo Refactor this so we can put back arrows on screens that need it
   const isSubRoute =
-    (!noSubroute && parts.length > 1) || path.includes('/secret-shop') || path.includes('/deposit')
+    (!noSubroute && parts.length > 1) ||
+    path.includes('/secret-shop') ||
+    path.includes('/deposit') ||
+    path.includes('/leaderboard')
 
   const renderButton = () => {
     switch (true) {