fix: improve active state logic for navigation buttons

src/components/BottomNavigationBar/AccountButton.tsx

@@ -9,32 +9,31 @@ import { useMemo } from 'react'
 import BottomNavigationBarItem from './BottomNavigationBarItem'
 
 export default function AccountButton() {
-  const { navigate, current } = usePrimaryPage()
+  const { navigate, current, display } = usePrimaryPage()
   const { pubkey, profile } = useNostr()
   const defaultAvatar = useMemo(
     () => (profile?.pubkey ? generateImageByPubkey(profile.pubkey) : ''),
     [profile]
   )
+  const active = useMemo(() => current === 'me' && display, [display, current])
 
   return (
     <BottomNavigationBarItem
       onClick={() => {
         navigate('me')
       }}
-      active={current === 'me'}
+      active={active}
     >
       {pubkey ? (
         profile ? (
-          <Avatar className={cn('w-7 h-7', current === 'me' ? 'ring-primary ring-1' : '')}>
+          <Avatar className={cn('w-7 h-7', active ? 'ring-primary ring-1' : '')}>
             <AvatarImage src={profile.avatar} className="object-cover object-center" />
             <AvatarFallback>
               <img src={defaultAvatar} />
             </AvatarFallback>
           </Avatar>
         ) : (
-          <Skeleton
+          <Skeleton className={cn('w-7 h-7 rounded-full', active ? 'ring-primary ring-1' : '')} />
-            className={cn('w-7 h-7 rounded-full', current === 'me' ? 'ring-primary ring-1' : '')}
-          />
         )
       ) : (
         <UserRound />

src/components/BottomNavigationBar/ExploreButton.tsx

@@ -3,10 +3,13 @@ import { Compass } from 'lucide-react'
 import BottomNavigationBarItem from './BottomNavigationBarItem'
 
 export default function ExploreButton() {
-  const { navigate, current } = usePrimaryPage()
+  const { navigate, current, display } = usePrimaryPage()
 
   return (
-    <BottomNavigationBarItem active={current === 'explore'} onClick={() => navigate('explore')}>
+    <BottomNavigationBarItem
+      active={current === 'explore' && display}
+      onClick={() => navigate('explore')}
+    >
       <Compass />
     </BottomNavigationBarItem>
   )

src/components/BottomNavigationBar/HomeButton.tsx

@@ -3,10 +3,13 @@ import { Home } from 'lucide-react'
 import BottomNavigationBarItem from './BottomNavigationBarItem'
 
 export default function HomeButton() {
-  const { navigate, current } = usePrimaryPage()
+  const { navigate, current, display } = usePrimaryPage()
 
   return (
-    <BottomNavigationBarItem active={current === 'home'} onClick={() => navigate('home')}>
+    <BottomNavigationBarItem
+      active={current === 'home' && display}
+      onClick={() => navigate('home')}
+    >
       <Home />
     </BottomNavigationBarItem>
   )

src/components/BottomNavigationBar/NotificationsButton.tsx

@@ -6,12 +6,12 @@ import BottomNavigationBarItem from './BottomNavigationBarItem'
 
 export default function NotificationsButton() {
   const { checkLogin } = useNostr()
-  const { navigate, current } = usePrimaryPage()
+  const { navigate, current, display } = usePrimaryPage()
   const { hasNewNotification } = useNotification()
 
   return (
     <BottomNavigationBarItem
-      active={current === 'notifications'}
+      active={current === 'notifications' && display}
       onClick={() => checkLogin(() => navigate('notifications'))}
     >
       <div className="relative">