fix(VerticalNavigation): open slider where item is selected (#3389)

* fix(VerticalNavigation): open the vertical navigation in the panel according to the selected item * chore: change loadash import
lumada-design · Jun 1, 2023 · bdae374 · bdae374
1 parent 8183adf
commit bdae374
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 0 deletions.
diff --git a/packages/core/src/components/VerticalNavigation/Navigation/Navigation.tsx b/packages/core/src/components/VerticalNavigation/Navigation/Navigation.tsx
@@ -22,6 +22,7 @@ import { StyledNav } from "./Navigation.styles";
 import { HvVerticalNavigationSlider } from "..";
 import { VerticalNavigationContext } from "../VerticalNavigationContext";
 import { HvVerticalNavigationPopup } from "../NavigationPopup/NavigationPopup";
+import { getParentItemById } from "../NavigationSlider/utils/NavigationSlider.utils";
 
 export type NavigationData<T extends React.ElementType = "a"> =
   ComponentProps<T> &
@@ -179,6 +180,7 @@ export const HvVerticalNavigationTree = ({
     slider,
 
     parentItem,
+    setParentItem,
     withParentData,
     navigateToChildHandler,
 
@@ -284,6 +286,17 @@ export const HvVerticalNavigationTree = ({
     if (setParentData) setParentData(data);
   }, [data]);
 
+  useEffect(() => {
+    if (
+      withParentData &&
+      selected &&
+      setParentItem &&
+      getParentItemById(withParentData, selected)
+    ) {
+      setParentItem(getParentItemById(withParentData, selected));
+    }
+  }, [withParentData]);
+
   // navigation slider
   const navigateToTargetHandler = (event, selectedItem) => {
     handleChange(event, selectedItem.id, selectedItem);

diff --git a/packages/core/src/components/VerticalNavigation/VerticalNavigation.tsx b/packages/core/src/components/VerticalNavigation/VerticalNavigation.tsx
@@ -133,6 +133,7 @@ export const HvVerticalNavigation = ({
       setHeaderTitle,
 
       parentItem,
+      setParentItem,
       withParentData,
       navigateToChildHandler,
       navigateToParentHandler,
@@ -150,6 +151,7 @@ export const HvVerticalNavigation = ({
       headerTitle,
       setHeaderTitle,
       parentItem,
+      setParentItem,
       withParentData,
       navigateToChildHandler,
       navigateToParentHandler,

diff --git a/packages/core/src/components/VerticalNavigation/VerticalNavigationContext.tsx b/packages/core/src/components/VerticalNavigation/VerticalNavigationContext.tsx
@@ -9,6 +9,7 @@ interface VerticalNavigationContextValue {
   setHeaderTitle?: React.Dispatch<React.SetStateAction<string | undefined>>;
 
   parentItem?;
+  setParentItem?: React.Dispatch<React.SetStateAction<any>>;
   withParentData?;
   navigateToChildHandler?: (event, item) => void;
   navigateToParentHandler?: () => void;