Navigation bar needs to be consistent on all pages (except the homepage)

[mdenby]

The navigation bar should have the same look and behavior throughout the site

[k8vance88]

See #1040 as a similar issue.

[mdenby]

So I've made two options--one white and one the same color gradient on the homepage. The tablet and mobile--the color would just change. For the hover issue in #1040 I'm okay with having the header pop down as the user scrolls back to the top of the page.

[mbroz2]

@mdenby if I'm reading between the lines correctly, this issue is for applying our existing header to /docs and /guides pages? I expect the contents of the header to also be the same throughout the site and not just look and behavior; as such, what are the header items and in what order?

[mdenby]

@mbroz2 This issue is for the styling of the header--not the navigation. I opened another issue for that because I'm trying to break it into small pieces. The header should be the same color on all of the pages (except the homepage). Next step is the navigation--but that seemed like a bigger thing with the Docs pages.

[mdenby]

@NottyCode @mbroz2 @lauracowen I've updated the navigation and reorganized the order of the items too. I think this should be the navigation on all pages and remove the Docs as a microsite.

For now when the user navigates to Guides it should go here: https://openliberty.io/guides/ When they navigate to Docs it should go to the current docs landing page (https://openliberty.io/docs/)

In the future, the docs landing should be replaced by the new docs page. When that happens I'd also like to remove the breadcrumbs because they will be unnecessary then.

What do you think?

[mbroz2]

I have a small preference to have Guides before Docs as it seems like a more natural order: Acquire (whether through 'get started' or 'guides'), try/learn (guide), get further information on a topic (docs), then get questions answered, whether prod or dev (Support), and finally stay up to date with updates/news (blog).

I could even see Guides move to the first spot in the header, however, I prefer this order as it seems more logical and 'get started' now has links to guides and will improve the getting started experience even further with #1424

[lauracowen]

What @mbroz2 says makes sense about the ordering I think (switch around Guides and Docs).

[mdenby]

@mbroz2 That makes sense to me too.

[steven1046]

I agree with removing the breadcrumb. Guides aren't really under docs in the website navigation either once we release Antora. The /docs page will be replaced with just the overall Antora landing page and the guides won't be under Docs anymore so it doesn't make sense to have the breadcrumb that says docs->guides->guide name. Also we never had docs in the guide's url like we had for other docs.

[steven1046]

@mdenby can we remove the design needed label as it seems like we can replace the header for docs and guides with the white one that the whole site uses. What color should we use for the guides if we replace the header for guides with the same links that the rest of the site uses? When we release antora for docs, we won't need the doc header really since this design: https://ibm.invisionapp.com/share/9TNYQQRJ7A2#/screens/319036170 removes the doc header for docs and just uses the overall site header.

[mbroz2]

Given the current design and the redesign of /guides, I'm not sure the white header will look correct (concerned the white header next to the dark blue background will be jarring). As such, I think we might need to use the blue header for /guides, or tweak the top portion of the /guides redesign (#1126).

[mdenby]

I agree with @mbroz2 to keep the darker header for the pages.

[mbroz2]

When we update the header to have both guides & docs (siblings), remove the breadcrumb from guides.

[ellenwyllie]

@mdenby I'm a little confused about the colors for the updated nav bar. Is the plan to have it be white on all pages except for the home page and /guides? What about the Get Started page which currently has a transparent background? This doesn't really seem to be addressing the concern that the nav bar isn't consistent

[mdenby]

The idea was for it to be purple everywhere. Plus, update the navigation.

[mbroz2]

Just to go on the record, I don't mind if the background (and text color) for the navigation are different for different pages, as long as all other aspects of the styling, behavior, and content remain the same.
In other words, I have no issues with /downloads, /support, and /blogs maintain their current color scheme of blending into the background (at least the first two) as long everything else remains consistent with the other header style, behavior, and content.

[ellenwyllie]

I began implementing this issue with the dark blue navigation across the whole site. However, Melissa and I felt that the dark blue didn't work well with some of the pages. We decided that it would be better to go ahead with the transparent nav bar across the site. The links, behavior and most of the styling will be the same everywhere. The only thing that will change is the background color and the link color.

With the additional links in the nav bar, the Getting Started page had some issues. The links would run into the dark blue section making them difficult to read:

We decided to get rid of the green beam and just have a dark blue header similiar to what a lot of the other pages have:

[ellenwyllie]

At certain screen widths in the guides, the breadcrumb contains a hamburger button that opens the table of contents. So we need a new design that has the hamburger button somewhere other than in the breadcrumb (since we are removing it)

[ellenwyllie]

We could do something similar to what the desktop view does after you click the x button to collapse the toc, but we need to make sure it's obvious how to open the toc:

[mdenby]

I mocked up a little prototype showing the "animation" that we'd like the arrow to do. What's everyone think? https://ibm.invisionapp.com/share/CVO003DZT2F

[mbroz2]

Just to make sure I'm following along correctly.... we like the idea of reusing the ToC behavior from full width and applying it this intermediate width (doing away with the breadcrumb ToC button) and we're just trying to figure out how to integrate it such that the interaction is clear to the user? And if so, the proposal for that is to have the arrow animate a bounce upon resizing to (or first load of) the intermediate width? And unlike in the first screenshot the ToC slides out like in full width, but it would actually overlay the instruction pane instead?

If yes to all those, then I think that should work well (and provides a better consistency then what we have today regarding the ToC's position & behavior)

[ellenwyllie]

@mbroz2 Yes, I think that is all accurate.

[ellenwyllie]

Steven pointed out that removing the breadcrumb means that users have no way to change between versions on javadocs since the version picker is inside the breadcrumb. We need to add back the version picker somewhere. @mdenby

Current nav bar with breadcrumb:

New nav bar without breadcrumb:

[mdenby]

Could we not put the version switcher that we're using for the other pages here?