Refactor RTL support in contexts and NavBar; update CSS for improved direction handling

src/views/components/NavBar.jsx

@@ -31,7 +31,6 @@ import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
 import { version } from '../../../package.json'
 import UserProfileAvatar from '../../components/UserProfileAvatar'
 import Z_INDEX from '../../constants/zIndex'
-import { useLocalization } from '../../contexts/LocalizationContext'
 import { useResource } from '../../queries/ResourceQueries'
 import { useGlobalSearch } from '../../search/GlobalSearchContext'
 import { apiClient } from '../../utils/ApiClient'
@@ -41,7 +40,6 @@ import SyncStatusIndicator from './SyncStatusIndicator'
 const publicPages = ['/landing', '/privacy', '/terms']
 const NavBar = () => {
   const { t } = useTranslation('common')
-  const { isRTL } = useLocalization()
   const { data: resource } = useResource()
   const { openSearch } = useGlobalSearch()
 
@@ -224,14 +222,19 @@ const NavBar = () => {
       <Drawer
         open={drawerOpen}
         onClose={closeDrawer}
-        anchor={isRTL ? 'right' : 'left'}
+        // Always 'left'. Joy bakes the anchor into emotion CSS (`left: 0` plus a
+        // translateX for the slide), so stylis-plugin-rtl already mirrors it to
+        // the right edge under RTL. Branching on isRTL here would flip it twice
+        // and land the drawer back on the left, half off-screen.
+        anchor='left'
         size='sm'
         onClick={closeDrawer}
         sx={{
           '& .MuiDrawer-content': {
             position: 'fixed',
             // pt: 'calc(var(--safe-area-inset-top, 0px))',
-            ...(isRTL ? { right: 0 } : { left: 0 }),
+            // Physical on purpose, so it is mirrored in step with the anchor.
+            left: 0,
             // pb: 'calc(var(--safe-area-inset-bottom, 0px))',
             // height:
             //   'calc(100vh - var(--safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, 0px))',