From 65fe250180e7ef4778459783c75d0ad35f9858d6 Mon Sep 17 00:00:00 2001
From: Alexandre Fauquette <alex.fauquette@gmail.com>
Date: Sat, 11 Sep 2021 12:29:20 +0200
Subject: [PATCH] use navigator langgage to define rtl or ltr

---
 src/App.vue             | 13 ++++++-------
 src/components/Menu.vue | 10 +++++-----
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f84e4b30..e8545839 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index 5e9e48b8..bc85d3e9 100644
--- a/src/components/Menu.vue
+++ b/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;
     },
   },