From a2672af26ed495a45d60c71fba6f93f88958edb6 Mon Sep 17 00:00:00 2001
From: anuradha9712 <anuradha.mcs18.du@gmail.com>
Date: Tue, 25 Jun 2024 12:53:52 +0530
Subject: [PATCH] fix(docs): auto highlight leftnav items on page navigation

---
 docs/src/components/LeftNav/LeftNav.js | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/docs/src/components/LeftNav/LeftNav.js b/docs/src/components/LeftNav/LeftNav.js
index daa4913927..de95f75704 100644
--- a/docs/src/components/LeftNav/LeftNav.js
+++ b/docs/src/components/LeftNav/LeftNav.js
@@ -10,6 +10,8 @@ const isBrowser = typeof window !== 'undefined';
 const LeftNav = (props) => {
   const { relativePagePath, showMobile, frontmatter } = props;
   const navItemsList = useNavItems(relativePagePath);
+  const pathName = window.location.pathname;
+
   const navItems = navItemsList.filter((item) => {
     if (relativePagePath.includes(MOBILE)) {
       return !item.hideInMobile;
@@ -52,7 +54,7 @@ const LeftNav = (props) => {
 
     ele.addEventListener('scroll', setPosition(ele.scrollTop));
     return () => ele.removeEventListener('scroll', setPosition(ele.scrollTop));
-  }, []);
+  }, [pathName]);
 
   const onClickHandler = (menu) => {
     navigate(menu.link);
@@ -82,9 +84,12 @@ const LeftNav = (props) => {
     }
     return componentName.toUpperCase();
   };
-
   return (
-    <div data-test="Docs-Leftnav" id="navbar-container" className="h-100 bg-secondary-lightest border-right page-scroll">
+    <div
+      data-test="Docs-Leftnav"
+      id="navbar-container"
+      className="h-100 bg-secondary-lightest border-right page-scroll"
+    >
       {showMenuButtons && (
         <div className="d-flex pt-6 pl-6">
           <Tile
@@ -108,7 +113,14 @@ const LeftNav = (props) => {
       <Subheading className="pl-6 pt-6 pb-3" appearance="subtle">
         {getHeading()}
       </Subheading>
-      <VerticalNav data-test="Docs-VerticalNav--Items" menus={navItems} active={active} onClick={onClickHandler} expanded={true} autoCollapse={false} />
+      <VerticalNav
+        data-test="Docs-VerticalNav--Items"
+        menus={navItems}
+        active={active}
+        onClick={onClickHandler}
+        expanded={true}
+        autoCollapse={false}
+      />
     </div>
   );
 };