adding latest

src/components/AppbarOld.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <v-app-bar
+      flat
+      app
+      hide-on-scroll
+      color="rgba(93.3%, 93.3%, 93.3%, 0.5)"
+      v-if="!this.$store.getters.fullScreen"
+    >
+      <v-row>
+        <v-spacer></v-spacer>
+        <v-col cols="4" class="d-flex justify-start align-content-center">
+          <router-link :to="{ name: 'Home' }" class="routerLink">
+            <v-toolbar-title class="title">
+              <p class="mb-0">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: 'Playground' }"
+            class="routerLink ma-0 pr-2"
+          >
+            <p class="mb-0 underline">
+              Playground
+            </p>
+          </router-link>
+          <router-link
+            :to="{ name: 'Backgrounds' }"
+            class="routerLink ma-0 pr-2"
+          >
+            <p class="mb-0 underline">
+              Backgrounds
+            </p>
+          </router-link>
+          <router-link :to="{ name: 'Triangle' }" class="routerLink ma-0 pr-2">
+            <p class="mb-0 underline">
+              Triangle
+            </p>
+          </router-link>
+          <router-link :to="{ name: 'Login' }" class="routerLink ma-0 pr-2">
+            <p class=" mb-0 underline">
+              Sign In
+            </p>
+          </router-link>
+          <router-link :to="{ name: 'Login' }" class="routerLink ma-0">
+            <p class="mb-0 underline">Register</p>
+          </router-link>
+        </v-col>
+        <v-spacer></v-spacer>
+      </v-row>
+    </v-app-bar>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Appbar"
+};
+</script>
+
+<style lang="scss" scoped>
+.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) 50ms;
+}
+.underline:hover::after {
+  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+  transform: scaleX(1);
+}
+</style>