The scrollbar moves the content of the sidebar

This is native system behavior, but still not sure what exactly behavior you want to have?

You want to have scrollbar above content? Like position absolute let's say? In that case scrollbars can overlap content a bit on the right side.

From my pov we shouldn't fix here anything. It's a native behavior

It might be native behavior, but the layout jump makes it feel the navigation doesn't work well and it's a usability problem. So regardless of what browsers do with the scrollbar natively, the resulting experience should be smooth.

The way it should work: when the scrollbar appears (because it's needed) the rest of that region should keep exactly with the same width, without layout shifts or elements being moved to leave place to the scrollbar.

@kostyashupenko & @ckrina Yes it is the browser's native behaviour, but what if we can make that scroll bar a little small to match the theme, it seems very weird to see that big scroll bar. What if we can make it custom and set its width, height and colour the same as our hover effect's bar?

Making the toolbar-block a bit smaller as required by the scrollbar also made the scrollbar thumb with a smaller width. So it helps to solve this content movement issue.

I don't really like idea of customizing users browsers scrollbars.

I think it is also not acceptable in terms of accesibility:
https://ericwbailey.website/published/dont-use-custom-css-scrollbars/

Probably we can find workaround with:

https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter

like: `scrollbar-gutter: stable both-edges;`

and remove padding around scrollable area?

It is supported by all current browserslist except safari.

We can use script with overflow Detection from:

https://www.drupal.org/project/navigation/issues/3405006#comment-15354884 🐛 The footer shadow disappears when a button is hovered Needs review

Only need to calculate scrollbar width

There are always dangers in overwriting the default browser behavior. It is usually more work than it is worth. Still, Eric's article is focusing on the page scroll bar and I can't find references to scroll bars within the page.

Worth looking into though.

This method can be used if it is possible to integrate with the design
https://youtu.be/ZFhPGfLfSa8?si=XMMQF24pHIT8JA_0

I would avoid customizing the browser's scrollbar too.

Thanks @mikepadiernos for the idea! It looks like scrollbar-gutter is supported in all mayor browsers except Safari. It looks like this property is defined in the Overflow Module Level 3, but it's on a Working Draft status.

So I would say let's fix the problem with the simple solution (scrollbar-gutter) for the 75% of users, and open a follow-up specifically for Safari.

I made the suggested changes, but I see another issue is occurring by using the scrollbar-gutter property. This will only be applying the stable spacing to the upper menus. For footer menus, we need to add overflow property which messes with the previous designs. So I am thinking about getting the current width (after applying scrollbar-gutter) of the top menu and setting it for the footer menus by using JS. Any suggestions on this approach?

MR Updated and added scrollbar-gutter for the footer nav and menu nav.

We can't use scrollbar-gutter as it is, because:
1. It's good to have it only when scrollbar is always exist.
2. If scrollbar is not exist -> see gif. On this gif i'm just checking/unchecking scrollbar-gutter property. On different operating systems / computers / specific appearance preferences on the system, scrollbar can behaves differently. So sometimes when scrollbar is hidden at the moment, this CSS property adds big end gap, which from my pov breaks design.

I tried the javascript approach mentioned in the #9 🐛 The scrollbar moves the content of the sidebar Needs work to add scrollbar-gutter only when the overflow-Y is true; but at this point, it's also having a moving effect and it also works same as a browsers native behaviour.

here is the implementation.

To container the UI constant I manage the right padding space by taking reference from Figma.
Here is the output:

@Meeni_Dhobale hello! Thank you for you work.
I checked it and i think you should not change size of toolbar button, because it is used in lot of places. Not only in that first level of menu.
You can take a look here https://www.drupal.org/project/navigation/issues/3402046 ✨ Create the Top Bar Needs review

This is fixed with the implementation of the drawer.