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,8 +120,9 @@ export default defineComponent({
   align-items: center;
 
   width: 100%;
+}
 
-  .home_container {
+.home_container {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
@@ -131,9 +134,9 @@ export default defineComponent({
   @media screen and (max-width: 650px) {
     padding: 1em 0.5em;
   }
-  }
+}
 
-  .order_container {
+.order_container {
   width: 100%;
   max-width: 600px;
 
@@ -143,9 +146,9 @@ export default defineComponent({
   @media screen and (max-width: 650px) {
     flex-direction: column;
   }
-  }
+}
 
-  .message_container {
+.message_container {
   padding: 2px;
 
   width: 100%;
@@ -156,9 +159,9 @@ export default defineComponent({
 
   height: 95vh;
   overflow: auto;
-  }
+}
 
-  .message_nav {
+.message_nav {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -166,6 +169,26 @@ export default defineComponent({
   flex-wrap: wrap;
 
   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>