Claro Navigation toolbar arrow disappears

@ConnBi The patch seems to solve the issue.

While patch seems to fix the issue
The CSS that is getting ovewritten comes from claro's css
/core/themes/claro/css/state/toolbar.menu.css :

.toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box a,
.toolbar .toolbar-tray a.is-active {
  color: #000;
  background-color: #f5f5f5;
  font-weight: bold;
}

The patch suggested css for the /modules/contrib/admin_toolbar/css/admin.toolbar.css :

.toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box a,
.toolbar .toolbar-tray a.is-active {
  color: #000;
  background-color: unset;
  font-weight: bold;
}

while the only needed rule would be the unset of background color, I am not sure if it should be added on Claro's css or in Admin Toolbar's css.

@giannis makantasis the css should come inside toolbar file because we cannot access dropdown without the admin toolbar. but i am unable to reproduce the issue.

Changes are made on on 11.x (our main development branch) first, and are then back ported as needed according to the Core change policies.

@saurav-drupal-dev In order to reproduce the issue let me give you en example.
If you go Configuration-> Development page, and then you hover on Configuration , the Menu item "Development" will now be bold and underlined but its arrow will be hidden even though Development has more "Children Links".
This happens because in
this file (Claro) public_html/core/themes/claro/css/state/toolbar.menu.css ,

there is this css rule:

.toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box a,
.toolbar .toolbar-tray a.is-active {
  color: #000;
  background-color: #f5f5f5; <--------------
  font-weight: bold;
}

So the background of the a.is-active is covering the background of li.menu-item--expanded (that has that blue arrow)

So, @giannisMak do we need a new MR for this to fit what @saurav-drupal-dev described in #13?

the css should come inside toolbar file because we cannot access dropdown without the admin toolbar

Thanks a lot everyone for all the contributions and great help on this issue!

I was able to reproduce the problem mentioned in the issue summary above, after taking a close look at the screenshots.
It is important to understand that to test this you have to click on a menu item with several levels, for example:
Browse to: Configuration > People (admin/config/people)
This way, the menu item will be marked as active and this is where the problem appears:
It loses its arrow style, thus losing its indication the menu item has sub-menus.

I have tested after applying the patch and it seemed to fix the issue, great job Giannis (@giannis makantasis)!! 👍
I have tested this with Olivero and Gin themes as well and it seemed to fix the issue.

Additionally, I have done a quick review of the merge request which adds a new CSS rule only impacting active menu link items (a.is-active tags), thus having a limited/localized impact.
 

After fixing a few StyleLint errors, the build of the MR passed 🟢 and that's why I decided to merge the changes above at #22.

At this point, this issue should be considered Fixed 🥳

Thanks again to everyone for the great work, testing and feedback! 🙏