Apply rtl styling for rtl languages

src/components/navbar/ReaderNavBar.tsx

@@ -22,7 +22,7 @@ import Divider from '@mui/material/Divider';
 import FormControl from '@mui/material/FormControl';
 import MenuItem from '@mui/material/MenuItem';
 import Tooltip from '@mui/material/Tooltip';
-import { styled } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import Collapse from '@mui/material/Collapse';
@@ -132,6 +132,8 @@ interface IProps {
 
 export function ReaderNavBar(props: IProps) {
     const { t } = useTranslation();
+    const theme = useTheme();
+
     const navigate = useNavigate();
     const location = useLocation<{
         prevDrawerOpen?: boolean;
@@ -308,7 +310,7 @@ export function ReaderNavBar(props: IProps) {
                                     disabled={disableChapterNavButtons || chapter.sourceOrder <= 1}
                                     onClick={() => openNextChapter(ChapterOffset.PREV)}
                                 >
-                                    <KeyboardArrowLeftIcon />
+                                    {theme.direction === 'ltr' ? <KeyboardArrowLeftIcon /> : <KeyboardArrowRightIcon />}
                                 </IconButton>
                             </Tooltip>
                             <FormControl
@@ -348,7 +350,7 @@ export function ReaderNavBar(props: IProps) {
                                     }
                                     onClick={() => openNextChapter(ChapterOffset.NEXT)}
                                 >
-                                    <KeyboardArrowRightIcon />
+                                    {theme.direction === 'ltr' ? <KeyboardArrowRightIcon /> : <KeyboardArrowLeftIcon />}
                                 </IconButton>
                             </Tooltip>
                         </ChapterNavigation>