TreeView -> NavList (#41359)

Co-authored-by: Peter Bengtsson <mail@peterbe.com>
Co-authored-by: Peter Bengtsson <peterbe@github.com>

Author: gracepark

components/sidebar/ProductCollapsibleSection.tsx

@@ -1,4 +1,5 @@
 import cx from 'classnames'
+import { useRouter } from 'next/router'
 
 import { useMainContext } from 'components/context/MainContext'
 import { SidebarProduct } from 'src/landings/components/SidebarProduct'
@@ -12,6 +13,7 @@ type Props = {
 
 export const SidebarNav = ({ variant = 'full' }: Props) => {
   const { currentProduct } = useMainContext()
+  const router = useRouter()
   const isRestPage = currentProduct && currentProduct.id === 'rest'
   // we need to roughly account for the site header height plus the height of
   // the side nav header (which is taller when we show the API version picker)
@@ -51,7 +53,7 @@ export const SidebarNav = ({ variant = 'full' }: Props) => {
           )}
           style={{ width: 326, height: 'calc(100vh - 175px)', paddingBottom: sidebarPaddingBottom }}
         >
-          <SidebarProduct />
+          <SidebarProduct key={router.asPath} />
         </div>
       </nav>
     </div>

components/sidebar/SidebarNav.tsx

@@ -62,7 +62,7 @@
     "@primer/css": "^21.0.7",
     "@primer/octicons": "^19.5.0",
     "@primer/octicons-react": "^19.5.0",
-    "@primer/react": "35.28.0",
+    "@primer/react": "35.29.0",
     "accept-language-parser": "^1.5.0",
     "ajv": "^8.11.0",
     "ajv-errors": "^3.0.0",