Compare commits

...

1 Commits

Author SHA1 Message Date
Bekbolsun
41f390cf59 hide profile menu and make non-clickable profile name & avatar on popup mode 2024-02-22 20:52:23 +06:00
2 changed files with 32 additions and 18 deletions

View File

@ -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 ? <ProfileMenu /> : <Menu />
}, [isPopupMode, isKeyPage])
return (
<StyledAppBar position={needReload ? 'relative' : 'fixed'}>
<Toolbar sx={{ padding: '12px' }}>
<Stack direction={'row'} justifyContent={'space-between'} alignItems={'center'} width={'100%'}>
{showProfile && (
<StyledProfileContainer>
{isKeyPage && (
<StyledProfileContainer nonclickable={isPopupMode}>
<Avatar src={userAvatar} alt={userName} onClick={handleNavigate} className="avatar">
{avatarTitle}
</Avatar>
@ -47,7 +56,7 @@ export const Header = () => {
</StyledProfileContainer>
)}
{!showProfile && (
{!isKeyPage && (
<StyledAppName>
<StyledAppLogo />
<span>Nsec.app</span>
@ -56,7 +65,7 @@ export const Header = () => {
<StyledThemeButton onClick={handleChangeMode}>{themeIcon}</StyledThemeButton>
{showProfile ? <ProfileMenu /> : <Menu />}
{renderMenus()}
</Stack>
</Toolbar>
<StyledDivider />

View File

@ -32,18 +32,23 @@ export const StyledAppName = styled((props: TypographyProps) => (
marginLeft: '0.5rem',
}))
export const StyledProfileContainer = styled((props: StackProps) => <Stack {...props} />)(() => ({
gap: '1rem',
flexDirection: 'row',
alignItems: 'center',
flex: 1,
'& .avatar': {
cursor: 'pointer',
},
'& .username': {
cursor: 'pointer',
},
}))
export const StyledProfileContainer = styled((props: StackProps & { nonclickable: boolean }) => <Stack {...props} />)(
({ 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',