Mantine NavLink multiple opend option.

[mickeymaruf]

Hey,

I have nested elements listed inside other elements. Using opened property in NavLink to keep the selectedElement opened.

Problem: The issue is If I try to open elements inside the container it immediately closes the parent NavLink. Because it only opens one at a time. But I want them both be opened. If any child is opened then all the immediate parents should also be opened. And I can toggle between them.

What I'm specially looking for is the multiple option.

Thank you :)

[rtivital]

NavLink component does not restrict the number of opened components at a time. You can see that in the demo – https://mantine.dev/core/nav-link/#nested-navlinks

[mickeymaruf]

What I mean is, When I set the opened property opened={selectedId === id} and select any particular element that is not nested, It does open it.
But as for the nested elements it closes everything. But it should open that nested element along with all the parents.
And it prevents me from toggling as well.

Here is the example:

Code example:

I guess it's because condition for the parent element does not match when select its child.

SOLUTION
How I solved this is by storing all the immediate parents of the selected element, and then checking if it is included inside the array. Then the open will be true for all to be opened.

DRAWBACKS

1. Inefficient logic for the "recursion parent finding function" as the elements tree could be complex.
2. Unable to toggle

I am looking forward to better solutions for this if have any provided by this Component.
Open up to any suggestions if there's any mistakes in my logic.

Thanks. 💯