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

config/sync/block.block.header.yml

@@ -0,0 +1,27 @@
+uuid: d16db992-5c92-4832-a386-69b50313a3e9
+langcode: en
+status: true
+dependencies:
+  config:
+    - system.menu.header
+  module:
+    - menu_block
+  theme:
+    - materiotheme
+id: header
+theme: materiotheme
+region: header_right
+weight: -1
+provider: null
+plugin: 'menu_block:header'
+settings:
+  id: 'menu_block:header'
+  label: Header
+  provider: menu_block
+  label_display: '0'
+  level: 1
+  depth: 0
+  expand: 0
+  parent: 'header:'
+  suggestion: header
+visibility: {  }

config/sync/block.block.languageswitcher.yml

@@ -9,7 +9,7 @@ dependencies:
 id: languageswitcher
 theme: materiotheme
 region: header_right
-weight: -1
+weight: 0
 provider: null
 plugin: 'language_block:language_interface'
 settings:

config/sync/system.menu.header.yml

@@ -0,0 +1,8 @@
+uuid: b00f8fd5-4940-4760-abeb-39cdb74ec895
+langcode: und
+status: true
+dependencies: {  }
+id: header
+label: Header
+description: ''
+locked: false

config/sync/views.view.blabla.yml

@@ -0,0 +1,276 @@
+uuid: e116ba1e-828b-40a6-80e1-b7b2e9b4d37b
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.node.teaser
+    - node.type.article
+    - system.menu.header
+  module:
+    - node
+    - rest
+    - serialization
+    - user
+id: blabla
+label: Blabla
+module: views
+description: ''
+tag: ''
+base_table: node_field_data
+base_field: nid
+core: 8.x
+display:
+  default:
+    display_plugin: default
+    id: default
+    display_title: Master
+    position: 0
+    display_options:
+      access:
+        type: perm
+        options:
+          perm: 'access content'
+      cache:
+        type: tag
+        options: {  }
+      query:
+        type: views_query
+        options:
+          disable_sql_rewrite: false
+          distinct: false
+          replica: false
+          query_comment: ''
+          query_tags: {  }
+      exposed_form:
+        type: basic
+        options:
+          submit_button: Apply
+          reset_button: false
+          reset_button_label: Reset
+          exposed_sorts_label: 'Sort by'
+          expose_sort_order: true
+          sort_asc_label: Asc
+          sort_desc_label: Desc
+      pager:
+        type: mini
+        options:
+          items_per_page: 10
+          offset: 0
+          id: 0
+          total_pages: null
+          expose:
+            items_per_page: false
+            items_per_page_label: 'Items per page'
+            items_per_page_options: '5, 10, 25, 50'
+            items_per_page_options_all: false
+            items_per_page_options_all_label: '- All -'
+            offset: false
+            offset_label: Offset
+          tags:
+            previous: ‹‹
+            next: ››
+      style:
+        type: default
+      row:
+        type: 'entity:node'
+        options:
+          view_mode: teaser
+      fields:
+        title:
+          id: title
+          table: node_field_data
+          field: title
+          entity_type: node
+          entity_field: title
+          label: ''
+          alter:
+            alter_text: false
+            make_link: false
+            absolute: false
+            trim: false
+            word_boundary: false
+            ellipsis: false
+            strip_tags: false
+            html: false
+          hide_empty: false
+          empty_zero: false
+          settings:
+            link_to_entity: true
+          plugin_id: field
+          relationship: none
+          group_type: group
+          admin_label: ''
+          exclude: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: true
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_alter_empty: true
+          click_sort_column: value
+          type: string
+          group_column: value
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
+      filters:
+        status:
+          value: '1'
+          table: node_field_data
+          field: status
+          plugin_id: boolean
+          entity_type: node
+          entity_field: status
+          id: status
+          expose:
+            operator: ''
+          group: 1
+        type:
+          id: type
+          table: node_field_data
+          field: type
+          value:
+            article: article
+          entity_type: node
+          entity_field: type
+          plugin_id: bundle
+        langcode:
+          id: langcode
+          table: node_field_data
+          field: langcode
+          relationship: none
+          group_type: group
+          admin_label: ''
+          operator: in
+          value:
+            '***LANGUAGE_language_interface***': '***LANGUAGE_language_interface***'
+          group: 1
+          exposed: false
+          expose:
+            operator_id: ''
+            label: ''
+            description: ''
+            use_operator: false
+            operator: ''
+            identifier: ''
+            required: false
+            remember: false
+            multiple: false
+            remember_roles:
+              authenticated: authenticated
+            reduce: false
+          is_grouped: false
+          group_info:
+            label: ''
+            description: ''
+            identifier: ''
+            optional: true
+            widget: select
+            multiple: false
+            remember: false
+            default_group: All
+            default_group_multiple: {  }
+            group_items: {  }
+          entity_type: node
+          entity_field: langcode
+          plugin_id: language
+      sorts:
+        created:
+          id: created
+          table: node_field_data
+          field: created
+          order: DESC
+          entity_type: node
+          entity_field: created
+          plugin_id: date
+          relationship: none
+          group_type: group
+          admin_label: ''
+          exposed: false
+          expose:
+            label: ''
+          granularity: second
+      title: Blabla
+      header: {  }
+      footer: {  }
+      empty: {  }
+      relationships: {  }
+      arguments: {  }
+      display_extenders: {  }
+    cache_metadata:
+      max-age: -1
+      contexts:
+        - 'languages:language_content'
+        - 'languages:language_interface'
+        - url.query_args
+        - 'user.node_grants:view'
+        - user.permissions
+      tags: {  }
+  page_1:
+    display_plugin: page
+    id: page_1
+    display_title: Page
+    position: 1
+    display_options:
+      display_extenders:
+        views_ef_fieldset: {  }
+      path: blabla
+      menu:
+        type: normal
+        title: Blabla
+        description: ''
+        expanded: false
+        parent: ''
+        weight: 0
+        context: '0'
+        menu_name: header
+    cache_metadata:
+      max-age: -1
+      contexts:
+        - 'languages:language_content'
+        - 'languages:language_interface'
+        - url.query_args
+        - 'user.node_grants:view'
+        - user.permissions
+      tags: {  }
+  rest_export_1:
+    display_plugin: rest_export
+    id: rest_export_1
+    display_title: 'REST export'
+    position: 2
+    display_options:
+      display_extenders:
+        views_ef_fieldset: {  }
+      path: blabla_rest
+      style:
+        type: serializer
+      defaults:
+        style: false
+        row: false
+      row:
+        type: data_entity
+        options: {  }
+      pager:
+        type: some
+        options:
+          items_per_page: 10
+          offset: 0
+    cache_metadata:
+      max-age: -1
+      contexts:
+        - 'languages:language_content'
+        - 'languages:language_interface'
+        - request_format
+        - 'user.node_grants:view'
+        - user.permissions
+      tags: {  }

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',