Merge pull request #1886 from AzzamAlsharafi/dev

🐛 RTL top nav bar layout fix.
nunocoracao · Jan 10, 2025 · ef5186c · ef5186c
2 parents 7736a48 + 904e077
commit ef5186c
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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 }}">