[Docs Site] Determine "active" links with asPath instead of pathname

[ericclemmons]

Hi! 👋

When working on the Amplify UI docs, my pages are powered by [[...slugs]].tsx. pathname returns this value, so none of SecondaryNav is active.

Using asPath correctly returned /ui/... strings, making active finally return true as expected.

Here is the diff that solved my problem:

diff --git a/node_modules/amplify-docs/src/components/SecondaryNav/index.tsx b/node_modules/amplify-docs/src/components/SecondaryNav/index.tsx
index 5a13939..34f4c54 100644
--- a/node_modules/amplify-docs/src/components/SecondaryNav/index.tsx
+++ b/node_modules/amplify-docs/src/components/SecondaryNav/index.tsx
@@ -16,7 +16,7 @@ import {Container} from "../Container";
 
 export default function SecondaryNav({platform, pageHasMenu}) {
   const router = useRouter();
-  const path = router.pathname;
+  const path = router.asPath;
 
   return (
     <SecondaryNavStyle id="secondary-nav">

This issue body was partially generated by patch-package.

[jakeburden]

Thanks @ericclemmons! Yes I agree with using asPath here. I'll make a PR to merge this change next week.

[mauerbac]

Do we still want to do this @jakeburden ?

[nearestnabors]

Looks like this is fixed!