prevent sidebar from re-rendering

[trusktr]

Feature request

Each time we navigate, if the sidebar menu item expands, the whole sidebar re-renders (sidebar DOM is replaced with a new one)

What problem does this feature solve?

This would make it easier to attach logic onto DOM elements without the being destroyed.

What does the proposed API look like?

We should render all menu items with all their child items, but all collapsed. We can then open/close them to reveal the children. This is better than re-rendering the whole sidebar in order to add/remove the child content.

How should this be implemented in your opinion?

We can use a pure CSS tree view (similar to the ones I linked in #1180)

Are you willing to work on this yourself?

Yeah

[anikethsaha]

So everytime we click any link, it will re-render the whole ?

[trusktr]

Yeah, that's what I'm observing in devtools. You can do that like this:

• go to the Elements tab in devtools.
• find the <div class="sidebar-nav">
• expand it so you can see some ul and li items.
• now click on any sidebar menu item
• notice that the Elements panel will animate the color of the <div> purple (default is purple unless you have a devtools theme installed)
• notice that the top level <ul> is now closed if you had previously opened it. This is devtool's way of showing you that the content was replaced with new content.

Here's a way to prove it using variable references:

• go to the Elements tab in devtools.
• find the <div class="sidebar-nav">
• expand the div so you can see some ul and li items.
• select the top-level ul element.
• go to the Console tab and run var ul1 = $0
• now click on any sidebar menu item
• now select the top level ul element again
• go to Console tab and run var ul2 = $0
• Now run ul1 === ul2 and see the result is false. This is because they are not the same reference. The ul1 variable has a reference to the old <ul> element before it got replaced by the new one.

This would be great to fix. It wreaks havoc on anyone's code that may rely on keeping a reference to sidebar DOM elements (a common thing in jQuery code).

[anikethsaha]

seems reasonable.
Though we want to have a ref so that when the page reloads the sidebar should highlight the expandables.

We can have a PoC/PR for this

[trusktr]

sidebar should highlight the expandables.

👍 That can be done without refreshing the sidebar.