[Sidenav] Expandable/Collapsible Side Navigation + Mobile Navigation Pattern

[jamessampford]

Wondering if it may be possible to use the sidebar with just a list of icons that is always visible (namely when not mobile - on mobile probably want to reveal the sidebar at full width) and you can expand the sidebar to reveal labels with the rest of the page scaled (which is why I'm thinking sidebar with the transitioning) so nothing is covered or disappears off-screen

Sidebar would probably need to be scrollable and quite like the idea of adding accordions in it, like #258 (comment) but having icons always visible - quite like the idea of settings and expand/collapse floating at the bottom

Essentially can find this on any kind of dashboard system, such as in Azure DevOps:

Collapsed Tablet/Desktop

Expanded Tablet/Desktop

Collapsed Mobile

Expanded Mobile

Part of me thinks could probably achieve this already, but another part thinks it will need quite a bit of hacking around to get a common UI pattern when it could potentially be simplified out the box (so to speak)

[jamessampford]

I've started putting something together on JSFiddle https://jsfiddle.net/vuo4zwe5/ - I think it would probably be better as a "collection", though writing the JS for this may be slow for me to do

Tried using both a normal vertical menu as well as having accordion (though I have a few hacks that rather not have/probably better done in JS) - probably could have dropdown/popout menus too

Does seem to be quite a common pattern for dashboards/admin panels and allowing the ability to collapse to just icons or expand to show labels makes it useful

I think should take into account screen size and resizing, probably need to have a trigger for menu to open if on mobile view, and should be scrollable when the menu is long on any view - having part of the menu forced to the bottom is also useful. Likewise, could be things like a top nav bar and content area that may also needed to be accounted for (as per Fiddle) and probably set in a config

Update
Updated Fiddle: https://jsfiddle.net/ohLfkdcj/

• dropdown support (desktop)
• dropdown for mobile view needs work to render correctly
• open/close buttons in mobile view
• fixed a few bugs
• allow scroll when too long
• needs some consistent CSS in terms of hovering (or not), padding, etc
• other CSS fixes such as in compact view, some widths are too wide (grouped section)
• add/test tooltips when compact, possibly using the hidden titles/labels

[jamessampford]

Updated fiddle adding scrolling support when the content is too long and also did some converting of a dropdown to an accordion (very crudely), though by adding long content scrolling, dropdown now will not work as expected (so possibly can drop support?)

https://jsfiddle.net/qoycamex/

Would love to actually have this completed and included, and would also love to have #489 also included in FUI as these components would be quite useful for UI 😊

[jamessampford]

Latest version https://jsfiddle.net/ptLehsq1/3/ though removed dropdown as simplified things a little

Popup/Tooltips will not work with this version nor previous version, due to the long menu scrolling that is required (the popup/tooltip would be hidden from view)