Styleguide: mise à jour du breadcrumb et de la navigation mobile

assets/components/entrypoint.scss

@@ -83,6 +83,7 @@
 @import 'organisms/fullwidth-teaser/fullwidth-teaser';
 @import 'organisms/nav-main/nav-main';
 @import 'organisms/nav-aside/nav-aside';
+@import 'organisms/nav-mobile/nav-mobile';
 @import 'organisms/contact/contact';
 @import 'organisms/footer/footer';
 @import 'organisms/form/form';

assets/components/molecules/breadcrumb/breadcrumb-dropdown.twig

@@ -0,0 +1,69 @@
+<nav aria-label="breadcrumb" class="breadcrumb-wrapper">
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item">
+      <a class="bread-link bread-home" href="#">
+        {% include '@atoms/icon/icon.twig' with { icon: 'icon-home' } %}
+      </a>
+    </li>
+    <li class="breadcrumb-item expand-links">
+      <button class="btn btn-expand-links" aria-expanded="false" title="Display the complete path">
+        <span class="dots" aria-hidden="true">…</span>
+        <span class="sr-only">Display the complete path</span>
+      </button>
+    </li>
+    <li class="breadcrumb-item">
+      <a class="bread-link" href="#">Schools</a>
+      <div class="dropdown">
+        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="dropdown-menu-1">
+          {% include '@atoms/icon/icon.twig' with { icon: 'arrow-down-circle', icon_classes:'feather' } %}
+          <span class="sr-only">Display same level pages – Schools</span>
+        </button>
+        <ul class="dropdown-menu" id="dropdown-menu-1">
+          <li class="dropdown-item"><a href="#">About</a></li>
+          <li class="dropdown-item"><a href="#">Education</a></li>
+          <li class="dropdown-item"><a href="#">Research</a></li>
+          <li class="dropdown-item"><a href="#">Innovation</a></li>
+          <li class="dropdown-item current-menu-item-parent"><a href="#">Schools</a></li>
+          <li class="dropdown-item"><a href="#">Campus</a></li>
+        </ul>
+      </div>
+    </li>
+    <li class="breadcrumb-item">
+      <a class="bread-link" href="#">School of Architecture, Civil and Environmental Engineering</a>
+      <div class="dropdown">
+        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="dropdown-menu-2">
+          {% include '@atoms/icon/icon.twig' with { icon: 'arrow-down-circle', icon_classes:'feather' } %}
+          <span class="sr-only">Display same level pages – School of Architecture, Civil and Environmental Engineering</span>
+        </button>
+        <ul class="dropdown-menu" id="dropdown-menu-2">
+          <li class="dropdown-item current-menu-item-parent"><a href="#">School of Architecture, Civil and Environmental Engineering</a></li>
+          <li class="dropdown-item"><a href="#">School of Computer and Communication Sciences</a></li>
+          <li class="dropdown-item"><a href="#">School of Basic Sciences</a></li>
+          <li class="dropdown-item"><a href="#">School of Engineering</a></li>
+          <li class="dropdown-item"><a href="#">School of Life Sciences</a></li>
+          <li class="dropdown-item"><a href="#">College of Management of Technology</a></li>
+          <li class="dropdown-item"><a href="#">College of Humanities</a></li>
+          <li class="dropdown-item"><a href="#">Sections</a></li>
+        </ul>
+      </div>
+    </li>
+    <li class="breadcrumb-item">
+      <a class="bread-link" href="#">Sustainability challenges</a>
+    </li>
+    <li class="breadcrumb-item active" aria-current="page">
+      <span class="bread-item">FUSTIC association</span>
+      <div class="dropdown">
+        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="dropdown-menu-3">
+          {% include '@atoms/icon/icon.twig' with { icon: 'arrow-down-circle', icon_classes:'feather' } %}
+          <span class="sr-only">Display same level pages – FUSTIC association</span>
+        </button>
+        <ul class="dropdown-menu" id="dropdown-menu-3">
+          <li class="dropdown-item"><a href="#">ENAC Clusters</a></li>
+          <li class="dropdown-item"><a href="#">Interdisciplinary Centers</a></li>
+          <li class="dropdown-item current-menu-item-parent"><a href="#">FUSTIC association</a></li>
+          <li class="dropdown-item"><a href="#">Sustainability grants</a></li>
+        </ul>
+      </div>
+    </li>
+  </ol>
+</nav>

assets/components/molecules/breadcrumb/breadcrumb-tagged.twig

@@ -10,9 +10,64 @@
       <a href="#" class="tag tag-primary">Innovation</a>
       <a href="#" class="tag tag-primary">W3C</a>
     </li>
-    <li class="breadcrumb-item"><a href="#">Schools</a></li>
-    <li class="breadcrumb-item"><a href="#">ENAC</a></li>
-    <li class="breadcrumb-item"><a href="#">Formations</a></li>
-    <li class="breadcrumb-item active" aria-current="page">Projets</li>
+    <li class="breadcrumb-item expand-links">
+      <button class="btn btn-expand-links" aria-expanded="false" title="Display the complete path">
+        <span class="dots" aria-hidden="true">…</span>
+        <span class="sr-only">Display the complete path</span>
+      </button>
+    </li>
+    <li class="breadcrumb-item">
+      <a class="bread-link" href="#">Schools</a>
+      <div class="dropdown">
+        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="dropdown-menu-1">
+          {% include '@atoms/icon/icon.twig' with { icon: 'arrow-down-circle', icon_classes:'feather' } %}
+          <span class="sr-only">Display same level pages – Schools</span>
+        </button>
+        <ul class="dropdown-menu" id="dropdown-menu-1">
+          <li class="dropdown-item"><a href="#">About</a></li>
+          <li class="dropdown-item"><a href="#">Education</a></li>
+          <li class="dropdown-item"><a href="#">Research</a></li>
+          <li class="dropdown-item"><a href="#">Innovation</a></li>
+          <li class="dropdown-item current-menu-item-parent"><a href="#">Schools</a></li>
+          <li class="dropdown-item"><a href="#">Campus</a></li>
+        </ul>
+      </div>
+    </li>
+    <li class="breadcrumb-item">
+      <a class="bread-link" href="#">School of Architecture, Civil and Environmental Engineering</a>
+      <div class="dropdown">
+        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="dropdown-menu-2">
+          {% include '@atoms/icon/icon.twig' with { icon: 'arrow-down-circle', icon_classes:'feather' } %}
+          <span class="sr-only">Display same level pages – School of Architecture, Civil and Environmental Engineering</span>
+        </button>
+        <ul class="dropdown-menu" id="dropdown-menu-2">
+          <li class="dropdown-item current-menu-item-parent"><a href="#">School of Architecture, Civil and Environmental Engineering</a></li>
+          <li class="dropdown-item"><a href="#">School of Computer and Communication Sciences</a></li>
+          <li class="dropdown-item"><a href="#">School of Basic Sciences</a></li>
+          <li class="dropdown-item"><a href="#">School of Engineering</a></li>
+          <li class="dropdown-item"><a href="#">School of Life Sciences</a></li>
+          <li class="dropdown-item"><a href="#">College of Management of Technology</a></li>
+          <li class="dropdown-item"><a href="#">College of Humanities</a></li>
+          <li class="dropdown-item"><a href="#">Sections</a></li>
+        </ul>
+      </div>
+    </li>
+    <li class="breadcrumb-item active" aria-current="page">
+      <span class="bread-item">ENAC Faculty</span>
+      <div class="dropdown">
+        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="dropdown-menu-3">
+          {% include '@atoms/icon/icon.twig' with { icon: 'arrow-down-circle', icon_classes:'feather' } %}
+          <span class="sr-only">Display same level pages – ENAC Faculty</span>
+        </button>
+        <ul class="dropdown-menu" id="dropdown-menu-3">
+          <li class="dropdown-item"><a href="#">News</a></li>
+          <li class="dropdown-item current-menu-item-parent"><a href="#">ENAC Faculty</a></li>
+          <li class="dropdown-item"><a href="#">Education</a></li>
+          <li class="dropdown-item"><a href="#">Research</a></li>
+          <li class="dropdown-item"><a href="#">Sustainability challenges</a></li>
+          <li class="dropdown-item"><a href="#">Intranet ENAC</a></li>
+        </ul>
+      </div>
+    </li>
   </ol>
 </nav>

assets/components/molecules/breadcrumb/breadcrumb.js

@@ -1,51 +1,27 @@
 /* globals $ */
 
 export default () => {
-  const breadcrumb = $('#breadcrumb-wrapper');
-
-  if ($(breadcrumb).length > 0) {  // don't expect to have the breadcrumb on every case
-    const breadcrumbNode = breadcrumb[0];
-    const breadcrumbComponent = breadcrumb.find('.breadcrumb');
-
-    if ($(window).width() > 1199 &&
-        $(breadcrumbComponent).length > 0 &&  // don't expect to have the breadcrumbComponent on every case
-        breadcrumb.width() < breadcrumbComponent[0].scrollWidth) {
-      let isDown = false;
-      let startX;
-      let scrollLeft;
-
-      breadcrumb.on('mousedown', (e) => {
-        isDown = true;
-        breadcrumb.addClass('moving');
-        startX = e.pageX - breadcrumbNode.offsetLeft;
-        // eslint-disable-next-line
-        scrollLeft = breadcrumbNode.scrollLeft;
-      });
-
-      breadcrumb.on('mouseleave', () => {
-        isDown = false;
-        breadcrumb.removeClass('moving');
-      });
-
-      breadcrumb.on('mouseup', () => {
-        isDown = false;
-        breadcrumb.removeClass('moving');
-      });
-
-      breadcrumb.on('mousemove', (e) => {
-        if (!isDown) return; // stop the fn from running
-        e.preventDefault();
-        const x = e.pageX - breadcrumbNode.offsetLeft;
-        const walk = (x - startX) * 3;
-        breadcrumbNode.scrollLeft = scrollLeft - walk;
-      });
-
-      breadcrumb.mousewheel((e, delta) => {
-        e.preventDefault();
-        breadcrumbNode.scrollLeft -= delta * 40;
-      });
-
-      breadcrumb.find('*').on('dragstart', () => false);
+  const expandBreadcrumb = $('.btn-expand-links');
+  const breadcrumbDropToggle = $('.dropdown-toggle');
+
+  // add class 'has-expanded-links'
+  expandBreadcrumb.on('click', () => {
+    $('.breadcrumb-wrapper .breadcrumb').addClass('has-expanded-links');
+  });
+
+  // improve dropdown position
+  breadcrumbDropToggle.on('click', (e) => {
+    const btnPos = $(e.currentTarget).offset().left;
+    const documentWitdh = $(document).width();
+    const dropdown = $(e.currentTarget).siblings('.dropdown-menu');
+    const dropdownWidth = dropdown.width();
+    const btnOffset = documentWitdh - btnPos;
+
+    // remove class 'open-left' from all .dropdown-menu elements
+    $('.dropdown-menu').removeClass('open-left');
+    // add the class back if the dropdown is too close to the right side of the window
+    if (dropdownWidth > btnOffset) {
+      dropdown.addClass('open-left');
     }
-  }
+  });
 };