react-sidenav

react-sidenav copied to clipboard

Hi, is it possible to show the sub nav item based on the path? If i got to URL/x, the 'x' nav item is highlighted, but if i go to URL/x/y then i can't see the 'y' sub nav item, because 'x' is not unfolded. Thank you

@tudro this is a confirmed bug. will get this fixed

Thank you. I must have skipped it when i looked through the issues.

Any news on this?

Here goes a patch-package for that.

diff --git a/node_modules/react-sidenav/NavGroup.js b/node_modules/react-sidenav/NavGroup.js
index 40b9620..9e6530f 100644
--- a/node_modules/react-sidenav/NavGroup.js
+++ b/node_modules/react-sidenav/NavGroup.js
@@ -95,9 +95,18 @@ var ToggleIndicator = function (props) {
     return (React.createElement("div", { style: __assign({}, ToggleIndicatorStyle, { transform: transform }) },
         React.createElement(ChildrenIndicatorIcon, null)));
 };
+
+var useChildSelected = () => {
+    var selectedPath = React.useContext(_1.SideNavContext).selectedPath;
+    var pathId = React.useContext(_1.NavContext).pathId;
+
+    return selectedPath !== pathId && selectedPath.indexOf(pathId) === 0
+}
+
 exports.NavGroup = function (props) {
     var children = props.children, onClick = props.onClick, others = __rest(props, ["children", "onClick"]);
-    var _a = React.useState(NavGroupState.collapsed), state = _a[0], setState = _a[1];
+    var childSelected = useChildSelected()
+    var _a = React.useState(childSelected ? NavGroupState.expanded : NavGroupState.collapsed), state = _a[0], setState = _a[1];
     var rootRef = React.useRef(null);
     var onHandleClick = function (e) {
         if (e) {