Fix: unresponsive toggle menu after navigating back from roadmap page…

[SOUMITRO-SAHA]

#6861

Summary:
The toggle menu on the left, which allows users to select categories such as "All Roadmaps," "Absolute Beginners," "Web Development," and others, becomes unresponsive after navigating to a roadmap and then using the browser's back button to return to the previous page.

Details:
Upon detailed debugging, it was observed that Firefox aggressively caches certain static resources, including manifest.json and favicon.ico. Specifically, when navigating back to the /roadmaps route from other routes, Firefox attempts to load a /favicon.ico file from the root directory. However, in this project, the favicon is located inside the manifest folder:

|- public
|  |- manifest
|     |- favicon.ico

The browser's expectation is to find the favicon at:

|- public
|- favicon.ico

Due to this discrepancy, Firefox fails to load the favicon correctly, which interferes with the code execution and results in the toggle menu becoming unresponsive.

Current Solution:
To address this, a copy of the favicon has been added to the public folder. While this change is anticipated to resolve the issue, it has not yet been tested in a production build. It is believed that this adjustment will fix the problem, but further testing is necessary to confirm its effectiveness.

Alternative Solution:
If the above solution does not resolve the issue, another approach involves using the popstate event to dynamically reload the content on the /roadmaps route specifically for Firefox. This approach would ensure that the page content is reloaded correctly when navigating back, circumventing the caching issue.

Discussion:
I am open to further discussions or alternative solutions to ensure this issue is fully resolved. Please let me know if there are any additional steps or considerations that should be addressed.

Firefox Implementation: