feat(model): make model fullscreen with sidenav controls

src/components/Model.vue

@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <div ref="armWrapper" class="__armWrapper" />
-  </div>
+  <div ref="armWrapper" class="__armWrapper" />
 </template>
 
 <script lang="ts">
@@ -45,16 +43,11 @@ export default class Model extends ArmMixin {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
 .__armWrapper {
-  width: 100%;
-  height: 240px;
-  margin: 0 auto;
-}
-
-/* Large devices (desktops, 992px and up) */
-@media (min-width: 992px) {
-  .__armWrapper {
-    height: 480px;
-    width: 40vw;
-  }
+  z-index: -999;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
 }
 </style>

src/components/RangeSliders.vue

@@ -25,8 +25,8 @@
 </template>
 
 <script lang="ts">
+import { Joint } from '@/assets/joints'
 import ArmMixin from '@/mixins/ArmMixin.vue'
-import { Joint } from '@/store'
 import { Component, Emit, Prop } from 'vue-property-decorator'
 
 @Component

src/components/Sidebar.vue

@@ -0,0 +1,70 @@
+<template>
+  <b-sidebar
+    id="sidebar-footer"
+    title="Big Robot Arm UI"
+    shadow
+    right
+    width="40vw"
+  >
+    <template #footer>
+      <div class="d-flex justify-content-end px-3 py-3">
+        <b-button variant="danger" @click="disconnect()"
+          ><fa-icon icon="fa-solid fa-ban" />&nbsp;Disconnect</b-button
+        >
+      </div>
+    </template>
+    <b-tabs pills fill card>
+      <b-tab class="my-3">
+        <template #title>
+          <fa-icon icon="fa-solid fa-terminal" />
+        </template>
+        <b-card-text><Terminal /></b-card-text>
+      </b-tab>
+      <b-tab class="my-3">
+        <template #title>
+          <fa-icon icon="fa-solid fa-gamepad" />
+        </template>
+        <ManualControl />
+      </b-tab>
+      <b-tab class="my-3">
+        <template #title>
+          <fa-icon icon="fa-solid fa-sliders" />
+        </template>
+        <Sequences />
+      </b-tab>
+      <b-tab class="my-3">
+        <template #title>
+          <fa-icon icon="fa-solid fa-square-plus" />
+        </template>
+        <RecordCommands />
+      </b-tab>
+    </b-tabs>
+  </b-sidebar>
+</template>
+
+<script lang="ts">
+import ManualControl from '@/components/ManualControl.vue'
+import RecordCommands from '@/components/RecordCommands.vue'
+import Sequences from '@/components/Sequences.vue'
+import Terminal from '@/components/Terminal.vue'
+import { WebsocketMessage } from '@/constants/WebsocketMessage'
+import ws from '@/shared'
+import { Vue, Component } from 'vue-property-decorator'
+
+@Component({
+  components: {
+    ManualControl,
+    Terminal,
+    Sequences,
+    RecordCommands
+  }
+})
+export default class Sidebar extends Vue {
+  disconnect() {
+    ws.send(WebsocketMessage.WS_DISCONNECT)
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss"></style>

src/plugins/icons.ts

@@ -24,7 +24,8 @@ import {
   faTerminal,
   faGamepad,
   faSliders,
-  faSquarePlus
+  faSquarePlus,
+  faBars
 } from '@fortawesome/free-solid-svg-icons'
 import { faAmazon } from '@fortawesome/free-brands-svg-icons'
 import { faClock } from '@fortawesome/free-regular-svg-icons'
@@ -49,7 +50,8 @@ library.add(
   faTerminal,
   faGamepad,
   faSliders,
-  faSquarePlus
+  faSquarePlus,
+  faBars
 )
 
 /* add font awesome icon component */

src/views/Main.vue

@@ -1,73 +1,34 @@
 <template>
-  <b-container fluid class="text-center my-auto" style="height: 100%">
+  <b-container fluid class="text-center my-auto">
     <Connect />
-    <div v-if="isConnected" class="pt-4">
-      <h1>Big Robot Arm UI</h1>
-      <b-button variant="danger" @click="disconnect()" class="mb-4"
-        ><fa-icon icon="fa-solid fa-ban" />&nbsp;Disconnect</b-button
-      >
-      <b-row>
-        <b-col class="p-lg-5 mb-4" md="12" lg="6">
-          <Model />
-        </b-col>
-        <b-col class="p-lg-5" md="12" lg="6">
-          <b-card>
-            <b-tabs pills fill>
-              <b-tab class="my-3">
-                <template #title>
-                  <fa-icon icon="fa-solid fa-terminal" />
-                </template>
-                <Terminal />
-              </b-tab>
-              <b-tab class="my-3">
-                <template #title>
-                  <fa-icon icon="fa-solid fa-gamepad" />
-                </template>
-                <ManualControl />
-              </b-tab>
-              <b-tab class="my-3">
-                <template #title>
-                  <fa-icon icon="fa-solid fa-sliders" />
-                </template>
-                <Sequences />
-              </b-tab>
-              <b-tab class="my-3">
-                <template #title>
-                  <fa-icon icon="fa-solid fa-square-plus" />
-                </template>
-                <RecordCommands />
-              </b-tab>
-            </b-tabs>
-          </b-card>
-        </b-col>
-      </b-row>
+
+    <div v-if="isConnected" class="__background">
+      <Model />
+      <Sidebar v-if="isConnected" />
+      <div class="text-right m-3">
+        <b-button v-b-toggle.sidebar-footer size="lg">
+          <fa-icon icon="fa-solid fa-bars" />
+        </b-button>
+      </div>
     </div>
   </b-container>
 </template>
 
 <script lang="ts">
-import ManualControl from '@/components/ManualControl.vue'
-import Model from '@/components/Model.vue'
-import RecordCommands from '@/components/RecordCommands.vue'
-import Sequences from '@/components/Sequences.vue'
-import Terminal from '@/components/Terminal.vue'
 import Connect from '@/components/Connect.vue'
+import Model from '@/components/Model.vue'
+import Sidebar from '@/components/Sidebar.vue'
 import { SerialMessage } from '@/constants/SerialMessage'
 import { EventType } from '@/constants/types/EventType'
-import { WebsocketMessage } from '@/constants/WebsocketMessage'
+import eb from '@/EventBus'
 import ArmMixin from '@/mixins/ArmMixin.vue'
-import ws from '@/shared'
 import { Component } from 'vue-property-decorator'
-import eb from '@/EventBus'
 
 @Component({
   components: {
-    ManualControl,
-    Terminal,
-    Sequences,
     Model,
-    RecordCommands,
-    Connect
+    Connect,
+    Sidebar
   }
 })
 export default class Main extends ArmMixin {
@@ -79,10 +40,6 @@ export default class Main extends ArmMixin {
     eb.on(EventType.WS_MESSAGE_RECEIVED, message => this.handleMessage(message))
   }
 
-  disconnect() {
-    ws.send(WebsocketMessage.WS_DISCONNECT)
-  }
-
   handleMessage(message: string) {
     console.log('Response from server: ', message)
 
@@ -138,4 +95,13 @@ export default class Main extends ArmMixin {
 }
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.__background {
+  z-index: 0;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+</style>