Added user choice heartbeat bar

src/mixins/theme.js

@@ -4,6 +4,7 @@ export default {
         return {
             system: (window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light",
             userTheme: localStorage.theme,
+            userHeartbeatBar: localStorage.heartbeatBarTheme
         };
     },
 
@@ -13,6 +14,11 @@ export default {
             this.userTheme = "light";
         }
 
+        //Default Heartbeat Bar
+        if (! this.userHeartbeatBar) {
+            this.userHeartbeatBar = "normal";
+        }
+
         document.body.classList.add(this.theme);
         this.updateThemeColorMeta();
     },
@@ -35,6 +41,15 @@ export default {
             document.body.classList.remove(from);
             document.body.classList.add(this.theme);
             this.updateThemeColorMeta();
+        },
+
+        userHeartbeatBar(to, from) {
+            localStorage.heartbeatBarTheme = to;
+        },
+
+        heartbeatBarTheme(to, from) {
+            document.body.classList.remove(from);
+            document.body.classList.add(this.heartbeatBarTheme);
         }
     },
 

src/pages/Dashboard.vue

@@ -13,17 +13,24 @@
 
                     <router-link v-for="(item, index) in sortedMonitorList" :key="index" :to="monitorURL(item.id)" class="item" :class="{ 'disabled': ! item.active }" @click="$root.cancelActiveList">
                         <div class="row">
-                            <div class="col-6 col-md-8 small-padding">
+                            <div class="col-6 col-md-8 small-padding" v-bind:class="{ 'monitorItem': $root.userHeartbeatBar == 'bottom' || $root.userHeartbeatBar == 'none' }">
                                 <div class="info">
                                     <Uptime :monitor="item" type="24" :pill="true" />
                                     {{ item.name }}
                                 </div>
                             </div>
-                            <div class="col-6 col-md-4">
+                            <div class="col-6 col-md-4" v-bind:class="{ 'hideHeartbeatBar': $root.userHeartbeatBar == 'bottom' || $root.userHeartbeatBar == 'none' }">
+                                <HeartbeatBar size="small" :monitor-id="item.id" />
+                            </div>
+                        </div>
+
+                        <div class="row" v-if="$root.userHeartbeatBar == 'bottom'">
+                            <div class="col-12">
                                 <HeartbeatBar size="small" :monitor-id="item.id" />
                             </div>
                         </div>
                     </router-link>
+                    
                 </div>
             </div>
             <div class="col-12 col-md-7 col-xl-8">
@@ -146,4 +153,12 @@ export default {
     }
 }
 
+.hideHeartbeatBar {
+    display: none;
+}
+
+.monitorItem {
+    width: 100%;
+}
+
 </style>

src/pages/Settings.vue

@@ -26,6 +26,22 @@
                         </div>
                     </div>
 
+                    <div class="mb-3">
+                        <label class="form-label">Theme - Heartbeat Bar</label>
+                        <div>
+                            <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
+                                <input id="btncheck4" v-model="$root.userHeartbeatBar" type="radio" class="btn-check" name="heartbeatBarTheme" autocomplete="off" value="normal">
+                                <label class="btn btn-outline-primary" for="btncheck4">Normal</label>
+
+                                <input id="btncheck5" v-model="$root.userHeartbeatBar" type="radio" class="btn-check" name="heartbeatBarTheme" autocomplete="off" value="bottom">
+                                <label class="btn btn-outline-primary" for="btncheck5">Bottom</label>
+
+                                <input id="btncheck6" v-model="$root.userHeartbeatBar" type="radio" class="btn-check" name="heartbeatBarTheme" autocomplete="off" value="none">
+                                <label class="btn btn-outline-primary" for="btncheck6">None</label>
+                            </div>
+                        </div>
+                    </div>
+
                     <div class="mb-3">
                         <label for="timezone" class="form-label">Timezone</label>
                         <select id="timezone" v-model="$root.userTimezone" class="form-select">