Problem
Three issues in Sidebar affect navigation state persistence, icon consistency, and mobile close behaviour.
1. Sidebar active section is reset to "wallet" on every page reload
Dashboard's useState<NavSection>("wallet") initialises to "wallet" on every mount. If a user is on the Transactions screen and refreshes, they are returned to the Wallet screen. Persisting the last active section in localStorage (or the URL hash) would preserve navigation state.
2. Sidebar nav icons have inconsistent strokeWidth values
Active nav items use strokeWidth={2} and inactive items use strokeWidth={1.5}. This difference is subtle but inconsistent — other icon usages in the app (e.g. TopBar, FeeEstimator) all use strokeWidth={1.5} regardless of state. The visual distinction should be achieved by colour/weight of the text, not by changing stroke width.
3. Sidebar does not close on navigation when already on the selected screen (mobile)
On mobile, tapping the active nav item calls handleNav which calls onClose() — but then onNavigate(id) is also called even though the screen hasn't changed, causing an unnecessary re-render. The if (active === id) { onClose(); return; } pattern should be used.
Solution
- Persist the last
active section in localStorage under "sorokit-active-nav" and restore it on mount.
- Use
strokeWidth={1.5} for all nav icons regardless of active state.
- Add
if (active === id) { onClose(); return; } at the top of handleNav.
Acceptance Criteria
Note for Contributors: Write a clear PR description. Include a screen recording of the nav state persisting across a page reload.
Problem
Three issues in
Sidebaraffect navigation state persistence, icon consistency, and mobile close behaviour.1.
Sidebaractive section is reset to"wallet"on every page reloadDashboard'suseState<NavSection>("wallet")initialises to"wallet"on every mount. If a user is on the Transactions screen and refreshes, they are returned to the Wallet screen. Persisting the last active section inlocalStorage(or the URL hash) would preserve navigation state.2.
Sidebarnav icons have inconsistentstrokeWidthvaluesActive nav items use
strokeWidth={2}and inactive items usestrokeWidth={1.5}. This difference is subtle but inconsistent — other icon usages in the app (e.g.TopBar,FeeEstimator) all usestrokeWidth={1.5}regardless of state. The visual distinction should be achieved by colour/weight of the text, not by changing stroke width.3.
Sidebardoes not close on navigation when already on the selected screen (mobile)On mobile, tapping the active nav item calls
handleNavwhich callsonClose()— but thenonNavigate(id)is also called even though the screen hasn't changed, causing an unnecessary re-render. Theif (active === id) { onClose(); return; }pattern should be used.Solution
activesection inlocalStorageunder"sorokit-active-nav"and restore it on mount.strokeWidth={1.5}for all nav icons regardless of active state.if (active === id) { onClose(); return; }at the top ofhandleNav.Acceptance Criteria
localStoragestrokeWidth={1.5}regardless of active statenpm run buildpasses