From fcfdddbe4fe576da237194c733b1526e1d6f7606 Mon Sep 17 00:00:00 2001
From: mildrette <mildredfonka1@gmail.com>
Date: Thu, 27 Jun 2024 13:58:35 +0100
Subject: [PATCH 1/3] update to carousel

---
 src/App.css            | 7 +++++++
 src/Components/Blog.js | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/App.css b/src/App.css
index 26fb1c2..0367d67 100644
--- a/src/App.css
+++ b/src/App.css
@@ -157,3 +157,10 @@ button:hover {
 	font-size: 30px;
 	text-align: center;
 }
+
+/* carousel */
+.centered-carousel {
+	display: flex;
+	/* justify-content: center; */
+	/* align-items: center; */
+}
diff --git a/src/Components/Blog.js b/src/Components/Blog.js
index 5a6c533..969450b 100644
--- a/src/Components/Blog.js
+++ b/src/Components/Blog.js
@@ -32,7 +32,7 @@ const BlogCarousel = () => {
 			arrows
 			autoPlaySpeed={3000}
 			centerMode={false}
-			className=""
+			className="centered-carousel"
 			containerClass="container-with-dots"
 			dotListClass=""
 			draggable

From 794f047a71adc7620c071ba04a1076510659afa3 Mon Sep 17 00:00:00 2001
From: mildrette <mildredfonka1@gmail.com>
Date: Thu, 27 Jun 2024 14:46:45 +0100
Subject: [PATCH 2/3] fixed RTL direction issues

---
 src/Components/Blog.js | 228 +++++++++++++++++---------------
 src/Components/Nav.js  | 290 ++++++++++++++++++++---------------------
 src/Pages/Landing.js   |  96 +++++++++++---
 3 files changed, 348 insertions(+), 266 deletions(-)

diff --git a/src/Components/Blog.js b/src/Components/Blog.js
index 969450b..ed96bc9 100644
--- a/src/Components/Blog.js
+++ b/src/Components/Blog.js
@@ -5,7 +5,9 @@ import { Card, CardContent, CardMedia, Typography, Box, Avatar } from "@mui/mate
 import { useTranslation } from "react-i18next";
 
 const BlogCarousel = () => {
-	const { t } = useTranslation();
+	const { t, i18n } = useTranslation();
+
+	const isRTL = i18n.language === "fa"; // Check if the current language is RTL
 
 	const items = [
 		{
@@ -27,113 +29,129 @@ const BlogCarousel = () => {
 	];
 
 	return (
-		<Carousel
-			additionalTransfrom={0}
-			arrows
-			autoPlaySpeed={3000}
-			centerMode={false}
-			className="centered-carousel"
-			containerClass="container-with-dots"
-			dotListClass=""
-			draggable
-			focusOnSelect={false}
-			infinite
-			itemClass=""
-			keyBoardControl
-			minimumTouchDrag={80}
-			pauseOnHover
-			renderArrowsWhenDisabled={false}
-			renderButtonGroupOutside={false}
-			renderDotsOutside={false}
-			responsive={{
-				desktop: {
-					breakpoint: {
-						max: 3000,
-						min: 1024
-					},
-					items: 3,
-					partialVisibilityGutter: 40
-				},
-				mobile: {
-					breakpoint: {
-						max: 464,
-						min: 0
+		<Box sx={{ direction: isRTL ? "rtl" : "ltr" }}>
+			{" "}
+			{/* Set the direction based on isRTL */}
+			<Carousel
+				additionalTransfrom={0}
+				arrows
+				autoPlaySpeed={3000}
+				centerMode={false}
+				className="centered-carousel"
+				containerClass="container-with-dots"
+				dotListClass=""
+				draggable
+				focusOnSelect={false}
+				infinite
+				itemClass=""
+				keyBoardControl
+				minimumTouchDrag={80}
+				pauseOnHover
+				renderArrowsWhenDisabled={false}
+				renderButtonGroupOutside={false}
+				renderDotsOutside={false}
+				responsive={{
+					desktop: {
+						breakpoint: {
+							max: 3000,
+							min: 1024
+						},
+						items: 3,
+						partialVisibilityGutter: 40
 					},
-					items: 1,
-					partialVisibilityGutter: 30
-				},
-				tablet: {
-					breakpoint: {
-						max: 1024,
-						min: 464
+					mobile: {
+						breakpoint: {
+							max: 464,
+							min: 0
+						},
+						items: 1,
+						partialVisibilityGutter: 30
 					},
-					items: 2,
-					partialVisibilityGutter: 30
-				}
-			}}
-			rewind={false}
-			rewindWithAnimation={false}
-			rtl={false}
-			shouldResetAutoplay
-			showDots={false}
-			sliderClass=""
-			slidesToSlide={1}
-			swipeable
-		>
-			{items.map((item, index) => (
-				<div key={index}>
-					<Card
-						sx={{
-							maxWidth: { xs: "100%", sm: "400px" },
-							mx: "auto",
-							boxShadow: "0 4px 8px #041c94",
-							transition: "transform 0.3s ease-in-out",
-							borderRadius: 8,
-							border: "1px solid #e0e0e0",
-							"&:hover": {
-								transform: "scale(1.02)",
-								boxShadow: "0 8px 16px #041c94",
-								border: "1px solid #8AC1EE"
-							},
-							marginRight: "30px",
-							marginLeft: "40px",
-							marginBottom: "20px"
-						}}
-					>
-						<CardMedia
-							component="img"
-							height="200"
-							image={item.image}
-							alt={item.title}
-							sx={{ objectFit: "cover", width: "100%" }}
-						/>
-						<CardContent>
-							<Typography
-								gutterBottom
-								variant="h5"
-								component="div"
-								sx={{ fontSize: { xs: "1.25rem", md: "1.5rem" } }}
+					tablet: {
+						breakpoint: {
+							max: 1024,
+							min: 464
+						},
+						items: 2,
+						partialVisibilityGutter: 30
+					}
+				}}
+				rewind={false}
+				rewindWithAnimation={false}
+				rtl={isRTL} // Set RTL based on the current language
+				shouldResetAutoplay
+				showDots={false}
+				sliderClass=""
+				slidesToSlide={1}
+				swipeable
+			>
+				{items.map((item, index) => (
+					<div key={index}>
+						<Card
+							sx={{
+								maxWidth: { xs: "100%", sm: "400px" },
+								mx: "auto",
+								boxShadow: "0 4px 8px #041c94",
+								transition: "transform 0.3s ease-in-out",
+								borderRadius: 8,
+								border: "1px solid #e0e0e0",
+								"&:hover": {
+									transform: "scale(1.02)",
+									boxShadow: "0 8px 16px #041c94",
+									border: "1px solid #8AC1EE"
+								},
+								marginRight: isRTL ? "0" : "30px", // Adjust margin based on RTL
+								marginLeft: isRTL ? "30px" : "0", // Adjust margin based on RTL
+								marginBottom: "20px"
+							}}
+						>
+							<CardMedia
+								component="img"
+								height="200"
+								image={item.image}
+								alt={item.title}
+								sx={{ objectFit: "cover", width: "100%" }}
+							/>
+							<CardContent sx={{ textAlign: isRTL ? "right" : "left" }}>
+								{" "}
+								{/* Adjust text alignment based on RTL */}
+								<Typography
+									gutterBottom
+									variant="h5"
+									component="div"
+									sx={{ fontSize: { xs: "1.25rem", md: "1.5rem" } }}
+								>
+									{item.title}
+								</Typography>
+								<Typography variant="body2" color="text.secondary">
+									{item.description}
+									<a style={{ color: "#8AC1EE" }} href={item.link} target="_blank" rel="noreferrer">
+										<br />
+										{t("Blog.ReadMore")}
+									</a>
+								</Typography>
+							</CardContent>
+							<Box
+								sx={{
+									display: "flex",
+									alignItems: "center",
+									px: 2,
+									pb: 2,
+									justifyContent: isRTL ? "flex-end" : "flex-start"
+								}}
 							>
-								{item.title}
-							</Typography>
-							<Typography variant="body2" color="text.secondary">
-								{item.description}
-								<a style={{ color: "#8AC1EE" }} href={item.link} target="_blank" rel="noreferrer">
-									<br />
-									{t("Blog.ReadMore")}
-								</a>
-							</Typography>
-						</CardContent>
-						<Box sx={{ display: "flex", alignItems: "center", px: 2, pb: 2 }}>
-							<Avatar>{item.avatar}</Avatar>
-							<Typography variant="body2" sx={{ p: 1 }}>
-								{item.author}
-							</Typography>
-						</Box>
-					</Card>
-				</div>
-			))}
-		</Carousel>
+								{" "}
+								{/* Adjust alignment based on RTL */}
+								<Avatar>{item.avatar}</Avatar>
+								<Typography variant="body2" sx={{ p: 1 }}>
+									{item.author}
+								</Typography>
+							</Box>
+						</Card>
+					</div>
+				))}
+			</Carousel>
+		</Box>
 	);
 };
 
diff --git a/src/Components/Nav.js b/src/Components/Nav.js
index e714f87..10b3462 100644
--- a/src/Components/Nav.js
+++ b/src/Components/Nav.js
@@ -13,7 +13,7 @@ import IconButton from "@mui/material/IconButton";
 import MenuItem from "@mui/material/MenuItem";
 import MenuIcon from "@mui/icons-material/Menu";
 import Menu from "@mui/material/Menu";
-import { useTheme, createTheme } from "@mui/material/styles";
+import { useTheme, createTheme, ThemeProvider } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import LanguageSwitcher from "../Components/LanguageSwitcher";
@@ -75,151 +75,151 @@ export default function BackToTop(props) {
 	});
 
 	return (
-		<React.Fragment theme={themeWithDirection}>
-			<CssBaseline />
-			<AppBar sx={{ backgroundColor: "white" }}>
-				<Toolbar>
-					<Box
-						sx={{
-							display: "flex",
-							alignItems: "center",
-							flexGrow: 1,
-							justifyContent: "space-between",
-							color: "black"
-						}}
-					>
-						<img
-							src="./logo.png"
-							alt="Logo"
-							style={{ height: "40px", marginRight: "16px", color: "#1c222c" }}
-						/>
-						{isMobile ? (
-							<>
-								<IconButton
-									edge="start"
-									color="inherit"
-									aria-label="menu"
-									onClick={handleMenu}
-									sx={{ padding: "20px", color: "black" }}
-								>
-									<MenuIcon />
-								</IconButton>
-								<Menu
-									id="menu-appbar"
-									anchorEl={anchorEl}
-									anchorOrigin={{
-										vertical: "top",
-										horizontal: direction === "rtl" ? "left" : "right"
-									}}
-									keepMounted
-									transformOrigin={{
-										vertical: "top",
-										horizontal: direction === "rtl" ? "left" : "right"
+		<ThemeProvider theme={themeWithDirection}>
+			<React.Fragment>
+				<CssBaseline />
+				<AppBar sx={{ backgroundColor: "white" }}>
+					<Toolbar>
+						<Box
+							sx={{
+								display: "flex",
+								alignItems: "center",
+								flexGrow: 1,
+								justifyContent: "space-between",
+								color: "black"
+							}}
+						>
+							<img
+								src="./logo.png"
+								alt="Logo"
+								style={{ height: "40px", marginRight: "16px", color: "#1c222c" }}
+							/>
+							{isMobile ? (
+								<>
+									<IconButton
+										edge="start"
+										color="inherit"
+										aria-label="menu"
+										onClick={handleMenu}
+										sx={{ padding: "20px", color: "black" }}
+									>
+										<MenuIcon />
+									</IconButton>
+									<Menu
+										id="menu-appbar"
+										anchorEl={anchorEl}
+										anchorOrigin={{
+											vertical: "top",
+											horizontal: direction === "rtl" ? "left" : "right"
+										}}
+										keepMounted
+										transformOrigin={{
+											vertical: "top",
+											horizontal: direction === "rtl" ? "left" : "right"
+										}}
+										open={Boolean(anchorEl)}
+										onClose={handleClose}
+									>
+										<MenuItem onClick={handleClose}>
+											<a
+												href="https://smswithoutborders.github.io/docs/tutorials/getting-started/"
+												target="_blank"
+												rel="noreferrer noopener"
+												className="menu-link"
+											>
+												{t("Nav.help")}
+											</a>
+										</MenuItem>
+										<MenuItem onClick={handleClose}>
+											<a
+												href="https://blog.smswithoutborders.com/"
+												target="_blank"
+												rel="noreferrer"
+												className="menu-link"
+											>
+												{t("Nav.Blog")}
+											</a>
+										</MenuItem>
+										<MenuItem onClick={handleClose}>
+											<IconButton
+												href="https://x.com/RelaySMS"
+												target="_blank"
+												rel="noopener noreferrer"
+												color="inherit"
+											>
+												<TwitterIcon />
+											</IconButton>
+										</MenuItem>
+										<MenuItem onClick={handleClose}>
+											<IconButton
+												href="https://github.com/smswithoutborders"
+												target="_blank"
+												rel="noopener noreferrer"
+												color="inherit"
+											>
+												<GitHubIcon />
+											</IconButton>
+										</MenuItem>
+										<MenuItem onClick={handleClose}>
+											<LanguageSwitcher />
+										</MenuItem>
+									</Menu>
+								</>
+							) : (
+								<Box
+									component="nav"
+									sx={{
+										display: "flex",
+										alignItems: "center",
+										gap: 2,
+										ml: "auto"
 									}}
-									open={Boolean(anchorEl)}
-									onClose={handleClose}
-								>
-									<MenuItem onClick={handleClose}>
-										<a
-											href="https://smswithoutborders.github.io/docs/tutorials/getting-started/"
-											target="_blank"
-											rel="noreferrer noopener"
-											className="menu-link"
-										>
-											{t("Nav.help")}
-										</a>
-									</MenuItem>
-
-									<MenuItem onClick={handleClose}>
-										<a
-											href="https://blog.smswithoutborders.com/"
-											target="_blank"
-											rel="noreferrer"
-											className="menu-link"
-										>
-											{t("Nav.Blog")}
-										</a>
-									</MenuItem>
-									<MenuItem onClick={handleClose}>
-										<IconButton
-											href="https://x.com/RelaySMS"
-											target="_blank"
-											rel="noopener noreferrer"
-											color="inherit"
-										>
-											<TwitterIcon />
-										</IconButton>
-									</MenuItem>
-									<MenuItem onClick={handleClose}>
-										<IconButton
-											href="https://github.com/smswithoutborders"
-											target="_blank"
-											rel="noopener noreferrer"
-											color="inherit"
-										>
-											<GitHubIcon />
-										</IconButton>
-									</MenuItem>
-
-									<MenuItem onClick={handleClose}>
-										<LanguageSwitcher />
-									</MenuItem>
-								</Menu>
-							</>
-						) : (
-							<Box
-								component="nav"
-								sx={{
-									display: "flex",
-									alignItems: "center",
-									gap: 2,
-									ml: "auto"
-								}}
-							>
-								<a
-									href="https://smswithoutborders.github.io/docs/tutorials/getting-started/"
-									target="_blank"
-									rel="noreferrer noopener"
-									className="menu-link"
-								>
-									<Typography>{t("Nav.help")}</Typography>
-								</a>
-								<a
-									href="https://blog.smswithoutborders.com/"
-									target="_blank"
-									rel="noreferrer"
-									className="menu-link"
-								>
-									<Typography>{t("Nav.Blog")}</Typography>
-								</a>
-								<IconButton
-									href="https://x.com/RelaySMS"
-									target="_blank"
-									rel="noopener noreferrer"
-									color="inherit"
-								>
-									<TwitterIcon />
-								</IconButton>
-								<IconButton
-									href="https://github.com/smswithoutborders"
-									target="_blank"
-									rel="noopener noreferrer"
-									color="inherit"
 								>
-									<GitHubIcon />
-								</IconButton>
-								<LanguageSwitcher />
-							</Box>
-						)}
-					</Box>
-				</Toolbar>
-			</AppBar>
-			<Toolbar id="back-to-top-anchor" />
-			<ScrollTop {...props}>
-				<Fab size="small" aria-label="scroll back to top">
-					<KeyboardArrowUpIcon />
-				</Fab>
-			</ScrollTop>
-		</React.Fragment>
+									<a
+										href="https://smswithoutborders.github.io/docs/tutorials/getting-started/"
+										target="_blank"
+										rel="noreferrer noopener"
+										className="menu-link"
+									>
+										<Typography>{t("Nav.help")}</Typography>
+									</a>
+									<a
+										href="https://blog.smswithoutborders.com/"
+										target="_blank"
+										rel="noreferrer"
+										className="menu-link"
+									>
+										<Typography>{t("Nav.Blog")}</Typography>
+									</a>
+									<IconButton
+										href="https://x.com/RelaySMS"
+										target="_blank"
+										rel="noopener noreferrer"
+										color="inherit"
+									>
+										<TwitterIcon />
+									</IconButton>
+									<IconButton
+										href="https://github.com/smswithoutborders"
+										target="_blank"
+										rel="noopener noreferrer"
+										color="inherit"
+									>
+										<GitHubIcon />
+									</IconButton>
+									<LanguageSwitcher />
+								</Box>
+							)}
+						</Box>
+					</Toolbar>
+				</AppBar>
+				<Toolbar id="back-to-top-anchor" />
+				<ScrollTop {...props}>
+					<Fab size="small" aria-label="scroll back to top">
+						<KeyboardArrowUpIcon />
+					</Fab>
+				</ScrollTop>
+			</React.Fragment>
+		</ThemeProvider>
 	);
 }
diff --git a/src/Pages/Landing.js b/src/Pages/Landing.js
index 43dbea0..b0e8c0d 100644
--- a/src/Pages/Landing.js
+++ b/src/Pages/Landing.js
@@ -41,7 +41,7 @@ export default function Landing() {
 				>
 					{/* Banner Page */}
 					<Container maxWidth="lg">
-						<Grid container spacing={0} sx={{ flexDirection: { xs: "column", md: "unset" } }}>
+						<Grid container spacing={0} sx={{ flexDirection: { xs: "column", md: "row-reverse" } }}>
 							<Grid item xs={12} md={7}>
 								<Box
 									sx={{
@@ -61,7 +61,8 @@ export default function Landing() {
 												letterSpacing: 1.5,
 												fontWeight: "bold",
 												lineHeight: 1.3,
-												mb: 2
+												mb: 2,
+												textAlign: isRTL ? "right" : "left" // Adjust text alignment based on RTL
 											}}
 										>
 											<Typography
@@ -90,14 +91,19 @@ export default function Landing() {
 										</Typography>
 									</Box>
 									<Box sx={{ mb: 4, width: { xs: "100%", md: "70%" } }}>
-										<Typography sx={{ color: "text.secondary", lineHeight: 1.6 }}>
+										<Typography
+											sx={{
+												color: "text.secondary",
+												lineHeight: 1.6,
+												textAlign: isRTL ? "right" : "left"
+											}}
+										>
 											{t("Landing.landingh2")}
 										</Typography>
 									</Box>
 
-									{/*  */}
+									{/* Buttons */}
 									<Box sx={{ "& button": { mr: 2 } }}>
-										{/*  */}
 										<Button>
 											<GooglePlayButton
 												color="primary"
@@ -108,14 +114,11 @@ export default function Landing() {
 												fontSize={10}
 												className={"custom-style"}
 											/>
-											{/* {t("Landing.Android")} */}
 										</Button>
-										{/*  */}
 										<Button color="primary" variant="outlined">
 											{t("Landing.Desktop")}
 										</Button>
 									</Box>
-									{/*  */}
 								</Box>
 							</Grid>
 							<Grid item xs={12} md={4} my={"auto"} sx={{ position: "relative", marginTop: 4 }}>
@@ -127,7 +130,8 @@ export default function Landing() {
 										width: { md: "100%", xs: "60%", mx: "center" },
 										maxWidth: "80%",
 										height: "auto",
-										transform: "rotate(10deg)"
+										transform: "rotate(10deg)",
+										textAlign: isRTL ? "left" : "right" // Adjust image alignment based on RTL
 									}}
 								/>
 							</Grid>
@@ -170,8 +174,16 @@ export default function Landing() {
 												className="custom-card-img"
 											/>
 											<Card.Body>
-												<Card.Title className="custom-card-title">Card title</Card.Title>
-												<Card.Title className="custom-card-text">
+												<Card.Title
+													className="custom-card-title"
+													style={{ textAlign: isRTL ? "right" : "left" }}
+												>
+													Card title
+												</Card.Title>
+												<Card.Title
+													className="custom-card-text"
+													style={{ textAlign: isRTL ? "right" : "left" }}
+												>
 													{t(`Howitworks.${card.key}`)}
 												</Card.Title>
 											</Card.Body>
@@ -179,6 +191,7 @@ export default function Landing() {
 									</Col>
 								))}
 							</Row>
+
 							{/* Getting Started Button */}
 							<Grid item xs={12}>
 								<motion.div initial="hidden">
@@ -244,32 +257,83 @@ export default function Landing() {
 						</Grid>
 					</Box>
 					{/* ------------------------------------------------------------------------------------ */}
-
+					{/* blog section */}
 					<Container
 						fluid="lg"
 						item
 						xs={12}
 						md={4}
 						my={"auto"}
-						sx={{ position: "relative", marginTop: 4 }}
+						sx={{ position: "relative", marginTop: 4, direction: isRTL ? "rtl" : "ltr" }}
 					>
 						<Typography
 							align="center"
 							variant="h4"
-							sx={{ fontWeight: 700, fontSize: { xs: "25px", md: "33px" }, mb: 2 }}
+							sx={{
+								fontWeight: 700,
+								fontSize: { xs: "25px", md: "33px" },
+								mb: 2,
+								textAlign: isRTL ? "right" : "center"
+							}}
 						>
 							{t("Blog.WhatsNew")}
 						</Typography>
 						<Typography
 							variant="subtitle1"
 							align="center"
-							sx={{ mb: 4, fontSize: { xs: "18px", md: "20px" } }}
+							sx={{
+								mb: 4,
+								fontSize: { xs: "18px", md: "20px" },
+								textAlign: isRTL ? "right" : "center"
+							}}
 						>
 							{t("Blog.WhatsNew")}
 						</Typography>
-						{/* cards */}
+						{/* Blog cards */}
 						<Blog />
 					</Container>
+
+					{/* end of blog section */}
+
+					{/* <Container fluid className="mt-5">
+						<Row className="justify-content-center">
+							<Col xs={12} md={6} lg={4}>
+								<Card>
+									<Card.Img
+										variant="top"
+										src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/logo-new-2.svg"
+										alt="GeeksforGeeks Logo"
+									/>
+									<Card.Body>
+										<Card.Title>JavaScript</Card.Title>
+										<Card.Text>
+											JavaScript is a lightweight, cross-platform, single-threaded, and interpreted
+											compiled programming language. It is also known as the scripting language for
+											webpages. It is well-known for the development of web pages, and many
+											non-browser environments also use it.
+										</Card.Text>
+									</Card.Body>
+								</Card>
+							</Col>
+							<Col xs={12} md={6} lg={4}>
+								<Card>
+									<Card.Img
+										variant="top"
+										src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/logo-new-2.svg"
+										alt="GeeksforGeeks Logo"
+									/>
+									<Card.Body>
+										<Card.Title>React.js</Card.Title>
+										<Card.Text>
+											ReactJS is a declarative, efficient, and flexible JavaScript library for
+											building user interfaces. It is an open-source, component-based front-end
+											library that is responsible only for the view layer of the application.
+										</Card.Text>
+									</Card.Body>
+								</Card>
+							</Col>
+						</Row>
+					</Container> */}
 				</Box>
 			</PageAnimationWrapper>
 		</>

From dd1ea60b6b2bbab4f39173057d9946a1af18abc8 Mon Sep 17 00:00:00 2001
From: mildrette <mildredfonka1@gmail.com>
Date: Thu, 27 Jun 2024 14:51:53 +0100
Subject: [PATCH 3/3] fixed RTL direction issues

---
 src/Components/Nav.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/Components/Nav.js b/src/Components/Nav.js
index 10b3462..29fc9f4 100644
--- a/src/Components/Nav.js
+++ b/src/Components/Nav.js
@@ -78,7 +78,7 @@ export default function BackToTop(props) {
 		<ThemeProvider theme={themeWithDirection}>
 			<React.Fragment>
 				<CssBaseline />
-				<AppBar sx={{ backgroundColor: "white" }}>
+				<AppBar sx={{ backgroundColor: "white" }} dir={direction}>
 					<Toolbar>
 						<Box
 							sx={{
@@ -88,6 +88,7 @@ export default function BackToTop(props) {
 								justifyContent: "space-between",
 								color: "black"
 							}}
+							dir={direction}
 						>
 							<img
 								src="./logo.png"
@@ -106,6 +107,7 @@ export default function BackToTop(props) {
 										<MenuIcon />
 									</IconButton>
 									<Menu
+										dir={direction}
 										id="menu-appbar"
 										anchorEl={anchorEl}
 										anchorOrigin={{
@@ -174,6 +176,7 @@ export default function BackToTop(props) {
 										gap: 2,
 										ml: "auto"
 									}}
+									dir={direction}
 								>
 									<a
 										href="https://smswithoutborders.github.io/docs/tutorials/getting-started/"