Set the toolbar to position fixed on mobile

Started an MR which includes the beginning of a solution for excess toolbar tabs. There are steps to do before it is review ready, but the underlying functionality is now there.

Applied patch #73 on Drupal 9 PHP version 8.1. I am attaching my screenshots for reference. Please review & thank you.

3809.patch has been successfully applied.
Now toolbar is fixed and working as expected in mobile.
For ref attached recording.

There are already more than enough screenshots and recordings - it's not necessary to provide more such as #96 and #97. These are demonstrating something that has already been demonstrated 7 times prior, so it does not move the issue forward and will not receive contribution credit.

A significant feature was added in #92 reviewing that addition might even warrant screenshots or videos. However but neither of the above have the toolbar configured to include tabs that don't open menu trays, so the end result is just screenshots of the exact same functionality that was screenshotted in #87, #76, #71, #66, #44, #23, #21.

Tested the toolbar and the excess toolbar items toggle manually with different phone sizes and window sizes and looks good.

Since there's no explanation of the near instantaneous switch from RTBC to "Needs review" in #101 I'm guessing this was an accidental submit?

Switching the status back to RTBC since #101 appears to be accidental (either accidentally switching status, or accidentally omitting the explanation for the status change)

Asked few questions on the MR

This it would help to have before/after screenshots in the issue summary to show what is being fixed.

Moving back for the screenshots

Attached the screenshots of how it looks before and after the changes.

Looks like the styling on the toggle when there are excess items is gone now 😅

When we try to add multiple toolbar items and use the mobile view, ideally the items should collapse and on clicking the ...it should expand but it's not happening here.And even the click on ...just updates the HTML element via ajax but it does not perform any action on click of it.I have attached the screenshot for the problem that i described.

Only open thread I see

I think this would benefit from a comment and also potentially from additional test coverage 😇

I reviewed the test in testCollapsibleToolbarItems() and it appears to pass test.
Note: DrupalCon2023, bug smash initiative.

Tested this manually at DrupalCon and the toolbar does stay fixed.

But adding extra tabs the "..." appears but clicking on it does nothing and when using enough tabs they wrap.

Clicking "..." works for me (enabled Workspaces module, it toggles workspace switcher).
However I found an issue related to z-index for `My account` icon.

Looks like toolbar stays fixed and the toggle works and looks as expected. Pushed a small commit that just changes the selector of the toggle in a test. #119 was discussed today with lauriii and bnjmnm and the z-index issue is pre-existing and out of scope of this MR.

There's one kind of a major issue with this which is that when there's horizontal scroll on the page, e.g. when there's a table on the page, the toggle is pushed to the right side of the screen. This makes it very hard to notice. Ideally we would do #3068696: Tables overflow on mobile → first but maybe there's a workaround that we could use here before that?

Tested manually and code looks good to me

Tested the scenario mentioned in #74. There's still a ultra-narrow mode which kicks in when zoomed in. Toolbar is not using rem or em units meaning that overriding body/html font-size won't impact toolbar. Pretty sure we can remove the needs accessibility review tag.

Posted few comments on the MR.

Appears the review was done by lauriii and the feedback was addressed.

Applied the MR myself and didn't notice any regression.

Left couple more comments in the MR.

I again tested the above problem that @laurii mentioned in Umami profile after removing the toolbar items but still i can't reproduce it.I'm attaching the screen recording for reference.

First, thanks all for working on this! I'd say the idea looked like a quick win before we get the new navigation, but I've tested the latest changes and I'm a bit concerned it's a bit too far to what I'd sign-off to get in.

1. It ends up in 2 lines of links (testing in FF at 390px wide) and that's too much much vertical space to leave a working area.
2. Apart from that, the z-index for icons gets in the way by showing icons in the middle of other submenus and it's confusing (I know it's a previous problem but it just makes it worst).
3. Another thing is that the open/close icon stays the same all the time, while when it's opened should be something else.
4. When the links open they are one next to the other (I know this is the current behavior) but it's a really strange and unseen pattern, specially interacting with the right "collapse" button making the items float to the left). If something is being changed from the current interaction it should make it better, and right now the result is confusing.

I'm afraid the place where this is right now will need a substantial amount of hours to design&rethink a few things, develop and review and I wonder if it's really worth the time of core experts here when we're planning on replacing this as soon as we can with the new Toolbar.

Hello, I stumbled on this for the issue depicted in #108.
We have a sticky header that relies on Drupal displace - top: var(--drupal-displace-offset-top, 0); - which is not positioned correctly on mobile with the toolbar.

Reading #131 is not really reassuring.
Can a compromize be found here maybe?