[RFC] Refactor main navbar

[WithoutPants]

This is the current navbar.

This is as narrow as I can get the Window before it has to collapse to a menu button. With Audio and Text items in the roadmap, plus Playlists and such, we're going to run out of room in the navbar. We need to think about reworking it.

Some design considerations:

• we need to maintain single-click navigation for at least the most used buttons. I know that I will be bothered if I suddenly need to do two clicks to go to Scenes, Performers and Studios.
• the navitems fit into categorical groups. Scenes, Markers and Movies would fall under a Video group, and Images and Galleries would fall under an Image group, and the rest could go under Metadata.
• saved queries are in the roadmap and should ideally be accessible from the navbar.
• we should consider that on desktops, there is a lot more horizontal real estate than there is vertical
• we should ensure consistency between desktop and mobile views

Possible designs:

• on desktops, group navitems into the groups mentioned above (Metadata probably wouldn't need to grouped). The groups would be implemented as a hover dropdown button. Pornhub does something like this, as does xhamster:
  
• we could potentially save some horizontal realestate by increasing the height of the navbar and placing the icons above the text, with a squarer button - like how Sonarr/Radarr do it:
  

This would mean a loss of vertical real estate which I'm loathe to lose.

• move the items into a clickable menu like how the mobile view is currently. I'd rather not do this since it adds an extra click to all those top-level objects.
• move the items into a sidebar. Plex has this, for example:
  

Said sidebar is collapsible to it's icons, with the More > button only accessible when not collapsed. On most widescreens, we'd probably be losing less proportional real estate horizontally than vertically, and definitely less when collapsed. It would mean that some of our screens would need to be redesigned (the scene detail page for example).

• show only the first x items that will fit and put the rest into a More... menu button. Menu item configuration would then be order as well as inclusion.

[WithoutPants]

Belley has suggested an extension of the group - the groups, items and order should all be user configurable - meaning one could group some things and not others. We would provide a default grouping, but the user could completely customise it.

[WithoutPants]

Other suggestion, having like 2 navbar that can be switch in the bar with a button like 🔄

• 1 will be the default, with video, image, metadata group.
• 2 will be a favorite bar or quick access, it will only have button that you set in the interface settings, so i can choose Scene, Tags then only these button will appear in this bar.
  Of course the bar (and button to switch) will don't appear if the user never set his favorite "section" in the interface settings.
  Maybe having the choice to choose which navbar you want as default. (So you don't need to click on switch button everytime)

[CosimoVestri]

As to the sidebar idea:

It would mean that some of our screens would need to be redesigned (the scene detail page for example).

Why?

I hope you don't mind some input.

[WithoutPants]

At the very least, we'd need to adjust the proportions of the sections of the screen. I suspect that with a full menu sidebar, the left scene details sidebar won't look very good next to it.

[CosimoVestri]

If the sidebar is collapsible to icons and is collapsed by default, it wouldn't be too bad. Extended, however, it almost certainly would be an eyesore.

Clarification: Eyesore is poor word choice. What I mean is that it would encroach on the content to the right, assuming the entire page slides right with the extension. Another option would be to have the sidebar in it's extended form above the content.

[CosimoVestri]

As to the switchable navbar:

1. Any prior art/proof-of-concept? Nothing similar springs to my mind.
2. What would that look like in the mobile view? How would that translate to a mobile interface?

As to the configurable groups, images, order:

3. Customization, especially of order is very nice. That does seem to add a touch of complexity, though.
4. If groupings or custom groupings (I am imagining drop down menus, correct me if I'm wrong), what would that look like in the mobile view? Drop down menus are generally frustrating in a mobile view (three actions/clicks/touches to reach an item).

[WithoutPants]

Another consideration: the duplicate checker and filename parser should be accessible and grouped under the Scenes item.

If groupings or custom groupings (I am imagining drop down menus, correct me if I'm wrong), what would that look like in the mobile view? Drop down menus are generally frustrating in a mobile view (three actions/clicks/touches to reach an item).

I would have them in a collapsible (under) group that would be open by default.

[Anon247]

This might be a nice starting point for a simple but effective sidenav implementation. Shouldn't be too difficult to add an option to collapse the navbar when on desktop. I do believe a sidenav would offer the best simplicity and flexibility for effective navigation and customization across all screen sizes.

[CosimoVestri]

I would have them in a collapsible (under) group that would be open by default.

Oh, okay.

Another consideration: the duplicate checker and filename parser should be accessible and grouped under the Scenes item.

While great to have accessible, how prominent do these need to be? Since they aren't going to be used all the time, would they be somewhere like this:

[WithoutPants]

While great to have accessible, how prominent do these need to be? Since they aren't going to be used all the time, would they be somewhere like this:

This is a good point. Perhaps somewhere on the scenes page is more appropriate. The current home for Filename parser and Duplicate Checker (settings) isn't the ideal place.

[CosimoVestri]

I do believe a sidenav would offer the best simplicity and flexibility for effective navigation and customization across all screen sizes.

They are easy to implement. As far as sizing goes, one option would be to use media queries to determine if A.) the viewport is wide enough for the extended menu expands to the right (pushing the rest of the page content to coexist) or B.) the viewport is sufficiently narrow that the extended menu should be drawn atop the rest of the page.

[WithoutPants]

Some prototype screenshots. Here is a collapsed sidebar, shown with the scene details page:

And expanded:

It's hard to show with these screenshots, but it really feels like it's encroaching on screen space when expanded.