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(){

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -117,6 +117,18 @@ header[role="banner"]{
     }
   }
 
+  #block-header{
+    margin-right: 1em;
+    padding-left: 1em;
+    border-left: 1px solid #000;
+    ul.menu{
+      margin:0;
+      li{
+        padding:0;
+      }
+    }
+  }
+
   #block-languageswitcher{
     text-align: right;
     h2{

web/themes/custom/materiotheme/templates/menu/menu--header.html.twig

@@ -0,0 +1,58 @@
+{#
+/**
+ * @file
+ * Theme override to display a menu.
+ *
+ * Available variables:
+ * - menu_name: The machine name of the menu.
+ * - items: A nested list of menu items. Each menu item contains:
+ *   - attributes: HTML attributes for the menu item.
+ *   - below: The menu item child items.
+ *   - title: The menu link title.
+ *   - url: The menu link url, instance of \Drupal\Core\Url
+ *   - localized_options: Menu link localized options.
+ *   - is_expanded: TRUE if the link has visible children within the current
+ *     menu tree.
+ *   - is_collapsed: TRUE if the link has children within the current menu tree
+ *     that are not currently visible.
+ *   - in_active_trail: TRUE if the link is in the active trail.
+ */
+#}
+{% import _self as menus %}
+
+{#
+  We call a macro which calls itself to render the full tree.
+  @see https://twig.symfony.com/doc/1.x/tags/macro.html
+#}
+{{ menus.menu_links(items, attributes, 0) }}
+
+{% macro menu_links(items, attributes, menu_level) %}
+  {% import _self as menus %}
+  {% if items %}
+    {% if menu_level == 0 %}
+      <ul{{ attributes.addClass('menu') }}>
+    {% else %}
+      <ul class="menu">
+    {% endif %}
+    {% for item in items %}
+      {%
+        set classes = [
+          'menu-item',
+          item.is_expanded ? 'menu-item--expanded',
+          item.is_collapsed ? 'menu-item--collapsed',
+          item.in_active_trail ? 'menu-item--active-trail',
+        ]
+      %}
+      <li{{ item.attributes.addClass(classes) }}>
+        {# this does not work because of the '@' #}
+        {# we have to do it via js | not working neither #}
+        {#{{ link(item.title, item.url, {'@click.prevent':['onclick']}) }}#}
+        <a href="{{ item.url }}" @click.prevent='onclick'>{{ item.title }}</a>
+        {% if item.below %}
+          {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
+        {% endif %}
+      </li>
+    {% endfor %}
+    </ul>
+  {% endif %}
+{% endmacro %}

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

@@ -0,0 +1,19 @@
+<template>
+  <div id="blabla">
+    <h1>Blabla</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Blabla",
+  data: () => ({
+
+  }),
+  beforeMount(){
+
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>

web/themes/custom/materiotheme/vuejs/route/index.js

@@ -3,6 +3,7 @@ import VueRouter from 'vue-router'
 
 import Home from 'vuejs/components/Content/Home'
 import Base from 'vuejs/components/Content/Base'
+import Blabla from 'vuejs/components/Content/Blabla'
 
 Vue.use(VueRouter)
 
@@ -36,6 +37,16 @@ const routes = [
     //   'base': Base
     // }
   },
+  {
+    name:'blabla',
+    path: `${basePath}blabla`,
+    // path: `/base`,
+    // alias: (() => languages.map(l => `/${l}/base`))(),
+    component: Blabla,
+    // components: {
+    //   'base': Base
+    // }
+  },
   // {
   //   path: '*',
   //   name: 'notfound',