updating header menu while loggin (show base link)

web/modules/custom/materio_decoupled/materio_decoupled.routing.yml

@@ -5,3 +5,11 @@ materio_decoupled.path_translation_links:
     _title: 'Path translation links'
   requirements:
     _permission: 'access content'
+
+materio_decoupled.header_menu_block:
+  path: 'materio_decoupled/ajax/getheadermenu'
+  defaults:
+    _controller: '\Drupal\materio_decoupled\Controller\AjaxHeaderMenuBlock::getBlock'
+    _title: 'Header Menu'
+  requirements:
+    _permission: 'access content'

web/modules/custom/materio_decoupled/src/Controller/AjaxHeaderMenuBlock.php

@@ -0,0 +1,54 @@
+<?php
+
+namespace Drupal\materio_decoupled\Controller;
+
+use Drupal\Core\Controller\ControllerBase;
+use Symfony\Component\HttpFoundation\Request;
+use Drupal\block\Entity\Block;
+use Symfony\Component\HttpFoundation\JsonResponse;
+// use Drupal\Core\Cache\CacheableJsonResponse;
+// use Drupal\Core\Cache\CacheableMetadata;
+// use Drupal\core\render\RenderContext;
+
+
+/**
+ * Defines a route controller.
+ */
+class AjaxHeaderMenuBlock extends ControllerBase {
+
+  private function getBlockDefinition(){
+    // $language = \Drupal::languageManager()->getCurrentLanguage()->getId();
+    // \Drupal::logger('materio_user')->notice($language);
+    $this->bid = "header";
+    $this->block = Block::load($this->bid);
+    $this->block_builded = \Drupal::entityManager()->getViewBuilder('block')->view($this->block);
+  }
+
+  /**
+   * Handler for getBlock request.
+   */
+  public function getBlock(Request $request) {
+
+    $this->getBlockDefinition();
+
+    $rendered = \Drupal::service('renderer')->renderRoot($this->block_builded);
+    $data = [
+      'rendered' => $rendered,
+      // '#cache' => [
+      //   'max-age' => \Drupal\Core\Cache\Cache::PERMANENT,
+      //   'tags' => [
+      //     'materio_sapi-search_form-cache',
+      //   ]
+      // ]
+    ];
+
+    $response = new JsonResponse();
+    $response->setData($data);
+    // $response = new CacheableJsonResponse($data);
+    // $response->addCacheableDependency(CacheableMetadata::createFromRenderArray($data));
+
+    return $response;
+  }
+
+
+}

web/themes/custom/materiotheme/assets/scripts/main.js

@@ -38,6 +38,7 @@ import VUserBlock from 'vuejs/components/Block/UserBlock'
 import VMainContent from 'vuejs/components/Content/MainContent'
 import VSearchBlock from 'vuejs/components/Block/SearchBlock'
 import VLeftContent from 'vuejs/components/Content/LeftContent'
+import VHeaderMenu from 'vuejs/components/Content/HeaderMenu'
 
 import { mapState } from 'vuex'
 
@@ -287,30 +288,16 @@ import { MA } from 'vuejs/api/ma-axios'
 
     function initVHeaderMenu () {
       // console.log('initVHeaderMenu');
-      // adding vuejs attributes has it wont work on twig template (see menu--header.html.twig)
-      // not working : String contains an invalid character
-      // document.querySelectorAll(`#block-header a`).forEach(link => {
-      //   console.log(link);
-      //   link.setAttribute('@click.prevent', 'onclick')
-      // });
-
+      const id = 'block-header'
+      const $html_obj = document.querySelector('#' + id)
+      // console.log('main-content', $main_content);
+      const html = $html_obj.outerHTML
       _v_header_menu = new Vue({
         store,
         i18n,
         router,
-        el: '#block-header',
-        methods: {
-          onclick (event) {
-            // console.log("Clicked on header menu link", event);
-            const href = event.target.getAttribute('href')
-            // let title = event.target.innerText;
-            // console.log("Clicked on header menu link : href", href);
-            this.$router.push(href)
-            // replaced by router.beforeEach
-            // this.$store.commit('Common/setPagetitle', title)
-          }
-        }
-      })
+        render: h => h(VHeaderMenu, { props: { id: id, dom_html: html } })
+      }).$mount('#' + id)
     }
 
     function initVMainContent () {

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>