Ensure the drawer works in RTL

I think better wait for https://www.drupal.org/project/navigation/issues/3427657

https://www.drupal.org/project/navigation/issues/3427657 is fixed :)

Pushed an MR to fix popovers in RTL languages.

To test this, I've been:

• drush si -y demo_umami
• drush en -y navigation
• drush uli
• Use Chrome dev tools after page load to manually adjust the html[dir] attribute to set rtl as the value.

Let me know if there is a better way to test, and maybe lets put it into the issue description.

A few issues that I can see:

• The expand collapse functionality breaks things in rtl. @ckrina has a good gif above.
• At desktop, the first level chevrons should be pointing to the left, in the direction that the drawer now opens.
• When the drawer slides out, there is a subtle gradient that sweeps across the lower part of the navigation (see gif below)

Subtle gradient sweep (animation slowed to 10%):

Thanks for the feedback all, taking a look.

Hi all, I pushed fixes for the issues raised. However, note that a real RTL language, like Arabic, must be installed and selected for a proper test. Switching the dir property via browser dev tools will result in incorrect behavior, as Drupal isn't aware of this, and will incorrectly set an offset variable the navigation relies on to display properly.

Issues fixed

1. When the drawer slides out, there is a subtle gradient that sweeps across the lower part of the navigation (see gif below)
2. At desktop, the first level chevrons should be pointing to the left, in the direction that the drawer now opens.
3. RTL uses the wrong offset variable for it's positioning math (the "left" variable instead of the "right" variable)

I've tested the issue with Hebrew. One detail i've noticed is that the font weight of the top level menu items is too small compared to for example english

similar for the drawer:

it also illustrates the detail that the design breaks in case strings are not translated yet.

I'm afraid this is something we can't solve? I's guess this is a font problem.

but if you take a look into the main content area in https://www.drupal.org/files/issues/2024-04-03/hebrew.jpg you have actual bold typography as well, so it isn't the case that heavier weight isn't available for the font used?

ohhhh thanks for clarification, completely forgot that the navigation might use a different font than the main content area!

@ckrina I fixed the incorrect chevron direction for RTL, as well as rebasing on top of 1.x and resolving the conflicts.