MVP implementation of meganav navigation between documentation subprojects

[stichbury]

Description

This is an implementation ticket to accompany the (hopefully minimal) design effort needed for #3017 to create a navigation between Kedro framework docs, datasets docs and viz docs (no need for the navigation option for deployment right now). This is part of the subproject effort in the parent ticket #2600 which improves the process of building/releasing docs and brings them closer to their packages.

I've created it as part of the Framework repo and associated "Documentation subprojects" milestone but it's in the Viz project as it requires front-end engineering.

Will leave @tynandebold to size and @NeroOkwa to prioritise and determine when it can start.

[stichbury]

cc @astrojuanlu @stephkaiser for visibility.

[vladimir-mck]

I successfully implemented the desktop layout as outlined here with minimal adjustments.

It required new CSS for the header and some to hide the logo and search bar in the sidebar. Additionally, the header required the new HTML. This new HTML should be added within the {%- block extrabody %} section of the layout.html file.

Regarding the documentation for Viz and Framework being split and linked through the navigation, it implies the need for shared HTML and CSS for that section of code. How should we proceed with sharing the header HTML and CSS?

As for mobile navigation, by default it is handled in the sidebar and adding new code in the sidebar is not possible within the current theme without completely overwriting the layout.html file. It is possible to add the 3 main links in the sidebar with javascript. How should I address this?

@astrojuanlu @stichbury @tynandebold

[astrojuanlu]

Thanks a lot @vladimir-mck , this looks pristine! (Honestly cannot believe my strawman proposal is seeing the light of day 😄)

There was a plan about sharing the CSS in #3016, however I'm not sure if the proposal there is good enough to share the HTML blocks in the templates as well. If it isn't, we could go back to the idea of creating a custom Sphinx theme.

[stichbury]

This looks great, thank you! 🌟

I'd prefer to defer the queries on sharing HTML and mobile navigation to @tynandebold

I think it would make sense for @stephkaiser to take a look at this point. Do you have a preview deploy from a PR that she could review please, @vladimir-mck ? There is an understanding that this is an interim solution as we have plans for the docs beyond this change, but clearly if there's any small tweak needed for design, now's the time to raise it.

Edit: Addressed by this PR, which has a preview link

[tynandebold]

I don't think we can share HTML in the same way we can share CSS, so for now and to unlock this work, my recommendation would be we copy the necessary HTML we need in the three projects and share the CSS from the centralized place.

For mobile navigation, let's add the three main links to the top of the sidebar on mobile-sized screens and hide them with CSS on desktop.

[stichbury]

Now using that shareable CSS here for the Framework (draft PR) and in the draft Viz docs.

[stichbury]

This is now complete