1 files changed, 42 insertions, 0 deletions
diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue
new file mode 100644
index 0000000..9a65711
--- /dev/null
+++ b/src/pages/Dashboard.vue
@@ -0,0 +1,42 @@
+<template>
+    <div class="container-fluid">
+        <div class="row">
+            <div v-if="!$root.isMobile" class="col-12 col-md-5 col-xl-4">
+                <div>
+                    <router-link to="/add" class="btn btn-primary mb-3"><font-awesome-icon icon="plus" /> {{ $t("Add New Monitor") }}</router-link>
+                </div>
+                <MonitorList :scrollbar="true" />
+            </div>
+
+            <div ref="container" class="col-12 col-md-7 col-xl-8 mb-3">
+                <!-- Add :key to disable vue router re-use the same component -->
+                <router-view :key="$route.fullPath" :calculatedHeight="height" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+import MonitorList from "../components/MonitorList.vue";
+
+export default {
+    components: {
+        MonitorList,
+    },
+    data() {
+        return {
+            height: 0
+        };
+    },
+    mounted() {
+        this.height = this.$refs.container.offsetHeight;
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.container-fluid {
+    width: 98%;
+}
+</style>