fix: persist sidebar state on page refresh

[Nakshatra480]

Fix: Persist Sidebar Dropdown State on Page Refresh

Closes #2192

What kind of change does this PR introduce?

This PR introduces a bug fix/enhancement that addresses the issue of sidebar dropdown menus resetting their state (collapsing) when the page is refreshed. The changes ensure that the open/closed state of each dropdown is saved to localStorage and restored upon initialization, providing a seamless navigation experience for users.

Summary

This PR implements state persistence for the sidebar dropdown menus using localStorage, fixing the issue where the sidebar state was lost on page reload (Issue #2192).

Changes Made

1. Sidebar Dropdown Logic (pages/tools/components/ui/DropdownMenu.tsx)

   • Before: State isDropdownOpen initialized to false every time the component mounted.
   • After: State initialized based on localStorage value if an id is provided. Added useEffect hooks to sync state changes to localStorage and useRef to handle initial render race conditions.
   • Key Change: Added optional id prop to uniquely identify dropdowns for storage keys.

2. Sidebar Implementation (pages/tools/components/Sidebar.tsx)

   • Before: <DropdownMenu> called without an ID.
   • After: <DropdownMenu id={accessorKey} ...> passed to enable persistence for each tool category using its unique key.

3. Test Updates (cypress/components/DropdownMenu.cy.tsx)

   • Added a new test case: "persists state to localStorage when id is provided".
   • Verifies that:
     • Opening a dropdown saves true to localStorage.
     • Remounting the component (simulating refresh) restores the open state.
     • Closing it updates storage to false.

Why These Changes Matter

• User Experience: Users navigating through tools often refresh or share links; keeping the sidebar context preserves their navigation flow.
• Usability: Prevents frustration from having to re-open nested menus repeatedly.
• Production Readiness: Implemented with robust useEffect and useRef patterns to avoid hydration mismatches or infinite loops.

Testing

• ✅ Manual verification: Toggled menus, refreshed page, verified state persisted.
• ✅ Cypress tests: Added dedicated test suite for localStorage persistence.
• ✅ No linter errors: Cleaned up unused imports (useRouter).
• ✅ No console errors: Verified clean execution.

Expected Impact

• UX: Sidebar state remains consistent across sessions and reloads.
• Performance: Minimal impact (local storage operations are negligible).
• Reliability: Graceful degradation if localStorage is not available.

Files Changed

• pages/tools/components/ui/DropdownMenu.tsx - Added persistence logic.
• pages/tools/components/Sidebar.tsx - Passed unique IDs.
• cypress/components/DropdownMenu.cy.tsx - Added persistence tests.

Risk Assessment

• Risk Level: VERY LOW
• No breaking changes (prop is optional).
• Scoped to sidebar components only.
• Fallback: If localStorage is unavailable (e.g., privacy mode), it gracefully degrades to default behavior (closed).

[github-actions]

Hi @Nakshatra480! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[github-actions]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
website	✅ Ready (View Log)	Visit Preview	b3168de

[github-actions]

Hi @Nakshatra480! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (974ad0e) to head (b3168de).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #2199   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           30        30           
  Lines          640       649    +9     
  Branches       198       202    +4     
=========================================
+ Hits           640       649    +9     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

Hi @Nakshatra480! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[github-actions]

Hi @Nakshatra480! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[github-actions]

Hi @Nakshatra480! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[Nakshatra480]

ping @AgniveshChaubey