Collapsible Sidebar Issues

[flourish86]

This is a collection of some smaller issues i discovered regarding the collapsible sidebar implementation.

1. When the sidebar is collapsed, the navigation items scroll out of the visible area, when the search input is focussed. This could be reproduced in Safari. Expanding and collapsing again corrects this temporarily until the search input will be focussed again.

2. Active first-level nav item should be better distinguishable from non active ones (When first level index is selected).

3. The toggle-sidebar "lug" could be spaced wider and taller to better align with the nav icons, especially in collapsed state. It should also get a little offset to bottom to align with the status bar, when available.

4. The second level fly out menu appears after a slight delay after hovering. While the delay seems necessary for addressing the "scrollbar issue" for hiding the fly out, it should appear immediately when hovering.

5. In the original draft the flyout menu featured a caret on the left pointing to the according first level menu item. This doesn't harm usability too much, but should improve visual clarity, especially when another level-2 item is active.

Your Environment

Icinga Web 2 2.5.0, screenshot taken in Safari 10.11.1 on macOS

[dnewsholme]

To add to this list. Custom menu items which don't have an icon, just a name the text gets cut awkwardly when collapsed.

Perhaps just make it default to an icon of the first letter? Or some other generic default icon?

[lippserd]

An icon of the first letter sounds like a good idea to me.

[flourish86]

I also noticed, that the active level-2 item should not alter appearance when hovered, as there is no action behind the item.

Currently it opacity is reduced.

[flourish86]

edited item 2

[theFeu]

Those should be fixed now:

3. The toggle-sidebar "lug" could be spaced wider and taller to better align with the nav icons, especially in collapsed state. It should also get a little offset to bottom to align with the status bar, when available.

It looka a bit wonky in the IE, but for the modern browsers (chrome, firefox, safari, android mobile, ...) it looks as intended.

4. The second level fly out menu appears after a slight delay after hovering. While the delay seems necessary for addressing the "scrollbar issue" for hiding the fly out, it should appear immediately when hovering.

Reduced the delay from 600 to 300 ms, so it feels a bit smoother

I also noticed, that the active level-2 item should not alter appearance when hovered, as there is no action behind the item.
Currently it opacity is reduced.

This is now fixed.

[theFeu]

Point 1 is only an issue in Safari, where overflow: hidden moves the menu bar 2em to the left, instead of hiding the overflow.
The menu bar is 2em wider than needs to be because of an issue with the scrollbar (width: 2em) in IE / Edge that needs to be hidden (with mentioned overflow: hidden).

[lippserd]

Not all issues @flourish86 mentioned have been fixed, so I'll remove the target version and we'll fix this with a version after the 2.6.0 release.