Update header navigation

[gtsiolis]

This will update the top navigation for www.gitpod.io and docs.gitpod.io.

1. Surface the hidden links Docs, Blog, Community from the previously Resources menu item.
2. Rename Self-hosted to Install.

BEFORE	AFTER

[gtsiolis]

WDYT @JohannesLandgraf? /cc @ChristinFrohne

[svenefftinge]

I'd like to have a pointer to our GitHub repo included as well and think the menu is too long with a flattened sructure.

[nisarhassan12]

Rename Self-hosted to Install.

Thanks, @gtsiolis :) Please feel free to ignore this I could be wrong here i.e Maybe its just me who thinks this. I feel that Self-Hosted is maybe more descriptive and clear own it's own as compared to the word Install and is maybe more common as well?

[JohannesLandgraf]

Pointer to GitHub makes a lot of sense. How about a logo with a non-invasive GitHub Stars Indicator (when you click on it you star our repo)?

I am with @gtsiolis and don't find the flattened structure too long (see GitLab, Gatsby, Buildkite etc.). We want to make it as easy as possible for people to get to sections that matter for an open source company. Hiding Community and Documentation under Resources without any visual representation telling me that I can toggle it makes it too difficult to go to e.g. community when I am not actively searching for it.

I also like Install better than Self-Hosted.

[gtsiolis]

Hey everyone! Agree with what @JohannesLandgraf said in https://github.com/gitpod-io/website/pull/862#issuecomment-739851304. FWIW, I'm also constantly looking for the blog link on the header navigation.

In the future, once we have more content, we could introduce expanded dropdown menus to group relevant items.

... have a pointer to our GitHub repo

@svenefftinge I agree, a link to the repository will also make more sense in the long run for making it more visible that this is an open source project, and more.

... I feel that ...

@nisarhassan12 I've seen both approaches delivered equally successfully. There's no right or wrong approach here. Happy to go with any of the options.

Plan A

We could have an extra item for the GitHub repository but not sure if the current design (font family, spacing, etc) helps.

The design proposal also changes the top right action to a primary action button which would allow adding the secondary button for GitHub with no hierarchy conflict, see https://github.com/gitpod-io/website/issues/876 for more context.

Option A	Option B

Plan B

Alternatively, we could introduce a secondary button on the body to link to the repository as described in https://github.com/gitpod-io/website/issues/876, which I would strongly recommend regardless if we use this secondary button for linking to the repository.

To demonstrate this in action, here's how this could look like.

We could also skip the GitHub icon or rephrase the button label to View on GitHub.

BEFORE	AFTER

---

WDYT @nisarhassan12 @JohannesLandgraf @svenefftinge?

[JohannesLandgraf]

I'd go for Plan A / Option B - looks neat @gtsiolis 💅. Especially as long we don't have a smooth in-product onboarding we should make it as simple as possible for users new to Gitpod to access our documentation/community helping them to get started and understand the underlying concepts behind what we are doing.

[gtsiolis]

I'd go for Plan A / Option B ...

@JohannesLandgraf for all the other options I could make the changes myself. For this one, not sure how to grab the stars from GitHub API using our current set up with Gatsby. Maybe @nisarhassan12 could help out with this or point out a way to do this.

Alternatively, we could start with adding a static link.

[svenefftinge]

Ok, let's change it. I also just realized that we already switch to a burger menu very early. Maybe that is worth reconsidering as well?

[svenefftinge]

Also I think we could merge this PR and work on the GitHub thing afterward.

[JohannesLandgraf]

Good catch with the burger menu @svenefftinge - makes sense to change that

@gtsiolis If there isn't an easy fix for the dynamically created GitHub star reference, let's start with a static link (I think it is important that people immediately realize we are an open-source company once they come to our website). Could you sync directly with @nisarhassan12 about the follow-up PR for the dynamic version?

[gtsiolis]

Ok, let's change it.

🙌

@svenefftinge: I also just realized that we already switch to a burger menu very early. Maybe that is worth reconsidering as well?

@JohannesLandgraf: Good catch with the burger menu ...

Opened follow-up https://github.com/gitpod-io/website/issues/881 for preventing the navigation from collapsing to a burger menu for large viewports.

Also I think we could merge this PR and work on the GitHub thing afterward.

@svenefftinge I could not agree more.

Could you sync directly with @nisarhassan12

@JohannesLandgraf definitely! Opened follow-up https://github.com/gitpod-io/website/issues/882 for this.

[gtsiolis]

Alright, let's merge this! 🎉

[chrifro]

I'm a bit afraid that having two buttons in the navigation bar might be confusing and visually a bit too much. If we have too many highlighted options to click on the user might be confused and doesn't click anywhere.

Alternatively we could use a similar button as we're using on https://theia-ide.org/ or this button.
What do you think?

[gtsiolis]

Thanks @ChristinFrohne! I've added some thoughts in the relevant issue, see https://github.com/gitpod-io/website/issues/882#issuecomment-740610624. 🏀