fix: improve sidebar transform handling for RTL layout in mobile

Author: zakariaf

_sass/rtl.scss

@@ -9,6 +9,8 @@
 @use 'rtl-fonts';
 
 html[dir='rtl'] {
+  $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
+
   /* Basic text direction */
   direction: rtl;
   text-align: right;
@@ -17,11 +19,12 @@ html[dir='rtl'] {
   #sidebar {
     left: auto;
     right: 0;
+
     border-right: none;
     border-left: 1px solid var(--sidebar-border-color);
 
     @include bp.lt(bp.get(lg)) {
-      transform: translateX(#{v.$sidebar-width}); /* hide */
+      transform: translateX(#{v.$sidebar-width});
       -webkit-transform: translateX(#{v.$sidebar-width});
     }
 
@@ -35,17 +38,7 @@ html[dir='rtl'] {
       }
     }
 
-    .site-title {
-      text-align: right;
-    }
-
     ul li.nav-item {
-      @include mx.pl-pr(1.5rem);
-
-      @include bp.xxxl {
-        @include mx.pl-pr(2.75rem);
-      }
-
       a.nav-link i {
         margin-right: 0;
         margin-left: 1.5rem;
@@ -73,6 +66,21 @@ html[dir='rtl'] {
     }
   }
 
+  [#{$sidebar-display}] #sidebar {
+    @include bp.lt(bp.get(lg)) {
+      transform: translateX(0);
+      -webkit-transform: translateX(0);
+    }
+  }
+
+  [#{$sidebar-display}] {
+    #main-wrapper {
+      @include bp.lt(bp.get(lg)) {
+        transform: translateX(-#{v.$sidebar-width});
+      }
+    }
+  }
+
   /* Main wrapper */
   #main-wrapper {
     @include bp.lg {