adding latest

src/App.vue

@@ -3,7 +3,6 @@
     <v-app :style="{ background: $vuetify.theme.themes.light.background }">
       <v-content>
         <Appbar></Appbar>
-        <!-- <vue-page-transition name="fade-in-right"> -->
         <vue-page-transition name="fade">
           <router-view></router-view>
         </vue-page-transition>
@@ -15,9 +14,31 @@
 
 <script>
 import Appbar from "@/components/Appbar";
+import Welcome from "./views/stripe-appbar/Welcome";
+import WelcomeSecondary from "./views/stripe-appbar/WelcomeSecondary";
+import Random from "./views/stripe-appbar/Random"
+
 export default {
   name: "App",
-  components: { Appbar }
+  components: { Appbar },
+  data() {
+    return {
+      menu: [
+        {
+          title: "Welcome",
+          dropdown: "welcome",
+          content: Welcome,
+          secondary: WelcomeSecondary,
+          element: "span"
+        },
+        {
+          title: "Random",
+          dropdown: "random",
+          content: Random
+        }
+      ]
+    };
+  }
 };
 </script>
 
@@ -26,4 +47,11 @@ export default {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+.content {
+  padding: 20px;
+}
+.content--secondary {
+  padding: 20px;
+}
 </style>

src/components/Appbar.vue

@@ -9,43 +9,29 @@
     >
       <v-row>
         <v-spacer></v-spacer>
-        <v-col cols="4" class="d-flex justify-start align-content-center">
+        <v-col
+          cols="4"
+          class="d-flex justify-start align-center 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"
+        <v-col cols="4" class="d-flex justify-end">
+          <vsm-menu
+            ref="header"
+            :menu="menu"
+            :screen-offset="250"
+            :base-width="380"
+            :base-height="400"
           >
-            <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>
+            <template #default="data">
+              <component :is="data.item.content" class="content" />
+              <component :is="data.item.secondary" class="content--secondary" />
+            </template>
+          </vsm-menu>
         </v-col>
         <v-spacer></v-spacer>
       </v-row>
@@ -54,8 +40,37 @@
 </template>
 
 <script>
+import Welcome from "../views/stripe-appbar/Welcome";
+import WelcomeSecondary from "../views/stripe-appbar/WelcomeSecondary";
+import Random from "../views/stripe-appbar/Random";
+
 export default {
-  name: "Appbar"
+  name: "Appbar",
+  data() {
+    return {
+      menu: [
+        {
+          title: "Welcome",
+          dropdown: "welcome",
+          content: Welcome,
+          secondary: WelcomeSecondary
+        },
+        {
+          title: "Random",
+          dropdown: "random",
+          content: Random
+        }
+      ]
+    };
+  },
+  methods: {
+    onOpenDropdown() {
+      console.log("onOpenDropdown");
+    },
+    onCloseDropdown() {
+      console.log("onCloseDropdown");
+    }
+  }
 };
 </script>
 

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>

src/components/StripeAppbar.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script>
+    export default {
+
+    }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/stripe-appbar/Random.vue

@@ -0,0 +1,28 @@
+<template>
+  <v-container style="width: 300px; height: 300px;">
+    <v-row>
+      <v-col>
+        <v-card flat>
+          <p class="ma-0 pa-0 headline">Random Content</p>
+          Random content that doesn't fit.
+        </v-card>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col>
+        <v-card flat>
+          <ul>
+            <li>Item one</li>
+            <li>Item two</li>
+          </ul>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped></style>

src/views/stripe-appbar/Welcome.vue

@@ -0,0 +1,21 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col>
+        <v-card flat class="ma-0 pa-0">
+          <p class="headline">Welcome Pages</p>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.centre-text {
+  text-align: center;
+}
+</style>

src/views/stripe-appbar/WelcomeSecondary.vue

@@ -0,0 +1,19 @@
+<template>
+<v-container>
+    <v-row>
+        <v-col style="width: 300px;">
+            Welcome Secondary Content
+        </v-col>
+    </v-row>
+</v-container>
+</template>
+
+<script>
+    export default {
+
+    }
+</script>
+
+<style lang="scss" scoped>
+
+</style>