updating header menu while loggin (show base link)

web/themes/custom/materiotheme/vuejs/components/Content/HeaderMenu.vue

@@ -0,0 +1,79 @@
+<script>
+
+import Vue from 'vue'
+
+import { mapState, mapActions } from 'vuex'
+
+import { MA } from 'vuejs/api/ma-axios'
+import router from 'vuejs/route'
+
+export default {
+  router,
+  props:['id','dom_html'],
+  data() {
+    return {
+      html: null,
+      template: null
+    }
+  },
+  computed: {
+    ...mapState({
+      isloggedin: state => state.User.isloggedin
+    })
+  },
+  beforeMount() {
+    // console.log("beforeMount header_menu", this.html);
+    if(!this.template){
+      // console.log('no home_template');
+      if(this.dom_html){ // if html prop is available
+        this.html = this.dom_html
+        this.compileTemplate()
+      }else{ // else get it from ajax
+        this.getMenuBlockHtml()
+      }
+    }
+  },
+  methods: {
+    compileTemplate(){
+      this.template = Vue.compile(this.html)
+    },
+    getMenuBlockHtml(){
+      MA.get('materio_decoupled/ajax/getheadermenu')
+        .then(({data}) => {
+          // console.log('HeaderMenu getMenuBlockHtml data', data);
+          this.html = data.rendered // record the html src into data
+        })
+        .catch(( error ) => {
+          console.warn('Issue with getMenuBlockHtml', error)
+        })
+    },
+    onclick (event) {
+      // console.log("Clicked on header menu link", event);
+      const href = event.target.getAttribute('href')
+      this.$router.push(href)
+    }
+  },
+  render(h) {
+    // console.log('headerMenu render');
+    if(!this.template){
+      return h('span', 'Loading ...')
+    }else{
+      return this.template.render.call(this)
+    }
+  },
+  watch: {
+    html(n, o) {
+      console.log('header_menu html changed', o, n)
+      this.compileTemplate()
+    },
+    isloggedin(n, o) {
+      console.log("HeaderMenu isloggedin changed", o, n)
+      this.getMenuBlockHtml()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>