fix: update sidebar button active state logic

src/components/Sidebar/BookmarkButton.tsx

@@ -4,14 +4,14 @@ import { Bookmark } from 'lucide-react'
 import SidebarItem from './SidebarItem'
 
 export default function BookmarkButton({ collapse }: { collapse: boolean }) {
-  const { navigate, current } = usePrimaryPage()
+  const { navigate, current, display } = usePrimaryPage()
   const { checkLogin } = useNostr()
 
   return (
     <SidebarItem
       title="Bookmarks"
       onClick={() => checkLogin(() => navigate('bookmark'))}
-      active={current === 'bookmark'}
+      active={display && current === 'bookmark'}
       collapse={collapse}
     >
       <Bookmark />

src/components/Sidebar/ExploreButton.tsx

@@ -5,13 +5,13 @@ import SidebarItem from './SidebarItem'
 
 export default function RelaysButton({ collapse }: { collapse: boolean }) {
   const { t } = useTranslation()
-  const { navigate, current } = usePrimaryPage()
+  const { navigate, current, display } = usePrimaryPage()
 
   return (
     <SidebarItem
       title={t('Explore')}
       onClick={() => navigate('explore')}
-      active={current === 'explore'}
+      active={display && current === 'explore'}
       collapse={collapse}
     >
       <Compass />

src/components/Sidebar/HomeButton.tsx

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

src/components/Sidebar/NotificationButton.tsx

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

src/components/Sidebar/ProfileButton.tsx

@@ -4,14 +4,14 @@ import { UserRound } from 'lucide-react'
 import SidebarItem from './SidebarItem'
 
 export default function ProfileButton({ collapse }: { collapse: boolean }) {
-  const { navigate, current } = usePrimaryPage()
+  const { navigate, current, display } = usePrimaryPage()
   const { checkLogin } = useNostr()
 
   return (
     <SidebarItem
       title="Profile"
       onClick={() => checkLogin(() => navigate('profile'))}
-      active={current === 'profile'}
+      active={display && current === 'profile'}
       collapse={collapse}
     >
       <UserRound />

src/components/Sidebar/SettingsButton.tsx

@@ -5,7 +5,7 @@ import { Settings } from 'lucide-react'
 import SidebarItem from './SidebarItem'
 
 export default function SettingsButton({ collapse }: { collapse: boolean }) {
-  const { current, navigate } = usePrimaryPage()
+  const { current, navigate, display } = usePrimaryPage()
   const { push } = useSecondaryPage()
   const { enableSingleColumnLayout } = useUserPreferences()
 
@@ -14,7 +14,7 @@ export default function SettingsButton({ collapse }: { collapse: boolean }) {
       title="Settings"
       onClick={() => (enableSingleColumnLayout ? navigate('settings') : push(toSettings()))}
       collapse={collapse}
-      active={current === 'settings'}
+      active={display && current === 'settings'}
     >
       <Settings />
     </SidebarItem>