much better than before, thanks. I suggest to reduce Sidebar to Icons, if User wants.

I like the concept. To me it feels better. The constant resizing when using the menu was a bit disturbing.
One thing I noted: When I have a submenu active (eg components) I don't see anymore an explanation what the "top level" menu icons stand for. I think it could be useful to have tooltips with the name on them, at least when the submenu is unfolded.
It may also be an idea to keep the currently selected (active) submenu open after a link has clicked. Since it doesn't use more spaces than when it is collapsed.
In some cases that may actually allow to remove the sidebar menu within the component. Eg in com_content the component sidebar menu has the exact same entries as the submenu itself. When the menu is open it looks quite redundant having them right beside eachother 😄

Looking good so far. I'll give it a proper test tomorrow.

1. The close icon will need to be lighter for a11y contrasts. Probably $white-offset
2. Will need to make sure the 3rd level dropout is scrollable
3. How is this going to work on mobile exactly? As it stands the sidebar is a couple of hundred pixels wide, so there won't be enough space for the dropout.

I'll remove the jQuery and rewrite in vanilla JS fort you tomorrow too.

Looks great! I'd like to have the dismiss button with more contrast, it should have conrast ratio at least 4,5. And the sidbar could have less width. But I really like the concept. Thank you, @ciar4n for your work.

@Bakual Ty. As suggested I have amended so the active item is now open on page load. The slide animation is been triggered on load which I will fix once I have a little more time to look at it.

This change does make your first point more apparent as the menu is now more commonly open (top-level titles hidden). Again I will try your suggestion of tooltips once I get the chance.

On hiding the 'component sidebar'.. I believe there was a reason this can't be hidden. I can't remember exactly. I'm guessing something to do with 3PD? It would make a lot more sense to hide it. As you say it seems to be generally an exact copy of the 3rd level menu items. If really needed maybe they can be appended to the menu items in the sidebar or added to a second tab in the sidebar.

@C-Lodder

1. Ty. Color changed as suggested with the latest commit.
2. True. As these have absolute positioning I think we'll need to use a 3rd party script to add a scroll. Probably not ideal as it is an extra dependency to load that won't be used very often.
3. Good point. We could possibly have them open under the 2 level parent item?

Thank you @chmst. I have changed the 'close' to a more stronger contrasting color as suggested...

@ciar4n media\vendor\perfect-scrollbar already exists ;)

On hiding the 'component sidebar'.. I believe there was a reason this can't be hidden. I can't remember exactly. I'm guessing something to do with 3PD? It would make a lot more sense to hide it.

I think at least being able to hide it like in J3 makes sense. We added that possibility with 3.3.7 (#4197) to get more real estate space. That argument is valid even more with J4 since the main menu is now left instead at the top.

Ideally it would be nice to ensure we get the main sidebar done properly so that we can burn that annoying component sidebar

Ideally it would be nice to ensure we get the main sidebar done properly so that we can burn that annoying component sidebar

I fear you will not be able to completely remove it. Because there are items that can't go into the regular menu. Eg when you have menu items which only show based on some conditional like the com_fields links (should only show if com_fields is active and the parameter is enabled) or maybe a link which needs special ACL permissions.
The menu system just isn't in a state (yet) where it could deal with such requirements.

Tested this: an already great improvement although some aspects are weird:
main window can slide under the sidebar when retracting

I have tested this item ✅ successfully on c919fc8

I like the idea and in terms of usability it certainly looks and feels better, it's a good improvement. Something that annoyed me a bit was when you click on a collapsible the need for a lot of vertical scrolling and this fixes that. Regarding the toggle for hiding the sidebar when not hovering it I personally prefer it with the toggle activated, what could be done here would be asking several people to know what the general opinion would be regarding this. Should the sidebar toggle remain deactivated then the toggle could be activated only on devices with smaller screens (smartphones/tablets) in order to save screen size in that case.

Ideally it would be nice to ensure we get the main sidebar done properly so that we can burn that annoying component sidebar
We can get rid of it for core but unless you want extensions to maintain two code bases it needs to be "accommodated" in some fashion

Tooltips added to icons when child items are open...

When I click on a parent item, such as "System", then click the "close" button, if I hen want to re-open "System" again, I need to click on it twice.

Thx @C-Lodder

Fixed with latest commit (c2bcad5)

Hope it's a click with the top parent, not a hover. I'm not sure about the last children level - the hover and right direction is a slight change in the idea.

Ciaran, I'm posting this document here for consideration, as recommended by George Wilson.
https://drive.google.com/open?id=1Z6wAhwW7RM_H5RX3Hg5_T0mpSXXdIL19eZH701R2r6k
I'm at the JUX working group at Glip, or you can message me here.

@jonrz How would that on mobile / tablet

@brianteeman tablets would mostly keep everything in sight. On smaller screens, it would shrink to a single column when needed, and the user would need to either scroll it, or we could have an accordion (still need to do some research on the best method).

i cant see how that would work

OK - was just raising awareness of the issue as you are using an icon which has direction to it now

I'm gonna have to think about RTL. Not sure if the powers have a set date for a stable release of J4, but Bootstrap will most likely add RTL in 4.1

They're taking an extreme amount of time to get the first Beta pushed out, so I may grab the PR from the repo and add it as a temporary measure.

A11y tabbing compatibility added...

Also menu closed if on com_cpanel

@armenos

PR now ready for testing!)

We will also need to have the flying focus on the "X" button too, so users can close the 2nd level via keyboard

@C-Lodder Good point. Done.

I have tested this item ✅ successfully on 1aee1fb

RTC after two successful tests.

@franz-wohlkoenig there are codestyle issue please remove RTC
@ciar4n please fix the codestyle issues

@rdeutz Codestyle issues fixed

@rdeutz set back on pending.