fix: Sidenav selection

Tabs in sidenav were not being synced with history. Now if tab selected,
history is updated. If page is reloaded, tabs are synced to current
history. If link is clicked that updates sidenav panel, panel is updated
accordingly.

packages/api-explorer/src/components/SideNav/SideNav.spec.tsx

@@ -83,7 +83,8 @@ describe('SideNav', () => {
         specs={specs}
         spec={specState.spec}
         specDispatch={specDispatch}
-      />
+      />,
+      ['/3.1/methods']
     )
     expect(screen.getAllByText(allTagsPattern)).toHaveLength(2)
     expect(

packages/api-explorer/src/components/SideNav/SideNav.tsx

@@ -26,6 +26,7 @@
 
 import type { FC, Dispatch } from 'react'
 import React, { useContext, useEffect, useState } from 'react'
+import { useHistory } from 'react-router'
 import {
   Heading,
   TabList,
@@ -84,7 +85,15 @@ export const SideNav: FC<SideNavProps> = ({
   if (match && match.params.sideNavTab) {
     defaultIndex = tabNames.indexOf(match.params.sideNavTab)
   }
-  const tabs = useTabs({ defaultIndex })
+  const history = useHistory()
+  const onTabChange = (index: number) => {
+    const pathParts = history.location.pathname.split('/')
+    if (pathParts[2] !== tabNames[index]) {
+      pathParts[2] = tabNames[index]
+      history.push(pathParts.join('/'))
+    }
+  }
+  const tabs = useTabs({ defaultIndex, onChange: onTabChange })
   const { searchSettings, setSearchSettings } = useContext(SearchContext)
   const [pattern, setSearchPattern] = useState(searchSettings.pattern)
   const debouncedPattern = useDebounce(pattern, 250)
@@ -120,6 +129,13 @@ export const SideNav: FC<SideNavProps> = ({
     setSearchSettings(setPattern(debouncedPattern!))
   }, [debouncedPattern, specKey, spec])
 
+  useEffect(() => {
+    const { selectedIndex, onSelectTab } = tabs
+    if (defaultIndex !== selectedIndex) {
+      onSelectTab(defaultIndex)
+    }
+  }, [defaultIndex, tabs])
+
   const size = useWindowSize()
   const headlessOffset = headless ? 200 : 120
   const menuH = size.height - 16 * HEADER_REM - headlessOffset