Readd secondary nav bar

[philippjfr]

In the original bokeh and HoloViews theme, there was a secondary nav bar:

This seems to have been removed in this repository, which leads to a rather sterile look:

In my opinion this secondary nav bar adds quite a lot aesthetically and gives each website a distinct feel as long as you add some custom CSS to color it. IMO the top-level nav bar can be reserved for external links, e.g. to GitHub, twitter etc., while the secondary nav bar would be for internal links. What I would be in favor of is dropping the links in the footer.

[ceball]

I'm going to stay out of design decisions (except to just sneak in at the start: I think holoviews.org has too many redundant links, too much wasted vertical space, and a confusing appearing/disappearing side navigation panel ;) ).

I'm sure @jbednar and @jlstevens will have opinions about how things should be. There are probably issues on holoviews github that discuss some of this stuff too. And I know Jim also made a suggestion about the nbsite footer already (https://github.com/ioam/nbsite/issues/32). We should probably collect all those together. But first I think we should come to some agreement about which things (if any!) should stay consistent between sites (e.g. as part of a "pyviz" style/layout)?

It might be helpful to compare http://holoviews.org/ and https://ceball.github.io/ (some of holoviews.org redone with nbsite), or maybe some of the other sites listed at https://ioam.github.io/nbsite/.

[philippjfr]

I think holoviews.org has too many redundant links, too much wasted vertical space, and a confusing appearing/disappearing side navigation panel

I'd agree with that, at the same time I don't like having the side navigation panel on every page either, particularly the homepage. It doesn't look particularly nice and for high-level navigation I prefer the second nav bar at the top. The side navigation panel is useful when there are nested navigation levels, e.g. to navigate between the different user guides. The two-level nav bar does not take up a whole lot of vertical space and helps a lot in visually distinguishing the different websites. That said, I think that's more important for projects like HoloViews/GeoViews/Datashader/Bokeh than it is for infrastructure projects like NBSite itself so I'd be happy if that was made configurable.

If we do provide an option to hide the side panel it needs to have a better mechanism than the JS based approach used on holoviews.org which was inherited from the original bokeh template.

As an aside, I notice that on https://ceball.github.io/ the twitter feed doesn't have weird wrapping issues and that on https://ioam.github.io/nbsite/ it's gone entirely and also doesn't have the wrapping issues I see on https://ioam.github.io/geoviews/. How'd you manage that?

[ceball]

Although I made comments about the design of holoviews.org, I can't back it up with better ways of doing things :) That's why I'll stay out of it and implement what's decided on (where I can...).

[jlstevens]

I'll just make two quick comments after glancing at this issue (I'm not delving into the details just yet!):

• We want a consistent theme for all our websites and this theme was originally inherited from Bokeh. If we make changes, we probably want to stay consistent with the Bokeh website which means updating it too.

• I like the navbar and I use it a lot for navigation. It is generally the first thing I click on when I reach holoviews.org. It seems we will want it for geoviews too.

[ceball]

The screen shots above might mislead a little. Here's (nbsite) geoviews:

And here's (nbsite) "holoviews", followed by holoviews.org:

And bokeh:

[jlstevens]

I think other than getting rid of the redundant 'Gallery' and 'Docs' in the top line (keeping ABOUT and GITHUB), I like the current holoviews.org format. Adding navigation links a little lower and on the left is a lot more intuitive to me than on the very top right.

[jbednar]

Looks like I'll be outvoted here, but I favor minimizing the size of anything that appears on every page of the website, so that it is just big enough for the functionality it provides. I hate when websites fill up every page with useless junk for us to scroll past. Here, the two-bar format is clearly not necessary, as all the content clearly fits into a single line once the confusingly redundant items are removed. The two-line format does achieve keeping two categories of links separate, which could make sense for internal vs. external links, but there's no meaningful distinction between those categories in either the holoviews or bokeh websites, so that can't have been the reason for it previously.

Plus the bigger such on-every-page elements are, the less room is available on the home page for a big logo, big project name, prominent links to each of the sections, and pictures, all of which are more important than separating internal vs. external links.

So I'd think the aesthetic arguments are the only ones that would count here. And I'm not sure what having a big black line at the top adds to any of the sites -- why not just vary the color of the top (single) bar?

[jbednar]

I asked T. for her opinion, and she said both hv sites looked the same to her. :-) I did think of a counterargument -- we want the colorful line to be the "theme" color for the project, which is very likely to be colors similar to the logo, and thus the logo won't stand out from that color when transparently overlaid on it. Hmm.

[philippjfr]

there's no meaningful distinction between those categories in either the holoviews or bokeh websites, so that can't have been the reason for it previously.

True but we should definitel remove the redundant Gallery and Docs links at least. Whether or not that was the original reason shouldn't determine our decision now, I hacked together the template and website structure in an afternoon.

So I'd think the aesthetic arguments are the only ones that would count here. And I'm not sure what having a big black line at the top adds to any of the sites -- why not just vary the color of the top (single) bar?

You made the point for me below, the logo can't be overlaid on a background that's the same or at least a similar color. From other documentation sites I usually expect a link to GitHub at the top right, so I'd like to stick with that and I definitely think the internal links should be left-aligned and then there's also the search field. Logo+internal links+Search+Github link all on one line is too much imo, and putting the links right next to the logo won't look great.

Are we really so starved for vertical space that we need to get rid of 35 pixels? We'd save more vertical space by reducing the margins around the <h1> and the horizontal separator (<hr>), which are slightly excessive. The total header height including both bars is 76 pixel, which does not seem particularly excessive to me, it's less than readthedocs (80px), plotly docs (140px) and many other websites and unlike readthedocs that space isn't a total waste.

Finally I don't think we'll persuade bokeh to change their template, so any change we make to it will ultimately be inconsistent with their website.

[philippjfr]

I'm still in favor of making the two-level toolbar optional, the basic template would get a more neutral color (rather than the HoloViews themed one it has now). Websites for our "branded" websites like HoloViews/GeoViews/Datashader would have a distinct color scheme, emphasized by the two-level colored navigation bar while other projects like NBSite could stick with the more neutral theme without the two-level nav bar.

[jbednar]

I guess that approach will work; my biggest concern has always been the confusing duplication and lack of semantic distinction between the two sets of links (which should also be fixed on the Bokeh site).

We should also get rid of the bogus footer. Should we have no footer, or should it be a copy of the lines at the top of the page, so that people don't have to go back up to navigate to something else when they reach the end of the page?

[philippjfr]

We should also get rid of the bogus footer. Should we have no footer, or should it be a copy of the lines at the top of the page, so that people don't have to go back up to navigate to something else when they reach the end of the page?

Completely agree, I'd be in favor of a tiny little empty footer just to round off the page but am also open to mirroring the links from the top.

[jsignell]

I think we should have the top bar as external links, the second bar as internal links, and the footer as purely redundant. I have implemented this at datashader.org and am fairly pleased with it. I am going to start working on a new theme that contains these changes.

[jbednar]

Looks good, but I think the footer should be minimal in height and just like the top bars, not having a different organization.