diff --git a/src/components/Appbar.vue b/src/components/Appbar.vue index 6897969..a809847 100644 --- a/src/components/Appbar.vue +++ b/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;" > @@ -19,11 +20,11 @@ - + @@ -31,6 +32,21 @@ + @@ -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"); - } } }; diff --git a/src/main.js b/src/main.js index 34c5b26..d323578 100644 --- a/src/main.js +++ b/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); diff --git a/src/scss/variables.scss b/src/scss/_variables.scss similarity index 100% rename from src/scss/variables.scss rename to src/scss/_variables.scss diff --git a/src/scss/appbar.scss b/src/scss/appbar.scss new file mode 100644 index 0000000..fd51a88 --- /dev/null +++ b/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"; diff --git a/src/views/Playground.vue b/src/views/Playground.vue index 68af380..8b64893 100644 --- a/src/views/Playground.vue +++ b/src/views/Playground.vue @@ -9,7 +9,7 @@ diff --git a/temp.md b/temp.md index 15073df..5be111e 100644 --- a/temp.md +++ b/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. + + + + + +Tried inserting the appbar natively into App.vue not as a component +Doesn't seem to like it when you move mouse into a `` +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 ``