check update

src/assets/app.scss

@@ -72,7 +72,13 @@ h2 {
     }
 }
 
+.btn-info {
+    color: white;
 
+    &:hover, &:active, &:focus, &.active {
+        color: white;
+    }
+}
 
 // Dark Theme override here
 .dark {
@@ -99,6 +105,10 @@ h2 {
     .table,
     .nav-link {
         color: $dark-font-color;
+
+        &.btn-info {
+            color: white;
+        }
     }
 
     .form-control,

src/icon.js

@@ -1,10 +1,10 @@
 import { library } from "@fortawesome/fontawesome-svg-core"
-import { faCog, faEdit, faList, faPause, faPlay, faPlus, faTachometerAlt, faTrash } from "@fortawesome/free-solid-svg-icons"
+import { faCog, faEdit, faPlus, faPause, faPlay, faTachometerAlt, faTrash, faList, faArrowAltCircleUp } from "@fortawesome/free-solid-svg-icons"
 //import { fa } from '@fortawesome/free-regular-svg-icons'
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"
 
 // Add Free Font Awesome Icons here
 // https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=solid&m=free
-library.add(faCog, faTachometerAlt, faEdit, faPlus, faPause, faPlay, faTrash, faList)
+library.add(faCog, faEdit, faPlus, faPause, faPlay, faTachometerAlt, faTrash, faList, faArrowAltCircleUp);
 
 export { FontAwesomeIcon }

src/layouts/Layout.vue

@@ -13,6 +13,10 @@
                 <span class="fs-4 title">Uptime Kuma</span>
             </router-link>
 
+            <a v-if="hasNewVersion" target="_blank" href="https://github.com/louislam/uptime-kuma/releases" class="btn btn-info me-3">
+                <font-awesome-icon icon="arrow-alt-circle-up" /> New Update
+            </a>
+
             <ul class="nav nav-pills">
                 <li class="nav-item">
                     <router-link to="/dashboard" class="nav-link">
@@ -77,6 +81,7 @@
 
 <script>
 import Login from "../components/Login.vue";
+import compareVersions from "compare-versions";
 
 export default {
 
@@ -96,7 +101,15 @@ export default {
             classes[this.$root.theme] = true;
             classes["mobile"] = this.$root.isMobile;
             return classes;
-        }
+        },
+
+        hasNewVersion() {
+            if (this.$root.info.latestVersion && this.$root.info.version) {
+                return compareVersions(this.$root.info.latestVersion, this.$root.info.version) >= 1;
+            } else {
+                return false;
+            }
+        },
 
     },