Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unfold top level nav based on path #39

Open
tudro opened this issue May 10, 2018 · 4 comments
Open

Unfold top level nav based on path #39

tudro opened this issue May 10, 2018 · 4 comments
Labels

Comments

@tudro
Copy link

tudro commented May 10, 2018

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

@wmira
Copy link
Owner

wmira commented May 10, 2018

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

@wmira wmira added the bug label May 10, 2018
@tudro
Copy link
Author

tudro commented May 10, 2018

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

@lucasconstantino
Copy link
Contributor

Any news on this?

@lucasconstantino
Copy link
Contributor

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) {

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants