architecture de contenu + theming in parrallele

web_main/modules/custom/mathallomod/mathallomod.info.yml

@@ -0,0 +1,5 @@
+name: 'mathallomod'
+type: module
+description: 'helpers for mathallo'
+core_version_requirement: ^10.6 || ^11.0
+package: 'mathallo'

web_main/modules/custom/mathallomod/mathallomod.module

@@ -0,0 +1,15 @@
+<?php
+
+/**
+ * @file
+ * Contains mathallomod.module.
+ */
+
+
+function mathallomod_link_alter(&$variables) {
+  // $url = $variables['url'];
+  // if($url->getRouteName() === "entity.node.canonical"){
+  //   $nid = $url->getRouteParameters()['node'];
+  //   $node = 
+  // }
+}

web_main/themes/custom/mathallo/assets/js/main.js

@@ -42,10 +42,20 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
     // |___|_||_|_|\__|
     function init () {
       console.log('MathalloTheme init()')
+      initBurgerMenu();
       initBgAnime()
       initVues()
     }
 
+    function initBurgerMenu() {
+      let header_right = document.getElementById('burger-btn');
+      header_right.parentElement.addEventListener('click', function(e){
+        // console.log('click header_right', this);
+        this.firstElementChild.toggleAttribute('opened');
+        this.firstElementChild.nextElementSibling.toggleAttribute('opened');
+      })
+    }
+
     function initBgAnime(){
       // gsap.to('body', {
       //   scrollTrigger: 'main[role="main"]', // start animation when ".box" enters the viewport

web_main/themes/custom/mathallo/assets/scss/main.scss

@@ -13,6 +13,8 @@ body{
   background-position: center;
 }
 
+$header_height: 50px;
+
 div.layout-container{
   // display: flex;
   // flex-direction: column;
@@ -25,6 +27,7 @@ div.layout-container{
     position: fixed;
     top:0;
     width: 100vw;
+    height: $header_height;
   }
   main[role="main"]{
     // flex: 1 1 auto; 
@@ -49,7 +52,7 @@ header[role="banner"]{
   .header-middle{
     display: flex;
     justify-content:space-between;
-    align-items: baseline;
+    align-items: center;
     padding: 0.2em 2em;
   }
   
@@ -72,16 +75,117 @@ header[role="banner"]{
   }
 
   .header-right{
+    // position: relative;
+    height:20px; width:20px;
+    cursor: pointer;
+    // background-color: green;
 
-    #block-mathallo-navigationprincipale{
-      ul{
-        display: flex;
-        list-style: none;
-        li:not(:first-child){
-          margin-left: 1em;
+    >div#burger-btn{
+      position:relative;
+      &, &::before, &::after{
+        // position: absolute;
+        width:20px; height:3px;
+        background-color: $bleu_site;
+      }
+      top: 8.5px;
+      &::before, &::after{
+        content: "";
+        position: absolute;
+        left: 0;
+        // background-color: red;
+      }
+      &::before{
+        top:6px;
+      }
+      &::after{
+        bottom: 6px;
+      }
+
+      transition-duration: 0.5s;
+      &[opened]{
+        transform: rotate(90deg);
+      }
+    }
+    
+
+    &>div.wrapper{
+      position:absolute;
+      top:$header_height; left:0;
+      // z-index: 99;
+      background-color: rgba(0,0,0,0.75);
+
+      width:100vw;
+      height: 0;
+      overflow: hidden;
+      &[opened]{
+        height: calc(100vh - $header_height);
+      }
+      transition-duration: 0.5s;
+      &>nav{
+        padding-top: 10px;
+        background-color: #fff;
+        >ul{
+          margin: 0;
+        }
+      }
+
+      nav#block-mathallo-contenu{
+        padding: 1em;
+        ul,li{
+          padding: 0;
+          margin:0;
+          list-style: none;
+        }
+        li{
+          padding:0 0 1em 0;
+          &:first-child{
+            padding:0.25em 0 1em;
+          }
+        }
+        label{
+          color:$bleu_site;
+          font-weight: 600;
+          display: block;
+          font-size: 0.756em;
+          padding:0 0 0.25em 0;
+        }
+        a{
+          font-size: 1.13em;
+        }
+        &>ul{ // chapitres
+          display: flex;
+          flex-direction: row;
+          gap: 2em;
+         >li{
+          >ul{ // parties
+            margin:0.75em 0 0;
+            padding:0 0 0 1em;
+            border-left: 2px solid $bleu_site;
+            >li{
+            }
+          }
+
+         }
+        }
+      }
+      nav#block-mathallo-navigationprincipale{
+        padding: 2em 1em;
+        ul{
+          display: flex;
+          justify-content: flex-end;
+          list-style: none;
+          li{
+            &:not(:last-child){
+            }
+            margin-right: 1em;
+            background-color: $bleu_site;
+            color: #fff;
+            padding:0.5em 1em;
+          }
         }
       }
     }
+
   }
 } // end of header[role="banner"]{
 

web_main/themes/custom/mathallo/mathallo.theme

@@ -29,6 +29,40 @@ function mathallo_preprocess_page(&$variables) {
 
 }
 
+function mathallo_preprocess_region(&$variables) {
+  if (isset($variables["attributes"]['class'])) {
+    $variables["attributes"]['class'] = [];
+  }
+  $variables["attributes"]['class'][] = "wrapper";
+}
+
+
+function mathallo_preprocess_block__mathallo_contenu(&$variables) {
+  foreach ($variables['content']['#items'] as $key => $item) {
+    parse_menu_item($variables['content']['#items'], $key);
+  }
+}
+
+function parse_menu_item(&$items, $key){
+  if ($items[$key]['url']->getRouteName() === "entity.node.canonical") {
+    $nid = $items[$key]['url']->getRouteParameters()['node'];
+    $node = \Drupal\node\Entity\Node::load($nid);
+    if ($node->getType() === "chapitre") {
+      $chapitre = $node->get('field_chapitre_num')->getValue()[0]['value'];
+      $items[$key]['prefix'] = "Chapitre {$chapitre}";
+    }
+    if ($node->getType() === "partie") {
+      $partie = $node->get('field_partie')->getValue()[0]['value'];
+      $items[$key]['prefix'] = "Partie {$partie}";
+    }
+  }
+  if (count($items[$key]['below']) > 0) {
+    foreach ($items[$key]['below'] as $key_b => $item_b) {
+      parse_menu_item($items[$key]['below'], $key_b);
+    }
+  }
+}
+
 /**
  * Implements hook_preprocess_HOOK() for node.html.twig.
  */

web_main/themes/custom/mathallo/templates/block--mathallo-contenu.html.twig

@@ -0,0 +1,51 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a menu block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - in_preview: Whether the plugin is being rendered in preview mode.
+ * - content: The content of this block.
+ * - attributes: HTML attributes for the containing element.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: HTML attributes for the title element.
+ * - content_attributes: HTML attributes for the content element.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * Headings should be used on navigation menus that consistently appear on
+ * multiple pages. When this menu block's label is configured to not be
+ * displayed, it is automatically made invisible using the 'visually-hidden' CSS
+ * class, which still keeps it visible for screen-readers and assistive
+ * technology. Headings allow screen-reader and keyboard only users to navigate
+ * to or skip the links.
+ * See http://juicystudio.com/article/screen-readers-display-none.php and
+ * https://www.w3.org/TR/WCAG-TECHS/H42.html for more information.
+ *
+ * @ingroup themeable
+ */
+#}
+{% set heading_id = attributes.id ~ '-menu'|clean_id %}
+<nav role="navigation" aria-labelledby="{{ heading_id }}"{{ attributes|without('role', 'aria-labelledby') }}>
+  {# Label. If not displayed, we still provide it for screen readers. #}
+  {% if not configuration.label_display %}
+    {% set title_attributes = title_attributes.addClass('visually-hidden') %}
+  {% endif %}
+  {{ title_prefix }}
+  <h2{{ title_attributes.setAttribute('id', heading_id) }}>{{ configuration.label }}</h2>
+  {{ title_suffix }}
+
+  {# Menu. #}
+  {% block content %}
+    {{ content }}
+  {% endblock %}
+</nav>

web_main/themes/custom/mathallo/templates/block--system-menu-block.html.twig

@@ -0,0 +1,51 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a menu block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - in_preview: Whether the plugin is being rendered in preview mode.
+ * - content: The content of this block.
+ * - attributes: HTML attributes for the containing element.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: HTML attributes for the title element.
+ * - content_attributes: HTML attributes for the content element.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * Headings should be used on navigation menus that consistently appear on
+ * multiple pages. When this menu block's label is configured to not be
+ * displayed, it is automatically made invisible using the 'visually-hidden' CSS
+ * class, which still keeps it visible for screen-readers and assistive
+ * technology. Headings allow screen-reader and keyboard only users to navigate
+ * to or skip the links.
+ * See http://juicystudio.com/article/screen-readers-display-none.php and
+ * https://www.w3.org/TR/WCAG-TECHS/H42.html for more information.
+ *
+ * @ingroup themeable
+ */
+#}
+{% set heading_id = attributes.id ~ '-menu'|clean_id %}
+<nav role="navigation" aria-labelledby="{{ heading_id }}"{{ attributes|without('role', 'aria-labelledby') }}>
+  {# Label. If not displayed, we still provide it for screen readers. #}
+  {% if not configuration.label_display %}
+    {% set title_attributes = title_attributes.addClass('visually-hidden') %}
+  {% endif %}
+  {{ title_prefix }}
+  <h2{{ title_attributes.setAttribute('id', heading_id) }}>{{ configuration.label }}</h2>
+  {{ title_suffix }}
+
+  {# Menu. #}
+  {% block content %}
+    {{ content }}
+  {% endblock %}
+</nav>

web_main/themes/custom/mathallo/templates/menu.html.twig

@@ -0,0 +1,52 @@
+{#
+/**
+ * @file
+ * Default theme implementation 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.
+ *
+ * @ingroup themeable
+ */
+#}
+{% import _self as menus %}
+
+{#
+  We call a macro which calls itself to render the full tree.
+  https://twig.symfony.com/doc/3.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 }}>
+    {% else %}
+      <ul>
+    {% endif %}
+    {% for item in items %}
+      <li{{ item.attributes }}>
+        {% if item.prefix %}
+          <label class="link-prefix">{{ item.prefix }}</label>
+        {% endif %}
+        {{ link(item.title, item.url) }}
+        {% if item.below %}
+          {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
+        {% endif %}
+      </li>
+    {% endfor %}
+    </ul>
+  {% endif %}
+{% endmacro %}

web_main/themes/custom/mathallo/templates/region--header-right.html.twig

@@ -0,0 +1,22 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a region.
+ *
+ * Available variables:
+ * - content: The content for this region, typically blocks.
+ * - attributes: HTML attributes for the region <div>.
+ * - region: The name of the region variable as defined in the theme's
+ *   .info.yml file.
+ *
+ * @see template_preprocess_region()
+ *
+ * @ingroup themeable
+ */
+#}
+{% if content %}
+  <div id="burger-btn"></div>
+  <div{{ attributes }}>
+    {{ content }}
+  </div>
+{% endif %}

web_main/themes/custom/mathallo/templates/region.html.twig

@@ -0,0 +1,21 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a region.
+ *
+ * Available variables:
+ * - content: The content for this region, typically blocks.
+ * - attributes: HTML attributes for the region <div>.
+ * - region: The name of the region variable as defined in the theme's
+ *   .info.yml file.
+ *
+ * @see template_preprocess_region()
+ *
+ * @ingroup themeable
+ */
+#}
+{% if content %}
+  <div{{ attributes }}>
+    {{ content }}
+  </div>
+{% endif %}