We currently treat the first level button and subsequent buttons as one component. To do this, we added many cascades to the Π‘SS and seriously complicated the script logic.
Toolbar Button and Toolbar Menu Link:
1. Different in terms of BEM. Button can exist without menu.
2. Different in terms of CSS. Spacings, fonts, focus etc. All different.
3. They have different JS functional. One common thing only which takes 5 lines of code. So can be duplicated.
In fact, the first level button is an independent element. And not related to the menu in any way. This will greatly simplify the styles (remove cascades). And of course simplify the scripts.
More details
https://www.drupal.org/project/navigation/issues/3386927#comment-15280734
π
Refactor CSS
Needs work
Also in this MR I added several necessary improvements.
1. Used currentColor for icons. This made it possible to set the color of states from one place
2. Reduced global focus specificity from
:where(.admin-toolbar) *:focus {
3. toolbar-link--sidebar-toggle --> admin-toolbar__toggle styles for control visibility. This is more correct from a BEM point of view.
4. used aria-expanded and aria-controls to display the visibility and state of button icons.
5. Removed ::before from definition of --icon variable. Less code - less problems :)
At the moment everything looks as it was. But the readability, maintainability and flexibility of the code has undoubtedly increased.
Please review!