Fixed navbar for RTL layouts

src/assets/css/librarybrowser.scss

@@ -813,6 +813,10 @@
 .itemDetailImage {
     width: 100% !important;
     box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.75);
+
+    [dir="rtl"] & {
+        box-shadow: 0 0 0.5em 0.1em rgba(0, 0, 0, 0.75);
+    }
 }
 
 div.itemDetailGalleryLink.defaultCardBackground {

src/libraries/navdrawer/navdrawer.js

@@ -7,6 +7,7 @@ import browser from '../../scripts/browser';
 import dom from '../../scripts/dom';
 import './navdrawer.scss';
 import '../../assets/css/scrollstyles.scss';
+import { getIsRTL } from '../../scripts/globalize';
 
 function getTouches(e) {
     return e.changedTouches || e.targetTouches || e.touches;
@@ -193,7 +194,7 @@ class NavDrawer {
 
         options.target.classList.add('touch-menu-la');
         options.target.style.width = options.width + 'px';
-        options.target.style.left = -options.width + 'px';
+        options.target.style.insetInlineStart = -options.width + 'px';
 
         if (!options.disableMask) {
             this.mask = document.createElement('div');
@@ -205,7 +206,7 @@ class NavDrawer {
     animateToPosition(pos) {
         const options = this.options;
         requestAnimationFrame(function () {
-            options.target.style.transform = pos ? 'translateX(' + pos + 'px)' : 'none';
+            options.target.style.transform = pos ? 'translateX(' + (getIsRTL() ? -pos : pos) + 'px)' : 'none';
         });
     }
 

src/libraries/navdrawer/navdrawer.scss

@@ -15,6 +15,13 @@
     -webkit-transition: -webkit-transform ease-out 40ms, left ease-out 260ms;
     -o-transition: transform ease-out 40ms, left ease-out 260ms;
     transition: transform ease-out 40ms, left ease-out 260ms;
+
+    [div="rtl"] & {
+        -webkit-transition: -webkit-transform ease-out 40ms, right ease-out 260ms;
+        -o-transition: transform ease-out 40ms, right ease-out 260ms;
+        transition: transform ease-out 40ms, right ease-out 260ms;
+    }
+
     z-index: 1099;
 }
 
@@ -22,6 +29,12 @@
     -webkit-transition: -webkit-transform ease-out 240ms, left ease-out 260ms;
     -o-transition: transform ease-out 240ms, left ease-out 260ms;
     transition: transform ease-out 240ms, left ease-out 260ms;
+
+    [div="rtl"] & {
+        -webkit-transition: -webkit-transform ease-out 240ms, right ease-out 260ms;
+        -o-transition: transform ease-out 240ms, right ease-out 260ms;
+        transition: transform ease-out 240ms, right ease-out 260ms;
+    }
 }
 
 .drawer-open {

src/scripts/globalize.js

@@ -55,6 +55,7 @@ import { currentSettings as userSettings } from './settings/userSettings';
 
         if (isRTL) {
             document.getElementsByTagName('body')[0].setAttribute('dir', 'rtl');
+            import('../styles/rtl.scss');
         } else {
             document.getElementsByTagName('body')[0].setAttribute('dir', 'ltr');
         }

src/scripts/site.js

@@ -100,7 +100,6 @@ function onGlobalizeInit() {
         import('../assets/css/fonts.scss');
     }
 
-    import('../styles/rtl.scss');
     import('../assets/css/librarybrowser.scss');
 
     loadPlugins().then(function () {

src/styles/rtl.scss

@@ -13,3 +13,15 @@
         transform: scale(-1, 1);
     }
 }
+
+@media all and (min-width: 40em) {
+    .dashboardDocument .mainDrawer {
+        left: unset !important;
+        right: 0 !important;
+    }
+
+    .dashboardDocument .skinBody {
+        left: 0 !important;
+        right: 20em !important;
+    }
+}