Ensure the drawer works in RTL

I forgot to postpone it.

Un-postponing since 📌 Implement drawer functionality Needs review has been merged in.

I think better wait for https://www.drupal.org/project/navigation/issues/3427657 📌 Implement the new designs to the drawer Needs review

https://www.drupal.org/project/navigation/issues/3427657 📌 Implement the new designs to the drawer Needs review is fixed :)

Pushed an MR to fix popovers in RTL languages.

ckrina → changed the visibility of the branch 3436129-ensure-the-drawer to hidden.

The collapse animation is missing ;)

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]<code> attribute to set <code>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:

the font weight of the top level menu items is too small compared to for example english

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

@bronzehedwick I found another small thing: the submenus have the wrong direction when the arrow is closed. It should be pointing down.

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?

@rkoller It's a different font: we're using Inter for the Navigation, ans I'm not sure we've added the package for Hebrew of if there is one. Claro uses the system font. Either way, this discussion is worth its own ticket because goes beyond the "direction" of the page and lands in the typeface world :)

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.

Merged, thanks!

Automatically closed - issue fixed for 2 weeks with no activity.