Add expand/collapse sidebar handler to the arrow icon

[bauertim]

trafficstars

Overview

Added manual expand/collapse toggle handler for the arrow icon in the sidebar while keeping the original design, functionality and structure of the sidebar. preview

Details

SidebarRouteTree component recursively renders routes which make up the sidebar using route tree and breadcrumbs, so I have added state to keep track of the expanded and collapsed routes, and toggle and expand handlers.

The main functionality of the sidebar is kept intact:

• Always load the route path and expand children routes when clicking on the route
• Only 1 route group is expanded at a time for better navigation
• After refresh selected route is expanded

Red bg to illustrate the size of the manual toggle. Clicking the route elsewhere functions exactly like before.

Open Issues

There have been several issues opened in the past years of users intuitively wanting to manually collapse and expand routes for easier navigation, just recently #7203. Which shows the desire and need for better functionality and navigation with manual collapsing and expanding when searching instead of needing to always load the route in order to expand it. But from what I have seen, all previous PR's messed up the original logic, which shouldn't be the case. My solution keeps the original functionality while adding the new functionality only to the arrow icon for those who want to use it.

Testing

I have ran several profiler tests and compared memory usage, load times and cpu usage and couldn't find any noticeable differences with the new additional state. I have also tested memoized version of the of the sidebarroutree but there wasn't any significant difference since the tree of routes is pretty small.

Conclusion

After playing around and using the new sidebar, it is hard to go back to the previous version. Test it yourself in the preview.