ENG-6307: Only scroll to a link in the sidebar (#1432)

If the page loads slowly, then the js snippet might find a matching link in the
footer and scroll to the bottom of the page instead of scrolling to expose the
sidebar link.

Author: masenf

pcweb/components/docpage/sidebar/sidebar.py

@@ -19,8 +19,8 @@
 function scrollToActiveSidebarLink() {
   const currentPath = window.location.pathname.replace(/\\/+$|\\/$/g, "") + "/";
 
-  const activeLink = document.querySelector(`a[href="${currentPath}"]`) ||
-                    document.querySelector(`a[href="${currentPath.slice(0, -1)}"]`);
+  const activeLink = document.querySelector(`#sidebar-container a[href="${currentPath}"]`) ||
+                    document.querySelector(`#sidebar-container a[href="${currentPath.slice(0, -1)}"]`);
 
   if (activeLink) {
     activeLink.scrollIntoView({
@@ -656,6 +656,7 @@ def sidebar(url=None, width: str = "100%") -> rx.Component:
             width=width,
         ),
         on_mount=rx.call_script(Scrollable_SideBar),
+        id=rx.Var.create("sidebar-container"),
         class_name="flex justify-end w-full h-full",
     )