Add expand/collapse sidebar handler to the arrow icon

[bauertim]

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.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
19-react-dev	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 14, 2024 6:00pm
react-dev	✅ Ready (Inspect)	Visit Preview		Oct 14, 2024 6:00pm

[github-actions]

Size changes

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

Five Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load
/404	104.63 KB (🟡 +303 B)	208.93 KB
/500	104.62 KB (🟡 +303 B)	208.93 KB
/[[...markdownPath]]	106.47 KB (🟡 +303 B)	210.78 KB
/errors	104.84 KB (🟡 +303 B)	209.14 KB
/errors/[errorCode]	104.81 KB (🟡 +303 B)	209.12 KB

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this.

[rammba]

Hi @bauertim, I'm glad to see the progress regarding this feature, great job! 🎉🚀

I've tested a little bit and there are two things that I noticed:

• Sometimes Quick Start section is not closed when some other section from learn react part is opened.
  
• It would be great to enable collapse by clicking on whole label, not just on the arrow.

Since I'm not a maintainer, but a translator, I just wanted to share my UX about this. I hope this can help you!
Good luck!