Doc Site: Highlight nav for Docs/Products pages

[samrichca]

Add nav highlighting when for pages under /products/ and /documentation/

No nav highlighting on /products/song/:

Nav highlighting on About page:

[samrichca]

the current nav probably has an "activePage === pageSlug" check. it needs a partial match instead, so products & song will be highlighted when you're on /products/song/.

[samrichca]

overture-stack/website#89

note: for now test this with the products section. the documentation section is ALL highlighted right now because the links all go to /documentation

https://5f9ad26fe68f89008f2cfb88--overture.netlify.app/products/maestro

[b-f-chan]

Testing to be done in Sprint 9

[kcullion]

@samrichca @b-f-chan I just noticed something strange for that netlify link. When I go to a project page, the Products item is active. But when I refresh that page, the active state is removed. This happens to the whole menubar:like if I'm on case studies and refresh the page, the active state disappears. Is that an easy fix?

oh..looks like it's happening on overture.bio too

[samrichca]

@kcullion good catch!! it looks like we need to handle all link highlighting the old fashioned way (i.e. checking the URL). Gatsby has functionality for it, but it's not persistent between page refreshes, because it relies on state.

I'll amend this PR with the fix

[samrichca]

OK, i was half right. 😇

• active links are persisted - if you use trailing slashes. i added slashes where they were missing.
• added a different check for megamenu links, so if someone is on /documentation/song/introduction/, then the /documentation/ and /documentation/song/ links are highlighted.

https://5fa029e333f5354ba03b0a87--overture.netlify.app/products/maestro/

[kcullion]

Thanks for looking into that @samrichca. I still see the active state disappearing from the products/docs sections when I refresh. Not the biggest deal if it's hard to fix.

[samrichca]

@kcullion it's small but it turns out... it's big! this is a known issue with gatsby that i'll need to work around going forward.

it uses server side rendering in production, but not in development. so things will work on my local machine, they'll work sometimes in production, but they'll fail sometimes too.

contents will update, but attributes (style, classes) won't. they're working on it though.

good catch! i'm glad i'm finding this out BEFORE i do the sidebars.

example: these should be different colours.

[kcullion]

@samrichca oh great, thanks for looking into it. It's weird, this has always been an issue on sites I've worked on in the past. Maybe it's a difficult thing to do in general.

[samrichca]

highlighting nav is a bit tricky because you have to cover all potential use cases. i'll have to revisit nav highlighting when we add documentation subpages because right now i don't know exactly what the URLs will look like.

in our current case, it's not updating my CSS... if that would work we'd be golden! there's workarounds though.

[samrichca]

@kcullion ok i have vanquished the CSS updating issue. there's gonna be a flash of "not highlighted" style when you refresh, but then it should highlight. this is the best workaround until the issue is fixed in gatsby itself.

https://5fa06b94e1f28418c407ab61--overture.netlify.app/products/maestro/

cc @b-f-chan

[kcullion]

@samrichca that's perfect, thanks so much!

[b-f-chan]

Tested at latest netlify link above:

• Products navigation now correctly highlights the section you are viewing
• When refreshing page, "Products" and the specific page you are viewing stay highlighted in the nav (doesn't disappear)
• Documentation navigation highlights everything as mentioned, because they all link to /documentation currently (don't have individual pages yet)
• Above successful results also occur on mobile version

Ready to complete & close