feat: zenmode + toggle left, right & header panes

components/realtime/Mqtt.vue

@@ -47,6 +47,7 @@
       </Splitpanes>
     </Pane>
     <Pane
+      v-if="RIGHT_SIDEBAR"
       max-size="30"
       size="25"
       min-size="20"
@@ -108,13 +109,20 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import { Splitpanes, Pane } from "splitpanes"
 import Paho from "paho-mqtt"
 import debounce from "~/helpers/utils/debounce"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
+import { useSetting } from "~/newstore/settings"
 
-export default {
+export default defineComponent({
   components: { Splitpanes, Pane },
+  setup() {
+    return {
+      RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
+    }
+  },
   data() {
     return {
       url: "wss://test.mosquitto.org:8081",
@@ -322,5 +330,5 @@ export default {
       })
     },
   },
-}
+})
 </script>

components/realtime/Socketio.vue

@@ -67,6 +67,7 @@
       </Splitpanes>
     </Pane>
     <Pane
+      v-if="RIGHT_SIDEBAR"
       max-size="30"
       size="25"
       min-size="20"
@@ -134,14 +135,21 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import { Splitpanes, Pane } from "splitpanes"
 import { io as Client } from "socket.io-client"
 import wildcard from "socketio-wildcard"
 import debounce from "~/helpers/utils/debounce"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
+import { useSetting } from "~/newstore/settings"
 
-export default {
+export default defineComponent({
   components: { Splitpanes, Pane },
+  setup() {
+    return {
+      RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
+    }
+  },
   data() {
     return {
       url: "wss://main-daxrc78qyb411dls-gtw.qovery.io",
@@ -317,5 +325,5 @@ export default {
       }
     },
   },
-}
+})
 </script>

components/realtime/Websocket.vue

@@ -138,6 +138,7 @@
       </Splitpanes>
     </Pane>
     <Pane
+      v-if="RIGHT_SIDEBAR"
       max-size="30"
       size="25"
       min-size="20"
@@ -176,14 +177,20 @@
   </Splitpanes>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
 import { Splitpanes, Pane } from "splitpanes"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import debounce from "~/helpers/utils/debounce"
 import "splitpanes/dist/splitpanes.css"
-
-export default {
+import { useSetting } from "~/newstore/settings"
+export default defineComponent({
   components: { Splitpanes, Pane },
+  setup() {
+    return {
+      RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
+    }
+  },
   data() {
     return {
       connectionState: false,
@@ -387,5 +394,5 @@ export default {
       })
     },
   },
-}
+})
 </script>