chore: nav buttons transition

src/App.vue

@@ -52,9 +52,9 @@ export default defineComponent({
 
   methods: {
     init() {
-      this.checkAppVersion();
       this.loadLang();
       this.loadSettings();
+      this.checkAppVersion();
       this.handleQueries();
     },
 

src/views/Home.vue

@@ -109,6 +109,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@use '../styles/colors';
+
 .home {
   min-height: 100vh;
   overflow-x: auto;
@@ -118,6 +120,7 @@ export default defineComponent({
   align-items: center;
 
   width: 100%;
+}
 
 .home_container {
   display: flex;
@@ -167,5 +170,25 @@ export default defineComponent({
 
   margin-bottom: 1.5em;
 }
+
+.message_nav > button {
+  position: relative;
+
+  &::before {
+    position: absolute;
+    content: '';
+    bottom: -3px;
+    left: 0;
+    width: 0;
+    height: 3px;
+
+    transition: all 0.25s;
+
+    background-color: colors.$accentCol;
+  }
+
+  &[data-active='true']::before {
+    width: 100%;
+  }
 }
 </style>