From 09c05cc62a81a0d8306feb0dddf0114aa3c6517b Mon Sep 17 00:00:00 2001
From: codytseng <codytseng@outlook.com>
Date: Mon, 20 Oct 2025 10:00:18 +0800
Subject: [PATCH] fix: update sidebar button active state logic

---
 src/components/Sidebar/BookmarkButton.tsx     | 4 ++--
 src/components/Sidebar/ExploreButton.tsx      | 4 ++--
 src/components/Sidebar/HomeButton.tsx         | 4 ++--
 src/components/Sidebar/NotificationButton.tsx | 4 ++--
 src/components/Sidebar/ProfileButton.tsx      | 4 ++--
 src/components/Sidebar/SettingsButton.tsx     | 4 ++--
 6 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/Sidebar/BookmarkButton.tsx b/src/components/Sidebar/BookmarkButton.tsx
index ca7d11a..320b549 100644
--- a/src/components/Sidebar/BookmarkButton.tsx
+++ b/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 />
diff --git a/src/components/Sidebar/ExploreButton.tsx b/src/components/Sidebar/ExploreButton.tsx
index 22a884d..0645c33 100644
--- a/src/components/Sidebar/ExploreButton.tsx
+++ b/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 />
diff --git a/src/components/Sidebar/HomeButton.tsx b/src/components/Sidebar/HomeButton.tsx
index 9dfd8dc..965fa7b 100644
--- a/src/components/Sidebar/HomeButton.tsx
+++ b/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 />
diff --git a/src/components/Sidebar/NotificationButton.tsx b/src/components/Sidebar/NotificationButton.tsx
index 2a3a5af..862a6b2 100644
--- a/src/components/Sidebar/NotificationButton.tsx
+++ b/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">
diff --git a/src/components/Sidebar/ProfileButton.tsx b/src/components/Sidebar/ProfileButton.tsx
index eb8e381..380bc8d 100644
--- a/src/components/Sidebar/ProfileButton.tsx
+++ b/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 />
diff --git a/src/components/Sidebar/SettingsButton.tsx b/src/components/Sidebar/SettingsButton.tsx
index 5f3fbc9..eade087 100644
--- a/src/components/Sidebar/SettingsButton.tsx
+++ b/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>