started to implement blabla : menu block, link vuejsed, route, component

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

@@ -28,7 +28,9 @@ import 'theme/assets/styles/main.scss'
 
   var MaterioTheme = function(){
 
-    var _v_sitebranding_block, _v_pagetitle_block, _v_user_block, _v_main_content, _v_search_block;
+    var _v_sitebranding_block, _v_user_block, _v_header_menu
+      , _v_pagetitle_block, _v_search_block
+      , _v_main_content;
     var _is_front = drupalSettings.path.isFront;
 
     console.log('drupalSettings', drupalSettings);
@@ -43,13 +45,29 @@ import 'theme/assets/styles/main.scss'
     }
 
     function initVues(){
+      initVRouter();
       initVSiteBrandingBlock()
       initVPagetitleBlock()
       initVUserBlock()
+      initVHeaderMenu()
       initVMainContent()
       initVSearchBlock()
     }
 
+    function initVRouter(){
+      // we need this to update the title while using history nav
+      router.beforeEach((to, from, next) => {
+
+        // console.log('router beforeEach');
+        // console.log(to);
+        // console.log(from);
+        // console.log(next);
+
+        store.commit('Common/setPagetitle', to.name)
+        next();
+      })
+    }
+
     function initVSiteBrandingBlock(){
       _v_sitebranding_block = new Vue({
         store,
@@ -61,7 +79,8 @@ import 'theme/assets/styles/main.scss'
             let href = event.target.getAttribute('href');
             // console.log("Clicked on logo href", href);
             this.$router.push(href)
-            this.$store.commit('Common/setPagetitle', null)
+            // replaced by router.beforeEach
+            // this.$store.commit('Common/setPagetitle', null)
           }
         }
       })
@@ -127,6 +146,33 @@ import 'theme/assets/styles/main.scss'
       // console.log('initVUserBlock', _v_user_block);
     }
 
+    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')
+      // });
+
+      _v_header_menu = new Vue({
+        store,
+        router,
+        el: `#block-header`,
+        methods: {
+          onclick(event){
+            // console.log("Clicked on header menu link", event);
+            let 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)
+          }
+        }
+      })
+    }
+
     function initVMainContent(){
       let id = "main-content"
       let $main_content = document.querySelector('#'+id)
@@ -136,7 +182,6 @@ import 'theme/assets/styles/main.scss'
         store,
         render: h => h(VMainContent, {props:{id:id, html:main_html, isfront:drupalSettings.path.isFront}})
       }).$mount('#'+id)
-      // console.log('initTestVContent', v_test_content);
     }
 
     function initVSearchBlock(){