adding latest

src/components/Appbar.vue

@@ -6,6 +6,7 @@
       hide-on-scroll
       color="rgba(93.3%, 93.3%, 93.3%, 0.5)"
       v-if="!this.$store.getters.fullScreen"
+      style="z-index: 15;"
     >
       <v-row>
         <v-spacer></v-spacer>
@@ -19,11 +20,11 @@
             </v-toolbar-title>
           </router-link>
         </v-col>
-        <v-col cols="4" class="d-flex justify-end">
+        <v-col cols="4" class="d-flex justify-end align-center">
           <vsm-menu
             ref="header"
             :menu="menu"
-            :screen-offset="250"
+            :screen-offset="25"
             :base-width="380"
             :base-height="400"
           >
@@ -31,6 +32,21 @@
               <component :is="data.item.content" class="content" />
               <component :is="data.item.secondary" class="content--secondary" />
             </template>
+            <template
+              #title="data"
+              class="ma-0 pa-0"
+              style="margin-bottom: -20px;"
+            >
+              <router-link
+                :to="data.item.routerLink"
+                v-if="data.item.routerLink"
+                style="padding-bottom: -20px;"
+              >
+                <p class="ma-0 pa-0 underline routerLink">
+                  {{ data.item.title }}
+                </p>
+              </router-link>
+            </template>
           </vsm-menu>
         </v-col>
         <v-spacer></v-spacer>
@@ -59,17 +75,17 @@ export default {
           title: "Random",
           dropdown: "random",
           content: Random
+        },
+        {
+          title: "Triangle",
+          routerLink: { name: "Triangle" }
+        },
+        {
+          title: "Playground",
+          routerLink: { name: "Playground" }
         }
       ]
     };
-  },
-  methods: {
-    onOpenDropdown() {
-      console.log("onOpenDropdown");
-    },
-    onCloseDropdown() {
-      console.log("onCloseDropdown");
-    }
   }
 };
 </script>

src/main.js

@@ -12,7 +12,8 @@ import AOS from "aos";
 import "aos/dist/aos.css";
 // Stripe Appbar Menu
 import VueStripeMenu from "vue-stripe-menu";
-import "vue-stripe-menu/dist/vue-stripe-menu.css";
+// import "vue-stripe-menu/dist/vue-stripe-menu.css";
+import "./scss/appbar.scss"
 
 Vue.config.productionTip = false;
 Vue.component("video-background", VideoBackground);

src/scss/appbar.scss

@@ -0,0 +1,10 @@
+@import "../scss/_variables.scss";
+
+$vsm-menu-link-height: 35px !default;
+$vsm-color: $mainColor !default;
+$vsm-color-hover: $mainColor !default;
+$vsm-media: 768px !default;
+$vsm-menu-border-radius: 15px !default;
+$vsm-menu-transform-content: 150px !default;
+
+@import "~vue-stripe-menu/src/scss/index";

src/views/Playground.vue

@@ -9,7 +9,7 @@
       <v-container
         fill-height
         class="d-flex align-center"
-        style="position: relative; z-index: 10;"
+        style="position: static; z-index: 10;"
       >
         <v-row>
           <v-col class="d-flex justify-center">

temp.md

@@ -289,3 +289,19 @@ To control the width, you should set the `width` in the css in the components th
 
 To have two menu content sections top and bottom: use `content` and `secondary`.
 To have two menu content sections side by side: create the full layout in the Vue component.
+
+        <vsm-menu ref="header" :menu="menu" :screen-offset="25">
+          <template #default="data">
+            <component :is="data.item.content" class="content" />
+            <component :is="data.item.secondary" class="content--secondary" />
+          </template>
+        </vsm-menu>
+
+Tried inserting the appbar natively into App.vue not as a component
+Doesn't seem to like it when you move mouse into a `<router-view>`
+Try: Inserting appbar into each page component.
+
+Doesn't like `d-flex` on the parent
+Doesn't like anything before (use slots?)
+
+Likes being in a `<v-row>`