diff --git a/frontend/src/app/components/menu/menu.component.scss b/frontend/src/app/components/menu/menu.component.scss
index 8a2e55c20..fe5e74ff9 100644
--- a/frontend/src/app/components/menu/menu.component.scss
+++ b/frontend/src/app/components/menu/menu.component.scss
@@ -5,8 +5,7 @@
   height: calc(100vh - 65px);
   position: absolute;
   top: 65px;
-  left: -250px;
-  transition: left 0.25s;
+  transition: 0.25s;
   box-shadow: 5px 0px 30px 0px #000;
   padding-bottom: 20px;
   @media (max-width: 613px) {
@@ -14,6 +13,14 @@
   }
 }
 
+:host-context(.ltr-layout) .sidenav {
+  left: -250px;
+}
+
+:host-context(.rtl-layout) .sidenav {
+  right: -250px;
+}
+
 .ellipsis {
   display: block;
   overflow: hidden;
@@ -26,11 +33,18 @@
 }
 
 .sidenav.open {
-  left: 0px;
   display: block;
   background-color: #1d1f31;
 }
 
+:host-context(.ltr-layout) .sidenav.open {
+  left: 0;
+}
+
+:host-context(.rtl-layout) .sidenav.open {
+  right: 0;
+}
+
 .sidenav a, button{
   text-decoration: none;
   color: lightgray;