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
This commit is contained in:
Gigi
2025-10-15 11:05:17 +02:00
parent 2e2a1a2c9d
commit 3dd2980283
2 changed files with 7 additions and 4 deletions

View File

@@ -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

View File

@@ -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,