fix(sidebar): scroll to the active item after navigating (#4211)

Co-authored-by: Brandy Smith <[email protected]>

Author: brandyscarney

src/theme/DocSidebar/index.tsx

@@ -3,15 +3,28 @@
  *
  * Reason for modifying:
  * - Add a logo to the top of the sidebar
+ * - Scroll to the active item in the sidebar
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useLocation } from '@docusaurus/router';
 import DocSidebar from '@theme-original/DocSidebar';
 import type { Props } from '@theme/DocSidebar';
 
 import Logo from '@theme-original/Logo';
 
 export default function DocSidebarWrapper(props: Props): JSX.Element {
+  const location = useLocation();
+
+  useEffect(() => {
+    setTimeout(() => {
+      const activeItem = document.querySelector('.menu__link--active');
+      if (activeItem && activeItem.scrollIntoView) {
+        activeItem.scrollIntoView({ block: 'center', behavior: 'auto' });
+      }
+    }, 100);
+  }, [location.pathname]);
+
   return (
     <>
       <Logo />