From 3dd2980283ddea22a538ed22e662862f9e0742a4 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Wed, 15 Oct 2025 11:05:17 +0200
Subject: [PATCH] fix(mobile): memoize toggleSidebar to prevent sidebar from
 closing immediately on mobile

- Wrapped toggleSidebar in useCallback to prevent function recreation on every render
- Updated route change effect to only close sidebar on actual pathname changes, not state changes
- Fixes issue where bookmarks sidebar wouldn't stay open on mobile PWA
---
 src/components/Bookmarks.tsx | 5 ++++-
 src/hooks/useBookmarksUI.ts  | 6 +++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/Bookmarks.tsx b/src/components/Bookmarks.tsx
index 3718f036..216e957c 100644
--- a/src/components/Bookmarks.tsx
+++ b/src/components/Bookmarks.tsx
@@ -126,10 +126,13 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
   } = useBookmarksUI({ settings })
 
   // Close sidebar on mobile when route changes (e.g., clicking on blog posts in Explore)
+  const prevPathnameRef = useRef<string>(location.pathname)
   useEffect(() => {
-    if (isMobile && isSidebarOpen) {
+    // Only close if pathname actually changed, not on initial render or other state changes
+    if (isMobile && isSidebarOpen && prevPathnameRef.current !== location.pathname) {
       toggleSidebar()
     }
+    prevPathnameRef.current = location.pathname
   }, [location.pathname, isMobile, isSidebarOpen, toggleSidebar])
 
   // Handle highlight navigation from explore page
diff --git a/src/hooks/useBookmarksUI.ts b/src/hooks/useBookmarksUI.ts
index 9e02af3f..afdac688 100644
--- a/src/hooks/useBookmarksUI.ts
+++ b/src/hooks/useBookmarksUI.ts
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { NostrEvent } from 'nostr-tools'
 import { HighlightVisibility } from '../components/HighlightsPanel'
 import { UserSettings } from '../services/settingsService'
@@ -47,9 +47,9 @@ export const useBookmarksUI = ({ settings }: UseBookmarksUIParams) => {
     })
   }, [settings])
 
-  const toggleSidebar = () => {
+  const toggleSidebar = useCallback(() => {
     setIsSidebarOpen(prev => !prev)
-  }
+  }, [])
 
   return {
     isMobile,