diff --git a/src/layout/Header/Header.tsx b/src/layout/Header/Header.tsx index c5b4a85..db7b503 100644 --- a/src/layout/Header/Header.tsx +++ b/src/layout/Header/Header.tsx @@ -1,7 +1,7 @@ import { Avatar, Stack, Toolbar, Typography, Divider, DividerProps, styled } from '@mui/material' import { StyledAppBar, StyledAppLogo, StyledAppName, StyledProfileContainer, StyledThemeButton } from './styled' import { Menu } from './components/Menu' -import { useNavigate, useParams } from 'react-router-dom' +import { useNavigate, useParams, useSearchParams } from 'react-router-dom' import { ProfileMenu } from './components/ProfileMenu' import { useProfile } from '@/hooks/useProfile' import DarkModeIcon from '@mui/icons-material/DarkMode' @@ -10,6 +10,7 @@ import { useAppDispatch, useAppSelector } from '@/store/hooks/redux' import { setThemeMode } from '@/store/reducers/ui.slice' import { useSessionStorage } from 'usehooks-ts' import { RELOAD_STORAGE_KEY } from '@/utils/consts' +import { useCallback } from 'react' export const Header = () => { const themeMode = useAppSelector((state) => state.ui.themeMode) @@ -17,9 +18,12 @@ export const Header = () => { const dispatch = useAppDispatch() const [needReload] = useSessionStorage(RELOAD_STORAGE_KEY, false) + const [searchParams] = useSearchParams() + const isPopupMode = searchParams.get('popup') === 'true' + const { npub = '' } = useParams<{ npub: string }>() const { userName, userAvatar, avatarTitle } = useProfile(npub) - const showProfile = Boolean(npub) + const isKeyPage = Boolean(npub) const handleNavigate = () => { navigate(`/key/${npub}`) @@ -32,12 +36,17 @@ export const Header = () => { dispatch(setThemeMode({ mode: isDarkMode ? 'light' : 'dark' })) } + const renderMenus = useCallback(() => { + if (isPopupMode && isKeyPage) return null + return isKeyPage ? : + }, [isPopupMode, isKeyPage]) + return ( - {showProfile && ( - + {isKeyPage && ( + {avatarTitle} @@ -47,7 +56,7 @@ export const Header = () => { )} - {!showProfile && ( + {!isKeyPage && ( Nsec.app @@ -56,7 +65,7 @@ export const Header = () => { {themeIcon} - {showProfile ? : } + {renderMenus()} diff --git a/src/layout/Header/styled.tsx b/src/layout/Header/styled.tsx index c80686b..a47cbbd 100644 --- a/src/layout/Header/styled.tsx +++ b/src/layout/Header/styled.tsx @@ -32,18 +32,23 @@ export const StyledAppName = styled((props: TypographyProps) => ( marginLeft: '0.5rem', })) -export const StyledProfileContainer = styled((props: StackProps) => )(() => ({ - gap: '1rem', - flexDirection: 'row', - alignItems: 'center', - flex: 1, - '& .avatar': { - cursor: 'pointer', - }, - '& .username': { - cursor: 'pointer', - }, -})) +export const StyledProfileContainer = styled((props: StackProps & { nonclickable: boolean }) => )( + ({ nonclickable = false }) => ({ + gap: '1rem', + flexDirection: 'row', + alignItems: 'center', + flex: 1, + '& .avatar': { + cursor: 'pointer', + }, + '& .username': { + cursor: 'pointer', + }, + '& > *': { + pointerEvents: nonclickable ? 'none' : 'initial', + }, + }) +) export const StyledThemeButton = styled(IconButton)({ margin: '0 0.5rem',