adding latest

src/components/Appbar.vue

@@ -23,21 +23,21 @@
       v-if="!this.$store.getters.fullScreen"
     >
       <v-row>
-        <v-col cols="2"></v-col>
+        <v-spacer></v-spacer>
         <v-col cols="4" class="d-flex justify-start">
           <router-link :to="{ name: 'Home' }" class="routerLink">
-            <v-toolbar-title class="font-weight-bold">
-              Savvy Firebase Tutorial
+            <v-toolbar-title class="title">
+              <p class="mb-0 underline">Savvy Firebase Tutorial</p>
             </v-toolbar-title>
           </router-link>
         </v-col>
         <v-col cols="4" class="d-flex justify-end align-self-center">
           <router-link :to="{ name: 'Login' }" class="routerLink">
-            <span class="mr-3">Sign In</span>
+            <p class="mr-3 mb-0 underline">Sign In</p>
           </router-link>
-          <span class="mr-3">Register</span>
+          <p class="mb-0 underline">Register</p>
         </v-col>
-        <v-col cols="2"></v-col>
+        <v-spacer></v-spacer>
       </v-row>
     </v-app-bar>
   </div>
@@ -50,12 +50,27 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-// .appTitle {
-//   // font-family: $gilroy-bold;
-// }
-
 .routerLink {
   text-decoration: none;
   color: $mainColor;
 }
+.underline {
+  position: relative;
+}
+.underline::after {
+  position: absolute;
+  content: "";
+  height: 0.1em;
+  top: 100%;
+  background: currentColor;
+  z-index: -1;
+  left: 0;
+  right: 0;
+  transform: scaleX(0);
+  transition: transform 0.5s cubic-bezier(0.95, 0.05, 0.795, 0.035);
+}
+.underline:hover::after {
+  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+  transform: scaleX(1);
+}
 </style>