Compare commits
1 Commits
main
...
refactor/h
Author | SHA1 | Date | |
---|---|---|---|
|
41f390cf59 |
@ -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 />
|
||||
|
@ -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',
|
||||
|
Loading…
x
Reference in New Issue
Block a user