hide profile menu and make non-clickable profile name & avatar on popup mode

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 ? <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 && (
+          {isKeyPage && (
-            <StyledProfileContainer>
+            <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 />

src/layout/Header/styled.tsx

@@ -32,18 +32,23 @@ export const StyledAppName = styled((props: TypographyProps) => (
   marginLeft: '0.5rem',
 }))
 
-export const StyledProfileContainer = styled((props: StackProps) => <Stack {...props} />)(() => ({
+export const StyledProfileContainer = styled((props: StackProps & { nonclickable: boolean }) => <Stack {...props} />)(
-  gap: '1rem',
+  ({ nonclickable = false }) => ({
-  flexDirection: 'row',
+    gap: '1rem',
-  alignItems: 'center',
+    flexDirection: 'row',
-  flex: 1,
+    alignItems: 'center',
-  '& .avatar': {
+    flex: 1,
-    cursor: 'pointer',
+    '& .avatar': {
-  },
+      cursor: 'pointer',
-  '& .username': {
+    },
-    cursor: 'pointer',
+    '& .username': {
-  },
+      cursor: 'pointer',
-}))
+    },
+    '& > *': {
+      pointerEvents: nonclickable ? 'none' : 'initial',
+    },
+  })
+)
 
 export const StyledThemeButton = styled(IconButton)({
   margin: '0 0.5rem',