feat: use navigator language to define rtl or ltr

src/App.vue

@@ -1,24 +1,23 @@
 <template>
-  <div>
-
+  <div :dir="dir">
     <Menu />
     <sui-segment attached="bottom">
       <router-view />
     </sui-segment>
-
   </div>
 </template>
 
 <script>
-
 import Menu from "./components/Menu";
 
 export default {
   name: "app",
   components: { Menu },
   data: function() {
-    return {};
-  }
+    var userLang = navigator.language || navigator.userLanguage;
+
+    return { dir: ["he", "ar"].includes(userLang) ? "rtl" : "ltr" };
+  },
 };
 </script>
 
@@ -28,6 +27,6 @@ export default {
 }
 
 .segment {
-  border: none!important;
+  border: none !important;
 }
 </style>

src/components/Menu.vue

@@ -34,7 +34,7 @@
       {{ item.label }}
     </router-link>
 
-    <sui-menu-menu position="right">
+    <sui-menu-menu style="margin-inline-start: auto;">
       <sui-menu-item v-on:click="openHelper" class="helpButton">
         <sui-icon name="help" />
       </sui-menu-item>
@@ -51,7 +51,7 @@ const intialSettings = localSettings.fetch();
 localSettings.update("tuto-done", true);
 
 export default {
-  data: function () {
+  data: function() {
     return {
       menu: [
         { label: this.$t("menu.games") },
@@ -68,17 +68,17 @@ export default {
   },
   components: { Helper },
   computed: {
-    menuItems: function () {
+    menuItems: function() {
       return this.menu.filter((item) => {
         return item.to;
       });
     },
   },
   methods: {
-    closeHelper: function () {
+    closeHelper: function() {
       this.helperIsOpen = false;
     },
-    openHelper: function () {
+    openHelper: function() {
       this.helperIsOpen = true;
     },
   },