Fixed broken active link in developer docs navbar [Fixes #10813]

[0x0OZ]

Description

There was an issue checking isHrefActive in Link.tsx because of the unremoved hashtags from the URL.

I don't know if that's the best way to deal with it or if this fix breaks assumptions on other components that assume hashtags remain in that check.

I am not really a good developer, so it will be great if someone double checks (patch source)

Related Issue

Fixes #10813

[netlify]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	712d3b1
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/668911e4e1b79f0008ecb490
😎 Deploy Preview	https://deploy-preview-13331--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 47 (🔴 down 4 from production) Accessibility: 92 (no change from production) Best Practices: 91 (🔴 down 1 from production) SEO: 93 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[wackerow]

Thanks @0x0OZ! Appreciate you dropping this.

Taking a look here, I think we should probably patch the isHrefActive function instead, to do this same logic.

My thought here is, that function should answer "is this href active?", which should always be ignoring the hash links (anything after a #) or any query/search params (anything after a ?). We shouldn't have to pre-sanitize our pathname when passing to this function in my opinion.

const cleanAsPath = asPath.replace(/#.*/, "");

If you look inside src/lib/utils/url.ts (where you're importing isHrefActive, you'll see another helper function called cleanPath:

// remove any query params or hashes from the path
export const cleanPath = (path: string): string => path.replace(/[$#].+$/, "")

This is very similar to the logic you added, but will also remove any query/search params as well. Let's use this instead.

I would recommend the following:

0. Revert these changes to Link.tsx
1. Update the isHrefActive function inside url.ts: Instead of pathname === href, let's wrap pathname with cleanPath, ie: cleanPath(pathname) === href
2. We're using cleanPath inside isHrefActive so let's move the cleanPath function above the other so we're not using functions before they're declared. This isn't strictly necessary due to JS hoisting but is good practice.
3. Make sure we run the linter on this to keep it tidy: yarn prettier --write src/lib/utils/url.ts
4. Run yarn dev and test it out in the browser to make sure this is working as expected

Hope that helps!

[0x0OZ]

I think this looks good

[github-actions]

This issue is stale because it has been open 30 days with no activity.

[wackerow]

🎉 Beautiful! Sorry for delay, looks great @0x0OZ! Bringing in