abhijithvijayan / react-minimal-side-navigation

Minimal side navigation component for React
https://codesandbox.io/s/react-minimal-side-navigation-example-y299d?file=/src/components/NavSidebar.jsx
MIT License
67 stars 29 forks source link

Allow to keep items expanded #12

Closed KnisterPeter closed 3 years ago

KnisterPeter commented 3 years ago

It would be nice to have certain elements always expanded. Currently it is only possible to have one item expanded.

@abhijithvijayan Are you up for a contribution?

abhijithvijayan commented 3 years ago

@KnisterPeter I will consider this.

Will add something like a callback that gets called on the nav item render to test if the item is currently selected. If returns true, the item will be rendered as an active.

abhijithvijayan commented 3 years ago

@KnisterPeter this callback might override the auto expansion & auto closing of active tabs.

This way one has to manually control the functions

abhijithvijayan commented 3 years ago

My initial implementation is on the branch https://github.com/abhijithvijayan/react-minimal-side-navigation/tree/active-predicate

example

activePredicate={({itemId}) => {
  if (itemId === '/home' || itemId === '/about') {
      return true
  }

  return false;
}}

i haven't thought through the inconsistencies this might bring

@KnisterPeter feel free to work on this as well if you can

KnisterPeter commented 3 years ago

@abhijithvijayan I've implemented a nav tree on my own, since I was in need of more levels of navigation.

abhijithvijayan commented 3 years ago

@KnisterPeter can you add the solution here.

This library is also in need of a secondary level of navigation

Thanks.