Enable standard header also in the documentation portal

[fpetru]

Linked to: #970
It is a first try, repurposing the header, and use the standard menu.

[fpetru]

Hi @MichaIng and @StephanStS, would this kind of idea work? We could work on CSS to change maybe the fonts. Please share your feedback, considering this as a starting idea.

[StephanStS]

Very nice.

I do not dare to ask for the DietPi logo on the left side ...

-> https://github.com/MichaIng/DietPi-Website/blob/master/images/dietpi-logo_240x80.png

[MichaIng]

Would be actually great to align the style with the main website. Here is the CSS: https://github.com/MichaIng/DietPi-Website/blob/master/css/style.css#L103-L117

The DOCS link could have the "active" class or the border color given inline, so it is always green, indicating where we are, like on the contribution page: https://dietpi.com/contribute.html

[fpetru]

thanks @MichaIng and @StephanStS - great inputs. I will review and update the PR, making a new proposal for review.

[StephanStS]

@fpetru: Let's change to HOME, DOCS and finish the PR.

[MichaIng]

Okay, the navigation bar should now work and behave exactly like the one on our home page:

For now, on mobile phones, the buttons like be shown in multiple lines:

I think it is okay like that, as long as no one finds time to implement a hamburger menu. And a hamburger menu might contradict the idea to make site navigation more prominent + may look weird as there is already one on the left side for the MkDocs navigation.

We could tweak it a way that the buttons are made smaller on screen below a certain width, or we could even hide some buttons there.

Btw, the reason to have DOCS there as well, was that it gives you an impression where you currently are among our sites:

But this worsens the situation on mobile phones, hence I think it is not worth it.