Sidebar refactor: scope css + more (github#20837)

* refactor sidebar, scope css, wire up nav events to link component, update tests

* remove link onClick analytics event

* fix: missing key on breadcrumbs

components/Breadcrumbs.tsx

@@ -51,7 +51,11 @@ export const Breadcrumbs = ({ variant = 'default' }: Props) => {
               {breadcrumb.title}
             </Link>
           ),
-          i !== arr.length - 1 ? <span className="color-text-tertiary">/</span> : null,
+          i !== arr.length - 1 ? (
+            <span className="color-text-tertiary" key={`${i}-slash`}>
+              /
+            </span>
+          ) : null,
         ]
       })}
     </nav>

components/DefaultLayout.tsx

@@ -1,6 +1,6 @@
 import Head from 'next/head'
 
-import { SidebarNav } from 'components/SidebarNav'
+import { SidebarNav } from 'components/sidebar/SidebarNav'
 import { Header } from 'components/page-header/Header'
 import { SmallFooter } from 'components/page-footer/SmallFooter'
 import { ScrollButton } from 'components/ScrollButton'

components/lib/events.ts

@@ -207,38 +207,11 @@ function initExitEvent() {
   document.addEventListener('visibilitychange', sendExit)
 }
 
-function initNavigateEvent() {
-  if (!document.querySelector('.sidebar-products')) return
-
-  Array.from(document.querySelectorAll('.sidebar-products details')).forEach((details) =>
-    details.addEventListener('toggle', (evt) => {
-      const target = evt.target as HTMLDetailsElement
-      sendEvent({
-        type: EventType.navigate,
-        navigate_label: `details ${target.open ? 'open' : 'close'}: ${
-          target?.querySelector('summary')?.innerText
-        }`,
-      })
-    })
-  )
-
-  document.querySelector('.sidebar-products')?.addEventListener('click', (evt) => {
-    const target = evt.target as HTMLElement
-    const link = target.closest('a') as HTMLAnchorElement
-    if (!link) return
-    sendEvent({
-      type: EventType.navigate,
-      navigate_label: `link: ${link.href}`,
-    })
-  })
-}
-
 export default function initializeEvents() {
   initPageEvent() // must come first
   initExitEvent()
   initLinkEvent()
   initClipboardEvent()
-  initNavigateEvent()
   // print event in ./print.js
   // survey event in ./survey.js
   // experiment event in ./experiment.js

components/sidebar/SidebarHomepage.tsx

@@ -0,0 +1,53 @@
+import { useRouter } from 'next/router'
+import { LinkExternalIcon } from '@primer/octicons-react'
+
+import { useVersion } from 'components/hooks/useVersion'
+import { useMainContext } from 'components/context/MainContext'
+import { Link } from 'components/Link'
+
+import { AllProductsLink } from './AllProductsLink'
+
+export const SidebarHomepage = () => {
+  const router = useRouter()
+  const { currentVersion } = useVersion()
+  const { activeProducts, isFPT } = useMainContext()
+
+  return (
+    <ul data-testid="sidebar" className="mt-4">
+      {!isFPT && <AllProductsLink />}
+
+      {activeProducts.map((product) => {
+        if (!isFPT && !product.versions?.includes(currentVersion) && !product.external) {
+          return null
+        }
+
+        const href = `${!product.external ? `/${router.locale}` : ''}${
+          product.versions?.includes(currentVersion) && !isFPT
+            ? `/${currentVersion}/${product.id}`
+            : product.href
+        }`
+
+        return (
+          <li
+            key={product.id}
+            title={`${product.name}${product.external ? '(External Site)' : ''}`}
+            className="my-3"
+          >
+            <Link
+              href={href}
+              target={product.external ? '_blank' : undefined}
+              className="f4 pl-4 pr-5 py-2 color-text-primary no-underline"
+            >
+              {product.name}
+              {product.external && (
+                <span className="ml-1">
+                  <LinkExternalIcon size="small" />
+                </span>
+              )}
+            </Link>
+          </li>
+        )
+      })}
+    </ul>
+  )
+}

components/sidebar/SidebarNav.tsx

@@ -0,0 +1,46 @@
+import { useRouter } from 'next/router'
+import { MarkGithubIcon } from '@primer/octicons-react'
+
+import { Link } from 'components/Link'
+import { useTranslation } from 'components/hooks/useTranslation'
+import { useMainContext } from 'components/context/MainContext'
+import { SidebarProduct } from './SidebarProduct'
+import { SidebarHomepage } from './SidebarHomepage'
+
+export const SidebarNav = () => {
+  const router = useRouter()
+  const { error, relativePath } = useMainContext()
+  const { t } = useTranslation('header')
+
+  return (
+    <div
+      className="d-none d-lg-block color-bg-tertiary position-sticky top-0 overflow-y-auto flex-shrink-0 pb-5"
+      style={{ width: 286, height: '100vh' }}
+    >
+      <div
+        className="d-flex flex-items-center p-4 position-sticky top-0 color-bg-tertiary"
+        style={{ zIndex: 3 }}
+        id="github-logo"
+        role="banner"
+      >
+        <Link
+          href={`/${router.locale}`}
+          className="color-text-primary"
+          aria-hidden="true"
+          tabIndex={-1}
+        >
+          <MarkGithubIcon size={32} />
+        </Link>
+        <Link
+          href={`/${router.locale}`}
+          className="h4-mktg color-text-primary no-underline no-wrap pl-2 flex-auto"
+        >
+          {t('github_docs')}
+        </Link>
+      </div>
+      <nav>
+        {error === '404' || relativePath === 'index.md' ? <SidebarHomepage /> : <SidebarProduct />}
+      </nav>
+    </div>
+  )
+}

components/sidebar/SidebarProduct.module.scss

@@ -0,0 +1,13 @@
+.sidebarArticle::before {
+  content: "";
+  position: absolute;
+  left: 26px;
+  height: 100%;
+  border-left: 1px solid var(--color-text-primary);
+  width: 1px;
+  top: 0;
+}
+
+.sidebarArticleActive::before {
+  border-left-width: 2px;
+}