From 904e077b74547ee966fd756246284b18c6ad1d99 Mon Sep 17 00:00:00 2001
From: Azzam Alsharafi <32015536+AzzamAlsharafi@users.noreply.github.com>
Date: Thu, 19 Dec 2024 15:24:21 +0800
Subject: [PATCH] Fix top nav bar layout in RTL languages

Modify the margin direction in RTL layouts, and replace some occurrences of space-x to gap-x, for better RTL handling
---
 assets/css/compiled/main.css       | 22 ++++++++++++++--------
 layouts/partials/header/basic.html | 12 ++++++------
 layouts/partials/translations.html |  2 +-
 3 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index a84fb5ed..9e6119a5 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -1616,10 +1616,6 @@ select {
   margin-left:-3rem
 }
 
-.-mr-2 {
-  margin-right:-0.5rem
-}
-
 .-mr-48 {
   margin-right:-12rem
 }
@@ -2163,6 +2159,16 @@ select {
   gap:1rem
 }
 
+.gap-x-3 {
+  -moz-column-gap:0.75rem;
+       column-gap:0.75rem
+}
+
+.gap-x-5 {
+  -moz-column-gap:1.25rem;
+       column-gap:1.25rem
+}
+
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse:0;
   margin-right:calc(0.5rem * var(--tw-space-x-reverse));
@@ -5494,8 +5500,8 @@ pre {
   margin-left:0.5rem
 }
 
-.ltr\:mr-14:where([dir="ltr"], [dir="ltr"] *) {
-  margin-right:3.5rem
+.ltr\:mr-1:where([dir="ltr"], [dir="ltr"] *) {
+  margin-right:0.25rem
 }
 
 .ltr\:mr-4:where([dir="ltr"], [dir="ltr"] *) {
@@ -5562,8 +5568,8 @@ pre {
   margin-right:-1.25rem
 }
 
-.rtl\:ml-14:where([dir="rtl"], [dir="rtl"] *) {
-  margin-left:3.5rem
+.rtl\:ml-1:where([dir="rtl"], [dir="rtl"] *) {
+  margin-left:0.25rem
 }
 
 .rtl\:ml-4:where([dir="rtl"], [dir="rtl"] *) {
diff --git a/layouts/partials/header/basic.html b/layouts/partials/header/basic.html
index c1eb4641..53357f0c 100644
--- a/layouts/partials/header/basic.html
+++ b/layouts/partials/header/basic.html
@@ -1,5 +1,5 @@
 <div style="padding-left:0;padding-right:0;padding-top:2px;padding-bottom:3px"
-    class="main-menu flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start space-x-3">
+    class="main-menu flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start gap-x-3">
     {{ if .Site.Params.Logo }}
     {{ $logo := resources.Get .Site.Params.Logo }}
     {{ if $logo }}
@@ -30,7 +30,7 @@
             {{ end }}
 
         </nav>
-        <nav class="hidden md:flex items-center space-x-5 md:ml-12 h-12">
+        <nav class="hidden md:flex items-center gap-x-5 md:ml-12 h-12">
 
             {{ if .Site.Menus.main }}
             {{ range .Site.Menus.main }}
@@ -51,7 +51,7 @@
             {{/* Appearance switch */}}
             {{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
             <div
-                class="{{ if .Site.Params.footer.showScrollToTop | default true -}} ltr:mr-14 rtl:ml-14 {{- end }} flex items-center">
+                class="{{ if .Site.Params.footer.showScrollToTop | default true -}} {{- end }} flex items-center">
                 <button id="appearance-switcher" aria-label="Dark mode switcher" type="button" class="text-base hover:text-primary-600 dark:hover:text-primary-400">
                     <div class="flex items-center justify-center dark:hidden">
                         {{ partial "icon.html" "moon" }}
@@ -64,7 +64,7 @@
             {{ end }}
 
         </nav>
-        <div class="flex md:hidden items-center space-x-5 md:ml-12 h-12">
+        <div class="flex md:hidden items-center gap-x-5 md:ml-12 h-12">
 
             <span></span>
 
@@ -79,7 +79,7 @@
 
             {{/* Appearance switch */}}
             {{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
-            <button id="appearance-switcher-mobile" aria-label="Dark mode switcher" type="button" class="text-base hover:text-primary-600 dark:hover:text-primary-400" style="margin-right:5px">
+            <button id="appearance-switcher-mobile" aria-label="Dark mode switcher" type="button" class="text-base hover:text-primary-600 dark:hover:text-primary-400 ltr:mr-1 rtl:ml-1">
                 <div class="flex items-center justify-center dark:hidden">
                     {{ partial "icon.html" "moon" }}
                 </div>
@@ -91,7 +91,7 @@
 
         </div>
     </div>
-    <div class="-my-2 -mr-2 md:hidden">
+    <div class="-my-2 md:hidden">
 
         <label id="menu-button" class="block">
             {{ if .Site.Menus.main }}
diff --git a/layouts/partials/translations.html b/layouts/partials/translations.html
index 657a65f8..25f6116f 100644
--- a/layouts/partials/translations.html
+++ b/layouts/partials/translations.html
@@ -1,7 +1,7 @@
 {{ if .IsTranslated }}
 <div>
   <div class="cursor-pointer flex items-center nested-menu">
-    <span class="mr-1">
+    <span class="ltr:mr-1 rtl:ml-1">
       {{ partial "icon.html" "language" }}
     </span>
     <div class="text-sm font-medium text-gray-500 hover:text-primary-600 dark:hover:text-primary-400" title="{{ .Title }}">