fix(www): Fix getting active item when pathname does not end with / (#24965)

Author: rzgry

www/src/components/sidebar/__tests__/sidebar.js

@@ -83,6 +83,11 @@ describe(`sidebar`, () => {
       const { queryByText } = renderSidebar(`/characters/jay-gatsby/`)
       expect(queryByText(`Jay Gatsby`)).toBeInTheDocument()
     })
+
+    it(`opens sections with active items when the pathname is missing a trailing slash`, () => {
+      const { queryByText } = renderSidebar(`/characters/jay-gatsby`)
+      expect(queryByText(`Jay Gatsby`)).toBeInTheDocument()
+    })
   })
 
   describe(`toggle section`, () => {
@@ -127,6 +132,11 @@ describe(`sidebar`, () => {
       expect(scrollIntoViewMock).toHaveBeenCalled()
     })
 
+    it(`scrolls the sidebar into view on load when the pathname is missing a trailing slash`, () => {
+      renderSidebar(`/characters/jay-gatsby`)
+      expect(scrollIntoViewMock).toHaveBeenCalled()
+    })
+
     it(`does not scroll into view when loaded with a hash`, () => {
       renderSidebar(`/themes/`, {
         activeItemHash: `the-american-dream`,

www/src/utils/sidebar/get-active-item.js

@@ -1,7 +1,12 @@
 import { getLocaleAndBasePath } from "../i18n"
 
+function addTrailingSlashIfMissing(pathname) {
+  return pathname.endsWith(`/`) ? pathname : `${pathname}/`
+}
+
 const isItemActive = (location, item, activeItemHash) => {
-  const { basePath } = getLocaleAndBasePath(location.pathname)
+  const pathnameWithTrailingSlash = addTrailingSlashIfMissing(location.pathname)
+  const { basePath } = getLocaleAndBasePath(pathnameWithTrailingSlash)
   const linkMatchesPathname = item.link === basePath
   const linkWithoutHashMatchesPathname =
     item.link.replace(/#.*/, ``) === basePath