diff --git a/packages/lib/common/SideMenu/SideMenuNav/index.tsx b/packages/lib/common/SideMenu/SideMenuNav/index.tsx index 7d497a69..7eac739c 100644 --- a/packages/lib/common/SideMenu/SideMenuNav/index.tsx +++ b/packages/lib/common/SideMenu/SideMenuNav/index.tsx @@ -1,6 +1,7 @@ import {cloneElement, Fragment, type ReactElement, useCallback, useEffect, useState} from 'react'; import Link from 'next/link'; import {usePathname} from 'next/navigation'; +import {useRouter} from 'next/router'; import {usePlausible} from 'next-plausible'; import {motion} from 'framer-motion'; import {useWeb3} from '@builtbymom/web3/contexts/useWeb3'; @@ -10,6 +11,7 @@ import {LinkOrDiv} from '@lib/common/LinkOrDiv'; import {useIsMounted} from '@lib/hooks/useIsMounted'; import {IconChevron} from '@lib/icons/IconChevron'; import {CurtainContent} from '@lib/primitives/Curtain'; +import {isInIframe} from '@lib/utils/helpers'; import {PLAUSIBLE_EVENTS} from '@lib/utils/plausible'; export type TSideMenuItem = { @@ -28,6 +30,7 @@ type TNavItemProps = { isDisabled?: boolean; onClick?: () => void; }; + function NavItem({ label, href, @@ -37,12 +40,30 @@ function NavItem({ hasSubmenu, isDisabled = false }: TNavItemProps): ReactElement { + const router = useRouter(); + + /****************************************************************************** + ** Handle navigation within Safe app context by updating the appUrl query param + ** while preserving the existing Safe context and other query parameters + *****************************************************************************/ + const goToSafeApp = useCallback(() => { + const url = { + pathname: router.pathname, + query: { + ...router.query, + appUrl: href + } + }; + router.replace(url); + }, [href, router]); + return ( + target={'_self'} + onClick={href === 'https://v1.smold.app/stream' && isInIframe() ? goToSafeApp : onClick}>
( } ] + }, + { + href: 'https://v1.smold.app/stream', + label: 'Stream', + icon: } // { // href: '/apps/earn', @@ -77,12 +89,6 @@ const MENU = [ // isDisabled: true, // icon: // }, - // { - // href: '/apps/stream', - // label: 'Stream', - // isDisabled: true, - // icon: - // } ]; function MyApp(props: AppProps): ReactElement {