🐛 RTL top nav bar layout fix.

[AzzamAlsharafi]

Relevant issue: #1871

Current

In RTL languages, the layout of the top nav bar is slightly broken:

In desktop mode, there's no gap between EN and the languages logo, and there's no gap between Shortcodes and Docs tabs

In mobile mode, there's no gap between EN and the languages logo.

Solution

The issue is mainly caused by two things:

• Usage of mr-X or ml-X in some places, which places the margin in the wrong direction when switched to RTL layout. This is solved by making use of rtl: and ltr: specifiers. So mr-1 is changed to ltr:mr-1 rtl:ml-1
• Usage of space-x-X in some places, which doesn't work well with RTL layouts. This is solved by replacing space-x-X with gap-x-X.

Post-fix

Desktop mode.

Mobile mode.