mirror of
https://github.com/dergigi/boris.git
synced 2026-02-18 21:44:57 +01:00
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:
@@ -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
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user