<div class="c-nav">
<nav class="o-container o-container--large c-nav__container" aria-label="Navigation principale">
<div class="c-nav__logo">
<div class="c-logo-header">
<div class="c-logo-header__logo">
<img class="c-logo-vd" src="../../assets/vectors/logo.svg" />
</div>
<div class="c-logo-header__text">
Tribunal des baux
</div>
</div>
</div>
<!-- Menu icon -->
<button class="c-nav__toggle" aria-label="Ouvrir le menu" aria-expanded="false">
<span class="c-menu-icon c-menu-icon--cross">
<span></span>
</span>
</button>
<!-- Nav container -->
<div class="c-nav__list-container">
<!-- Nav alternative actions (search) -->
<div class="c-nav__alt-actions">
<a href="#nowhere" class="c-nav__button-search"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<circle cx="8" cy="8" r="7" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M19 19l-6-6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="u-display-xl-none">Rechercher</span></a><a href="#nowhere" class="c-nav__button-pdf" title="Télécharger le rapport PDF"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-file-earmark-pdf" viewBox="0 0 16 16">
<path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z" />
<path d="M4.603 14.087a.81.81 0 0 1-.438-.42c-.195-.388-.13-.776.08-1.102.198-.307.526-.568.897-.787a7.68 7.68 0 0 1 1.482-.645 19.697 19.697 0 0 0 1.062-2.227 7.269 7.269 0 0 1-.43-1.295c-.086-.4-.119-.796-.046-1.136.075-.354.274-.672.65-.823.192-.077.4-.12.602-.077a.7.7 0 0 1 .477.365c.088.164.12.356.127.538.007.188-.012.396-.047.614-.084.51-.27 1.134-.52 1.794a10.954 10.954 0 0 0 .98 1.686 5.753 5.753 0 0 1 1.334.05c.364.066.734.195.96.465.12.144.193.32.2.518.007.192-.047.382-.138.563a1.04 1.04 0 0 1-.354.416.856.856 0 0 1-.51.138c-.331-.014-.654-.196-.933-.417a5.712 5.712 0 0 1-.911-.95 11.651 11.651 0 0 0-1.997.406 11.307 11.307 0 0 1-1.02 1.51c-.292.35-.609.656-.927.787a.793.793 0 0 1-.58.029zm1.379-1.901c-.166.076-.32.156-.459.238-.328.194-.541.383-.647.547-.094.145-.096.25-.04.361.01.022.02.036.026.044a.266.266 0 0 0 .035-.012c.137-.056.355-.235.635-.572a8.18 8.18 0 0 0 .45-.606zm1.64-1.33a12.71 12.71 0 0 1 1.01-.193 11.744 11.744 0 0 1-.51-.858 20.801 20.801 0 0 1-.5 1.05zm2.446.45c.15.163.296.3.435.41.24.19.407.253.498.256a.107.107 0 0 0 .07-.015.307.307 0 0 0 .094-.125.436.436 0 0 0 .059-.2.095.095 0 0 0-.026-.063c-.052-.062-.2-.152-.518-.209a3.876 3.876 0 0 0-.612-.053zM8.078 7.8a6.7 6.7 0 0 0 .2-.828c.031-.188.043-.343.038-.465a.613.613 0 0 0-.032-.198.517.517 0 0 0-.145.04c-.087.035-.158.106-.196.283-.04.192-.03.469.046.822.024.111.054.227.09.346z" />
</svg>
<span class="u-display-xl-none">Télécharger le rapport PDF</span></a>
</div>
<!-- Nav Level indicator -->
<ul class="c-nav__level-indicator" aria-hidden="true">
</ul>
<!-- Nav list wrapper -->
<div class="c-nav__list-wrapper">
<!-- Level 0 -->
<ul class="c-nav__list" aria-label="Arborescence des pages">
<li class="c-nav__list-item c-nav__list-item-project" data-level="0">
<button class="c-nav__list-link c-nav__list-link--w-children" aria-haspopup="true" aria-expanded="false">
Projets
</button>
<ul class="c-nav__list c-nav__list--level c-nav__list--level-1 c-nav_list--level-project">
<li class="c-nav__list-item" data-level="1">
<div class="c-slider-js-nav">
<div class="c-slider-js-nav-container">
<div class="c-slider-js-nav__container-left">
<h2 class="c-slider-js-nav__heading">Projets</h2>
<div class="c-slider-js-nav__sidebar" aria-hidden="true">
<ul class="c-slider-js-nav__sidebar-list">
<li class="c-slider-js-nav__sidebar-list-item">
<a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Provident sed qui quaerat vel iste.</a>
</li>
<li class="c-slider-js-nav__sidebar-list-item">
<a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Minima voluptate ex enim.</a>
</li>
<li class="c-slider-js-nav__sidebar-list-item">
<a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Et odit non est autem nihil itaque sint facere at.</a>
</li>
<li class="c-slider-js-nav__sidebar-list-item">
<a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Blanditiis incidunt quas autem sit.</a>
</li>
<li class="c-slider-js-nav__sidebar-list-item">
<a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Nostrum perspiciatis rem in sit mollitia qui sit necessitatibus nulla.</a>
</li>
<li class="c-slider-js-nav__sidebar-list-item">
<a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Aut quas ducimus ipsum tempora dolores.</a>
</li>
<li class="c-slider-js-nav__sidebar-list-item">
<a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Veritatis rerum enim dicta est dicta assumenda incidunt et.</a>
</li>
<li class="c-slider-js-nav__sidebar-list-item">
<a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Vero tempore nihil est qui.</a>
</li>
<li class="c-slider-js-nav__sidebar-list-item">
<a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Est est non saepe sed ratione itaque atque recusandae ut.</a>
</li>
<li class="c-slider-js-nav__sidebar-list-item">
<a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Temporibus doloremque ut ducimus.</a>
</li>
<li class="c-slider-js-nav__sidebar-list-item">
<a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Quam reprehenderit dolorum cum assumenda esse quo sit.</a>
</li>
<li class="c-slider-js-nav__sidebar-list-item">
<a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Explicabo velit occaecati eaque dolore omnis ducimus sint libero dolores.</a>
</li>
<li class="c-slider-js-nav__sidebar-list-item">
<a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Amet asperiores eum nihil impedit optio doloremque nemo aut ut.</a>
</li>
<li class="c-slider-js-nav__sidebar-list-item">
<a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Voluptas adipisci mollitia ipsum et.</a>
</li>
<li class="c-slider-js-nav__sidebar-list-item">
<a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Earum facilis facere aut necessitatibus recusandae quam.</a>
</li>
<li class="c-slider-js-nav__sidebar-list-item">
<a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Autem atque voluptas sit enim et.</a>
</li>
<li class="c-slider-js-nav__sidebar-list-item">
<a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Et enim voluptatem et veritatis dolores dolores.</a>
</li>
<li class="c-slider-js-nav__sidebar-list-item">
<a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Consequatur animi est molestias quisquam inventore dolorum.</a>
</li>
<li class="c-slider-js-nav__sidebar-list-item">
<a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Maxime et consequatur magnam minima harum eligendi soluta est.</a>
</li>
<li class="c-slider-js-nav__sidebar-list-item">
<a href="#nowhere" class="c-slider-js-nav__sidebar-list-link">Sunt fuga quod quis dicta quia atque harum et.</a>
</li>
</ul>
</div>
</div>
<div class="c-slider-js-nav__container-right">
<div class="c-slider-js-nav-carousel">
<article class="o-card-link c-slider-js-nav__article carousel-cell">
<figure class="c-slider-js-nav__article-figure">
<img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x371?Mauritania" alt="ipsam modi enim" />
</figure>
<div class="c-slider-js-nav__article-text-container">
<div class="c-slider-js-nav__article-date">
<span class="u-visually-hidden">Date:</span>22 avril 2023
</div>
<h3 class="c-slider-js-nav__article-heading">Provident sed qui quaerat vel iste.</h3>
<a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Provident sed qui quaerat vel iste.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</article>
<article class="o-card-link c-slider-js-nav__article carousel-cell">
<figure class="c-slider-js-nav__article-figure">
<img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x333?frictionless" alt="qui id laudantium" />
</figure>
<div class="c-slider-js-nav__article-text-container">
<div class="c-slider-js-nav__article-date">
<span class="u-visually-hidden">Date:</span>21 août 2023
</div>
<h3 class="c-slider-js-nav__article-heading">Minima voluptate ex enim.</h3>
<a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Minima voluptate ex enim.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</article>
<article class="o-card-link c-slider-js-nav__article carousel-cell">
<figure class="c-slider-js-nav__article-figure">
<img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x333?reboot" alt="architecto ut placeat" />
</figure>
<div class="c-slider-js-nav__article-text-container">
<div class="c-slider-js-nav__article-date">
<span class="u-visually-hidden">Date:</span>14 septembre 2023
</div>
<h3 class="c-slider-js-nav__article-heading">Et odit non est autem nihil itaque sint facere at.</h3>
<a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Et odit non est autem nihil itaque sint facere at.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</article>
<article class="o-card-link c-slider-js-nav__article carousel-cell">
<figure class="c-slider-js-nav__article-figure">
<img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x295?Hollow" alt="qui fugiat culpa" />
</figure>
<div class="c-slider-js-nav__article-text-container">
<div class="c-slider-js-nav__article-date">
<span class="u-visually-hidden">Date:</span>5 novembre 2023
</div>
<h3 class="c-slider-js-nav__article-heading">Blanditiis incidunt quas autem sit.</h3>
<a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Blanditiis incidunt quas autem sit.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</article>
<article class="o-card-link c-slider-js-nav__article carousel-cell">
<figure class="c-slider-js-nav__article-figure">
<img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x371?Sleek" alt="hic deleniti aspernatur" />
</figure>
<div class="c-slider-js-nav__article-text-container">
<div class="c-slider-js-nav__article-date">
<span class="u-visually-hidden">Date:</span>6 juin 2023
</div>
<h3 class="c-slider-js-nav__article-heading">Nostrum perspiciatis rem in sit mollitia qui sit necessitatibus nulla.</h3>
<a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Nostrum perspiciatis rem in sit mollitia qui sit necessitatibus nulla.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</article>
<article class="o-card-link c-slider-js-nav__article carousel-cell">
<figure class="c-slider-js-nav__article-figure">
<img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x295?Fantastic" alt="facilis harum est" />
</figure>
<div class="c-slider-js-nav__article-text-container">
<div class="c-slider-js-nav__article-date">
<span class="u-visually-hidden">Date:</span>2 mai 2023
</div>
<h3 class="c-slider-js-nav__article-heading">Aut quas ducimus ipsum tempora dolores.</h3>
<a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Aut quas ducimus ipsum tempora dolores.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</article>
<article class="o-card-link c-slider-js-nav__article carousel-cell">
<figure class="c-slider-js-nav__article-figure">
<img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x295?auxiliary" alt="non necessitatibus possimus" />
</figure>
<div class="c-slider-js-nav__article-text-container">
<div class="c-slider-js-nav__article-date">
<span class="u-visually-hidden">Date:</span>5 août 2023
</div>
<h3 class="c-slider-js-nav__article-heading">Veritatis rerum enim dicta est dicta assumenda incidunt et.</h3>
<a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Veritatis rerum enim dicta est dicta assumenda incidunt et.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</article>
<article class="o-card-link c-slider-js-nav__article carousel-cell">
<figure class="c-slider-js-nav__article-figure">
<img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x295?core" alt="assumenda quae consequatur" />
</figure>
<div class="c-slider-js-nav__article-text-container">
<div class="c-slider-js-nav__article-date">
<span class="u-visually-hidden">Date:</span>1 avril 2023
</div>
<h3 class="c-slider-js-nav__article-heading">Vero tempore nihil est qui.</h3>
<a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Vero tempore nihil est qui.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</article>
<article class="o-card-link c-slider-js-nav__article carousel-cell">
<figure class="c-slider-js-nav__article-figure">
<img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x295?infrastructure" alt="nihil illum dicta" />
</figure>
<div class="c-slider-js-nav__article-text-container">
<div class="c-slider-js-nav__article-date">
<span class="u-visually-hidden">Date:</span>7 septembre 2023
</div>
<h3 class="c-slider-js-nav__article-heading">Est est non saepe sed ratione itaque atque recusandae ut.</h3>
<a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Est est non saepe sed ratione itaque atque recusandae ut.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</article>
<article class="o-card-link c-slider-js-nav__article carousel-cell">
<figure class="c-slider-js-nav__article-figure">
<img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x295?markets" alt="beatae sit quisquam" />
</figure>
<div class="c-slider-js-nav__article-text-container">
<div class="c-slider-js-nav__article-date">
<span class="u-visually-hidden">Date:</span>13 février 2023
</div>
<h3 class="c-slider-js-nav__article-heading">Temporibus doloremque ut ducimus.</h3>
<a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Temporibus doloremque ut ducimus.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</article>
<article class="o-card-link c-slider-js-nav__article carousel-cell">
<figure class="c-slider-js-nav__article-figure">
<img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x295?compressing" alt="voluptatem aut et" />
</figure>
<div class="c-slider-js-nav__article-text-container">
<div class="c-slider-js-nav__article-date">
<span class="u-visually-hidden">Date:</span>10 juillet 2023
</div>
<h3 class="c-slider-js-nav__article-heading">Quam reprehenderit dolorum cum assumenda esse quo sit.</h3>
<a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Quam reprehenderit dolorum cum assumenda esse quo sit.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</article>
<article class="o-card-link c-slider-js-nav__article carousel-cell">
<figure class="c-slider-js-nav__article-figure">
<img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x333?Coordinator" alt="dolor illo officia" />
</figure>
<div class="c-slider-js-nav__article-text-container">
<div class="c-slider-js-nav__article-date">
<span class="u-visually-hidden">Date:</span>5 décembre 2022
</div>
<h3 class="c-slider-js-nav__article-heading">Explicabo velit occaecati eaque dolore omnis ducimus sint libero dolores.</h3>
<a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Explicabo velit occaecati eaque dolore omnis ducimus sint libero dolores.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</article>
<article class="o-card-link c-slider-js-nav__article carousel-cell">
<figure class="c-slider-js-nav__article-figure">
<img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x371?transmitting" alt="rerum numquam cumque" />
</figure>
<div class="c-slider-js-nav__article-text-container">
<div class="c-slider-js-nav__article-date">
<span class="u-visually-hidden">Date:</span>28 janvier 2023
</div>
<h3 class="c-slider-js-nav__article-heading">Amet asperiores eum nihil impedit optio doloremque nemo aut ut.</h3>
<a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Amet asperiores eum nihil impedit optio doloremque nemo aut ut.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</article>
<article class="o-card-link c-slider-js-nav__article carousel-cell">
<figure class="c-slider-js-nav__article-figure">
<img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x333?FTP" alt="vitae voluptatem aut" />
</figure>
<div class="c-slider-js-nav__article-text-container">
<div class="c-slider-js-nav__article-date">
<span class="u-visually-hidden">Date:</span>2 novembre 2023
</div>
<h3 class="c-slider-js-nav__article-heading">Voluptas adipisci mollitia ipsum et.</h3>
<a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Voluptas adipisci mollitia ipsum et.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</article>
<article class="o-card-link c-slider-js-nav__article carousel-cell">
<figure class="c-slider-js-nav__article-figure">
<img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x333?Mobility" alt="nostrum ut voluptas" />
</figure>
<div class="c-slider-js-nav__article-text-container">
<div class="c-slider-js-nav__article-date">
<span class="u-visually-hidden">Date:</span>4 novembre 2023
</div>
<h3 class="c-slider-js-nav__article-heading">Earum facilis facere aut necessitatibus recusandae quam.</h3>
<a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Earum facilis facere aut necessitatibus recusandae quam.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</article>
<article class="o-card-link c-slider-js-nav__article carousel-cell">
<figure class="c-slider-js-nav__article-figure">
<img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x333?panel" alt="quisquam aut recusandae" />
</figure>
<div class="c-slider-js-nav__article-text-container">
<div class="c-slider-js-nav__article-date">
<span class="u-visually-hidden">Date:</span>24 avril 2023
</div>
<h3 class="c-slider-js-nav__article-heading">Autem atque voluptas sit enim et.</h3>
<a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Autem atque voluptas sit enim et.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</article>
<article class="o-card-link c-slider-js-nav__article carousel-cell">
<figure class="c-slider-js-nav__article-figure">
<img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x371?overriding" alt="ipsa aut incidunt" />
</figure>
<div class="c-slider-js-nav__article-text-container">
<div class="c-slider-js-nav__article-date">
<span class="u-visually-hidden">Date:</span>21 mai 2023
</div>
<h3 class="c-slider-js-nav__article-heading">Et enim voluptatem et veritatis dolores dolores.</h3>
<a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Et enim voluptatem et veritatis dolores dolores.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</article>
<article class="o-card-link c-slider-js-nav__article carousel-cell">
<figure class="c-slider-js-nav__article-figure">
<img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x295?Interface" alt="corrupti aut distinctio" />
</figure>
<div class="c-slider-js-nav__article-text-container">
<div class="c-slider-js-nav__article-date">
<span class="u-visually-hidden">Date:</span>22 mars 2023
</div>
<h3 class="c-slider-js-nav__article-heading">Consequatur animi est molestias quisquam inventore dolorum.</h3>
<a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Consequatur animi est molestias quisquam inventore dolorum.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</article>
<article class="o-card-link c-slider-js-nav__article carousel-cell">
<figure class="c-slider-js-nav__article-figure">
<img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x295?Baht" alt="sit rerum et" />
</figure>
<div class="c-slider-js-nav__article-text-container">
<div class="c-slider-js-nav__article-date">
<span class="u-visually-hidden">Date:</span>17 octobre 2023
</div>
<h3 class="c-slider-js-nav__article-heading">Maxime et consequatur magnam minima harum eligendi soluta est.</h3>
<a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Maxime et consequatur magnam minima harum eligendi soluta est.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</article>
<article class="o-card-link c-slider-js-nav__article carousel-cell">
<figure class="c-slider-js-nav__article-figure">
<img class="c-slider-js-nav__article-image" src="https://source.unsplash.com/384x295?Principal" alt="iste distinctio excepturi" />
</figure>
<div class="c-slider-js-nav__article-text-container">
<div class="c-slider-js-nav__article-date">
<span class="u-visually-hidden">Date:</span>31 janvier 2023
</div>
<h3 class="c-slider-js-nav__article-heading">Sunt fuga quod quis dicta quia atque harum et.</h3>
<a href="#nowhere" class="c-button c-button--transparent-alt o-card-link__link"><span>Lire la suite<span class="u-visually-hidden"> de Sunt fuga quod quis dicta quia atque harum et.</span></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</article>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="c-nav__list-item" data-level="0">
<button class="c-nav__list-link c-nav__list-link--w-children c-nav__list-link--level-0" aria-haspopup="true" aria-expanded="false">
Somaire
</button>
<!-- Level 1 -->
<ul class="c-nav__list c-nav__list--level c-nav__list--level-1 masonry">
<li class="c-nav__list-item masonry-item" data-level="1">
<button class="c-nav__list-link c-nav__list-link--w-children u-display-xl-none" aria-haspopup="true" aria-expanded="false">
Organigrame
</button>
<span class="c-nav__list-link c-nav__list-link--level-1 c-nav__list-link--w-children u-display-none u-display-xl-block">
Organigrame
</span>
<!-- Level 2 -->
<ul class="c-nav__list c-nav__list--level c-nav__list--level-2">
<li class="c-nav__list-item" data-level="2">
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-2">
Facebook live
</a>
</li>
<li class="c-nav__list-item" data-level="2">
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-2">
Paléo Festival
</a>
</li>
<li class="c-nav__list-item" data-level="2">
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-2">
Visite du président indien
</a>
</li>
<li class="c-nav__list-item" data-level="2">
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-2 c-nav__list-link--current" aria-current="page">
Attaques fourgons blindés
</a>
</li>
<li class="c-nav__list-item" data-level="2">
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-2">
100ème anniversaire de la Fédération vaudoise des jeunesses campagnardes
</a>
</li>
<li class="c-nav__list-item" data-level="2">
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-2">
Fermeture de l'autoroute A12
</a>
</li>
<li class="c-nav__list-item" data-level="2">
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-2">
Bol d'Or
</a>
</li>
<li class="c-nav__list-item" data-level="2">
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-2">
Inauguration CIO
</a>
</li>
</ul><!-- /Level 2 -->
</li>
<li class="c-nav__list-item masonry-item" data-level="1">
<button class="c-nav__list-link c-nav__list-link--w-children u-display-xl-none" aria-haspopup="true" aria-expanded="false">
La police en chiffres
</button>
<span class="c-nav__list-link c-nav__list-link--level-1 c-nav__list-link--w-children u-display-none u-display-xl-block">
La police en chiffres
</span>
<!-- Level 2 -->
<ul class="c-nav__list c-nav__list--level c-nav__list--level-2">
<li class="c-nav__list-item" data-level="2">
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-2">
Communication tactique
</a>
</li>
<li class="c-nav__list-item" data-level="2">
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-2">
Bilderberg
</a>
</li>
</ul><!-- /Level 2 -->
</li>
<li class="c-nav__list-item masonry-item" data-level="1">
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-1">
Finances
</a>
</li>
<li class="c-nav__list-item masonry-item" data-level="1">
<button class="c-nav__list-link c-nav__list-link--w-children u-display-xl-none" aria-haspopup="true" aria-expanded="false">
Objectifs 2020
</button>
<span class="c-nav__list-link c-nav__list-link--level-1 c-nav__list-link--w-children u-display-none u-display-xl-block">
Objectifs 2020
</span>
<!-- Level 2 -->
<ul class="c-nav__list c-nav__list--level c-nav__list--level-2">
<li class="c-nav__list-item" data-level="2">
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-2">
Montreux Jazz Festival
</a>
</li>
<li class="c-nav__list-item" data-level="2">
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-2">
Fête des Vignerons
</a>
</li>
</ul><!-- /Level 2 -->
</li>
<li class="c-nav__list-item masonry-item" data-level="1">
<button class="c-nav__list-link c-nav__list-link--w-children u-display-xl-none" aria-haspopup="true" aria-expanded="false">
Valorisation des colabirateurs
</button>
<span class="c-nav__list-link c-nav__list-link--level-1 c-nav__list-link--w-children u-display-none u-display-xl-block">
Valorisation des colabirateurs
</span>
<!-- Level 2 -->
<ul class="c-nav__list c-nav__list--level c-nav__list--level-2">
<li class="c-nav__list-item" data-level="2">
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-2">
Cérémonie du souvenir
</a>
</li>
<li class="c-nav__list-item" data-level="2">
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-2">
Escrocrie à la caisse de chômage
</a>
</li>
</ul><!-- /Level 2 -->
</li>
<li class="c-nav__list-item masonry-item" data-level="1">
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-1">
Témoignages
</a>
</li>
</ul><!-- /Level 1 -->
</li>
<li class="c-nav__list-item" data-level="0">
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-0">
Remerciement
</a>
</li>
<li class="c-nav__list-item" data-level="0">
<button class="c-nav__list-link c-nav__list-link--w-children c-nav__list-link--level-0" aria-haspopup="true" aria-expanded="false">
Où sommes-nous ?
</button>
<!-- Level 1 -->
<ul class="c-nav__list c-nav__list--level c-nav__list--level-1 masonry">
<li class="c-nav__list-item masonry-item" data-level="1">
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-1">
Menu 4.1
</a>
</li>
<li class="c-nav__list-item masonry-item" data-level="1">
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-1">
Menu 4.2
</a>
</li>
<li class="c-nav__list-item masonry-item" data-level="1">
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-1">
Menu 4.3
</a>
</li>
<li class="c-nav__list-item masonry-item" data-level="1">
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-1">
Menu 4.4
</a>
</li>
<li class="c-nav__list-item masonry-item" data-level="1">
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-1">
Menu 4.5
</a>
</li>
<li class="c-nav__list-item masonry-item" data-level="1">
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-1">
Menu 4.6
</a>
</li>
<li class="c-nav__list-item masonry-item" data-level="1">
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-1">
Menu 4.7
</a>
</li>
<li class="c-nav__list-item masonry-item" data-level="1">
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-1">
Menu 4.8
</a>
</li>
<li class="c-nav__list-item masonry-item" data-level="1">
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-1">
Menu 4.9
</a>
</li>
</ul><!-- /Level 1 -->
</li>
<li class="c-nav__list-item" data-level="0">
<button class="c-nav__list-link c-nav__list-link--w-children c-nav__list-link--level-0" aria-haspopup="true" aria-expanded="false">
Menu 5 est passablement très très long
</button>
<!-- Level 1 -->
<ul class="c-nav__list c-nav__list--level c-nav__list--level-1 masonry">
<li class="c-nav__list-item masonry-item" data-level="1">
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-1">
Menu 5.1 très très très très très très très très très très très très long
</a>
</li>
<li class="c-nav__list-item masonry-item" data-level="1">
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-1">
Menu 5.2
</a>
</li>
<li class="c-nav__list-item masonry-item" data-level="1">
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-1">
Menu 5.3
</a>
</li>
</ul><!-- /Level 1 -->
</li>
</ul><!-- /Level 0 -->
</div>
</div>
</nav>
</div>
<div class="c-nav">
<nav class="o-container o-container--large c-nav__container" aria-label="Navigation principale">
<div class="c-nav__logo">
{% render '@logo-header' %}
</div>
<!-- Menu icon -->
<button class="c-nav__toggle" aria-label="Ouvrir le menu" aria-expanded="false">
<span class="c-menu-icon c-menu-icon--cross">
<span></span>
</span>
</button>
<!-- Nav container -->
<div class="c-nav__list-container">
<!-- Nav alternative actions (search) -->
<div class="c-nav__alt-actions">
<a href="#nowhere" class="c-nav__button-search">{% render '@svg-search' %} <span class="u-display-xl-none">Rechercher</span></a>
{%- if pdfdownload -%}
<a href="#nowhere" class="c-nav__button-pdf" title="Télécharger le rapport PDF">{% render '@svg-file-earmark-pdf' %} <span class="u-display-xl-none">Télécharger le rapport PDF</span></a>
{%- endif -%}
</div>
<!-- Nav Level indicator -->
<ul class="c-nav__level-indicator" aria-hidden="true">
</ul>
<!-- Nav list wrapper -->
<div class="c-nav__list-wrapper">
<!-- Level 0 -->
<ul class="c-nav__list" aria-label="Arborescence des pages">
<li class="c-nav__list-item c-nav__list-item-project" data-level="0">
<button class="c-nav__list-link c-nav__list-link--w-children" aria-haspopup="true" aria-expanded="false">
Projets
</button>
<ul class="c-nav__list c-nav__list--level c-nav__list--level-1 c-nav_list--level-project">
<li class="c-nav__list-item" data-level="1">
{% render '@slider-js-nav' %}
</li>
</ul>
</li>
{% for firstLevelItem in firstLevelItems %}
<li class="c-nav__list-item" data-level="0">
{% if firstLevelItem.secondLevelItems %}
<button class="c-nav__list-link c-nav__list-link--w-children c-nav__list-link--level-0" aria-haspopup="true" aria-expanded="false">
{{ firstLevelItem.name }}
</button>
<!-- Level 1 -->
<ul class="c-nav__list c-nav__list--level c-nav__list--level-1 masonry">
{% for secondLevelItem in firstLevelItem.secondLevelItems %}
<li class="c-nav__list-item masonry-item" data-level="1">
{% if secondLevelItem.thirdLevelItems %}
<button class="c-nav__list-link c-nav__list-link--w-children u-display-xl-none" aria-haspopup="true" aria-expanded="false">
{{ secondLevelItem.name }}
</button>
<span class="c-nav__list-link c-nav__list-link--level-1 c-nav__list-link--w-children u-display-none u-display-xl-block">
{{ secondLevelItem.name }}
</span>
<!-- Level 2 -->
<ul class="c-nav__list c-nav__list--level c-nav__list--level-2">
{% for thirdLevelItem in secondLevelItem.thirdLevelItems %}
<li class="c-nav__list-item" data-level="2">
{% if thirdLevelItem.current %}
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-2 c-nav__list-link--current" aria-current="page">
{% else %}
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-2">
{% endif %}
{{ thirdLevelItem.name }}
</a>
</li>
{% endfor %}
</ul><!-- /Level 2 -->
{% else %}
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-1">
{{ secondLevelItem.name }}
</a>
{% endif %}
</li>
{% endfor %}
</ul><!-- /Level 1 -->
{% else %}
<a href="#nowhere" class="c-nav__list-link c-nav__list-link--level-0">
{{ firstLevelItem.name }}
</a>
{% endif %}
</li>
{% endfor %}
</ul><!-- /Level 0 -->
</div>
</div>
</nav>
</div>
{
"toggle": "Menu",
"firstLevelItems": [
{
"name": "Somaire",
"secondLevelItems": [
{
"name": "Organigrame",
"url": "#",
"thirdLevelItems": [
{
"name": "Facebook live",
"url": "#"
},
{
"name": "Paléo Festival",
"url": "#"
},
{
"name": "Visite du président indien",
"url": "#"
},
{
"name": "Attaques fourgons blindés",
"url": "#",
"current": true
},
{
"name": "100ème anniversaire de la Fédération vaudoise des jeunesses campagnardes",
"url": "#"
},
{
"name": "Fermeture de l'autoroute A12",
"url": "#"
},
{
"name": "Bol d'Or",
"url": "#"
},
{
"name": "Inauguration CIO",
"url": "#"
}
]
},
{
"name": "La police en chiffres",
"url": "#",
"thirdLevelItems": [
{
"name": "Communication tactique",
"url": "#"
},
{
"name": "Bilderberg",
"url": "#"
}
]
},
{
"name": "Finances",
"url": "#"
},
{
"name": "Objectifs 2020",
"url": "#",
"thirdLevelItems": [
{
"name": "Montreux Jazz Festival",
"url": "#"
},
{
"name": "Fête des Vignerons",
"url": "#"
}
]
},
{
"name": "Valorisation des colabirateurs",
"url": "#",
"thirdLevelItems": [
{
"name": "Cérémonie du souvenir",
"url": "#"
},
{
"name": "Escrocrie à la caisse de chômage",
"url": "#"
}
]
},
{
"name": "Témoignages",
"url": "#"
}
]
},
{
"name": "Remerciement"
},
{
"name": "Où sommes-nous ?",
"secondLevelItems": [
{
"name": "Menu 4.1",
"url": "#"
},
{
"name": "Menu 4.2",
"url": "#"
},
{
"name": "Menu 4.3",
"url": "#"
},
{
"name": "Menu 4.4",
"url": "#"
},
{
"name": "Menu 4.5",
"url": "#"
},
{
"name": "Menu 4.6",
"url": "#"
},
{
"name": "Menu 4.7",
"url": "#"
},
{
"name": "Menu 4.8",
"url": "#"
},
{
"name": "Menu 4.9",
"url": "#"
}
]
},
{
"name": "Menu 5 est passablement très très long",
"secondLevelItems": [
{
"name": "Menu 5.1 très très très très très très très très très très très très long",
"url": "#"
},
{
"name": "Menu 5.2",
"url": "#"
},
{
"name": "Menu 5.3",
"url": "#"
}
]
}
],
"pdfdownload": true
}
.c-menu-icon {
position: relative;
width: 40px;
height: 40px;
color: transparent;
overflow: hidden;
}
.c-menu-icon span {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 22px;
height: 2px;
background-color: #fff;
transform: translateX(-50%) translateY(-50%);
}
.c-menu-icon span::before,
.c-menu-icon span::after {
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
width: 22px;
height: 2px;
background-color: #fff;
transform: translateY(-6px);
transition: transform 0.35s;
}
.c-menu-icon span::after {
transform: translateY(6px);
}
.c-menu-icon:hover span::before {
transform: translateY(-8px);
}
.c-menu-icon:hover span::after {
transform: translateY(8px);
}
.c-menu-icon--cross {
transition: transform 0.35s;
}
.c-menu-icon--cross span::before,
.c-menu-icon--cross span::after {
transform-origin: 50% 50%;
}
.c-menu-icon--cross span {
z-index: 2;
transition: background 0.35s, transform 0.35s;
}
.c-menu-icon--cross.js-c-menu-icon--open {
transform: rotate(180deg);
}
.c-menu-icon--cross.js-c-menu-icon--open span {
background: transparent;
}
.c-menu-icon--cross.js-c-menu-icon--open span::before {
transform: translateY(0) rotate(45deg);
}
.c-menu-icon--cross.js-c-menu-icon--open span::after {
transform: translateY(0) rotate(-45deg);
}
/* ======================================================================
# _components.nav.css
====================================================================== */
/* -----------------------------------
# b-nav--open (class for body when nav is open)
----------------------------------- */
.js-b-nav--open {
@apply
overflow-y-hidden
;
touch-action: none;
}
/* -----------------------------------
# c-nav
----------------------------------- */
.c-nav {
@extend .u-print-hidden;
@apply
text-white
py-4
overflow-x-hidden
fixed
top-0
w-full
z-30
overflow-y-hidden
;
transition: background-color 0.15s ease-out;
will-change: background-color;
}
.js-c-nav--open {
@apply
bg-primary
h-screen
overflow-y-scroll
;
}
.js-c-nav--sticky {
@apply
bg-primary
;
}
.c-nav__toggle:focus {
@apply
outline-focus
;
}
.c-nav__logo {
@apply
flex
items-center
;
}
.c-nav__logo-text {
@apply
not-italic
uppercase
font-medium
ml-4
leading-6
text-base
tracking-wider
;
}
/* -----------------------------------
# c-nav__container
----------------------------------- */
.c-nav__container {
@apply
flex
flex-wrap
justify-between
items-center
relative
xl:flex-nowrap
;
}
/* -----------------------------------
# c-nav__alt-actions
----------------------------------- */
.c-nav__alt-actions {
@apply
mt-6
mb-4
flex
flex-col
xl:order-last
xl:m-0
xl:flex-row
;
}
.c-nav__button-search {
@apply
p-4
bg-white
rounded
text-primary
flex
items-center
xl:bg-transparent
xl:text-white
xl:border-l
xl:border-white
xl:rounded-none
xl:px-3
xl:py-2
;
&:focus {
@apply
outline-focus
;
}
}
.c-nav__button-search svg {
@apply
h-full
w-5
mr-4
xl:mr-0
;
}
/* -----------------------------------
# c-nav__button-pdf
----------------------------------- */
.c-nav__button-pdf {
@apply
p-4
text-white
flex
items-center
xl:px-3
xl:py-2
;
&:focus {
@apply
outline-focus
;
}
}
.c-nav__button-pdf svg {
@apply
h-full
w-5
mr-4
xl:mr-0
;
}
/* -----------------------------------
# Toggle icon
----------------------------------- */
.c-nav__toggle {
@apply
w-7
h-7
xl:hidden
xl:invisible
;
}
/* -----------------------------------
# c-nav__list-container
----------------------------------- */
.c-nav__list-container {
@apply
flex-initial
w-full
invisible
hidden
xl:flex
xl:visible
xl:w-auto
xl:items-center
;
}
.js-c-nav--open .c-nav__list-container {
@apply
visible
block
xl:flex
;
}
/* -----------------------------------
# c-nav__list-wrapper
----------------------------------- */
.c-nav__list-wrapper {
@apply
relative
xl:static
;
}
/* -----------------------------------
# c-nav__list
----------------------------------- */
.c-nav__list {
@apply
absolute
w-full
top-0
pb-10
xl:static
xl:pb-0
xl:flex
;
transition: transform 0.35s ease, opacity 0.25s ease 0.15s;
}
.c-nav__list--level {
@apply
opacity-0
invisible
hidden
z-0
xl:flex-wrap
;
right: -100vw;
}
.js-c-nav__list--open {
@apply
opacity-100
z-30
visible
block
xl:absolute
xl:top-40
xl:left-0
xl:flex
xl:px-14
;
}
.js-c-nav__list--open .c-nav__list {
@apply
xl:block
xl:visible
xl:opacity-100
;
}
.c-nav__list--level-1:not(.c-nav_list--level-2):not(.c-nav_list--level-project) > .c-nav__list-item {
@apply
xl:w-80
xl:mb-10
;
}
.c-nav__list-item-project .c-nav__list-item {
@apply
w-full
;
}
.js-c-nav__list--hide {
transform: translate3d(-100vw, 0, 0);
}
/* -----------------------------------
# c-nav__list-link
----------------------------------- */
.c-nav__list-link {
@apply
tracking-wide
uppercase
font-bold
py-2
pr-6
block
relative
w-full
text-left
xl:w-auto
xl:px-3
rounded-md
;
transition: background-color 0.35s ease;
will-change: background-color;
}
.c-nav__list--level button.c-nav__list-link--w-children:hover,
.c-nav__list--level button.c-nav__list-link--w-children:focus {
cursor: default;
outline: none;
}
.c-nav__list-item--active,
.js-c-nav__list-link--active,
a.c-nav__list-link:hover {
background-color: rgba(252, 252, 252, 0.25);
}
.c-nav__list-link:focus {
@apply
outline-focus
;
}
.c-nav__list-link--level-1 {
@apply
xl:text-base
;
}
.c-nav__list-link--level-2 {
@apply
xl:normal-case
xl:font-normal
xl:text-primary-100
;
}
/***
* Current page
*/
.c-nav__list-link--current {
text-decoration-color: var(--color__primary--600);
text-decoration-thickness: 0.2em;
text-decoration-line: underline;
}
.c-nav__list-link--w-children::after {
@apply
absolute
right-0
top-2
xl:invisible
xl:hidden
;
background-size: 8px 8px;
height: 8px;
width: 8px;
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E%0A");
}
/* -----------------------------------
# c-nav__level-indicator
----------------------------------- */
.c-nav__level-indicator {
@apply
mb-6
xl:invisible
xl:hidden
;
min-height: 28px;
}
.c-nav__level-indicator li {
@apply
inline
;
}
.c-nav__level-indicator button {
@apply
pl-3
mr-4
relative
;
}
.c-nav__level-indicator button::before {
@apply
absolute
left-0
;
background-size: 7px 7px;
height: 6px;
width: 6px;
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M7 1L1 7l6 6' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
}
// Navigation mobile
class MobileNavigation {
constructor(nav) {
this.levelIndicator = document.querySelector('.c-nav__level-indicator');
this.nav = nav;
this.navOpen = false;
this.currentLevel = 0;
this.navToggle = document.querySelector('.c-nav__toggle');
// Open menu tab
for (const item of document.querySelectorAll('.c-nav__list-link--w-children')) {
item.addEventListener('click', event => {
if (this.currentLevel === Number(event.target.parentNode.dataset.level)) {
this.levelIndicator.append(this.createLevelIndicator(event.target));
event.target.closest('.c-nav__list').classList.add('js-c-nav__list--hide');
event.target.parentNode.querySelector('.c-nav__list').classList.add('js-c-nav__list--open');
item.setAttribute('aria-expanded', true);
window.dispatchEvent(new Event('resize'));
this.currentLevel++;
} else if (event.target.parentNode.parentNode.matches('.c-nav__list--level-1')) {
this.closeLevelTabs(event, 2);
} else {
this.closeAllTabs(event);
}
});
}
// Open navigation
this.navToggle.addEventListener('click', event => this.toggle(event));
}
// Toggle icon style
toggle(event) {
if (this.navOpen) {
document.documentElement.style.overflow = 'auto';
document.body.classList.remove('js-b-nav--open');
this.navToggle.querySelector('.c-menu-icon').classList.remove('js-c-menu-icon--open');
this.nav.classList.remove('js-c-nav--open');
this.closeAllTabs(event);
this.navOpen = false;
} else {
document.documentElement.style.overflow = 'hidden';
document.body.classList.add('js-b-nav--open');
this.navToggle.querySelector('.c-menu-icon').classList.add('js-c-menu-icon--open');
this.nav.classList.add('js-c-nav--open');
this.navOpen = true;
}
this.navToggle.setAttribute('aria-expanded', this.navOpen);
}
closeAllTabs(event) {
for (const item of document.querySelectorAll('.c-nav__list')) {
item.classList.remove('js-c-nav__list--open');
item.classList.remove('js-c-nav__list--hide');
for (const button of item.querySelectorAll('.c-nav__list-link--w-children')) {
button.setAttribute('aria-expanded', false);
}
for (const item of this.levelIndicator.querySelectorAll('li')) {
item.remove();
}
}
this.currentLevel = 0;
}
closeLevelTabs(event, level) {
for (const item of document.querySelectorAll('.c-nav__list--level-' + (level - 1))) {
item.classList.remove('js-c-nav__list--hide');
}
for (const item of document.querySelectorAll('.c-nav__list--level-' + level)) {
item.classList.remove('js-c-nav__list--open');
item.parentNode.querySelector('.c-nav__list-link--w-children').setAttribute('aria-expanded', false);
}
const levelElement = this.levelIndicator.querySelector('li:nth-child(' + level + ')');
levelElement.remove();
this.currentLevel = 1;
}
createLevelIndicator(target) {
const levelLink = document.createElement('button');
const levelText = document.createTextNode(target.innerHTML);
levelLink.append(levelText);
if (target.parentNode.parentNode.matches('.c-nav__list--level-1')) {
levelLink.addEventListener('click', event => {
this.closeLevelTabs(event, 2);
});
} else {
levelLink.addEventListener('click', event => {
this.closeAllTabs(event);
});
}
const level = document.createElement('li');
level.append(levelLink);
return level;
}
}
// Navigation desktop
class DesktopNavigation {
constructor(nav) {
this.nav = nav;
// Open menu tab
for (const item of document.querySelectorAll('.c-nav__list:not(.c-nav__list--level) > .c-nav__list-item > .c-nav__list-link--w-children')) {
item.addEventListener('click', event => {
if (event.target.classList.contains('js-c-nav__list-link--active')) {
this.close();
} else {
this.close();
window.dispatchEvent(new Event('resize'));
event.target.setAttribute('aria-expanded', true);
event.target.classList.add('js-c-nav__list-link--active');
event.target.parentNode.querySelector('.c-nav__list').classList.add('js-c-nav__list--open');
document.documentElement.style.overflow = 'hidden';
document.body.classList.add('js-b-nav--open');
this.nav.classList.add('js-c-nav--open');
}
});
}
for (const item of document.querySelectorAll('.c-nav__list--level button.c-nav__list-link--w-children')) {
item.addEventListener('click', event => {
event.preventDefault();
});
}
for (const item of document.querySelectorAll('.masonry')) {
new Masonry(item, {
// Options
itemSelector: '.masonry-item',
columnWidth: 320,
transitionDuration: 0,
containerStyle: {position: 'absolute'},
});
}
}
close() {
document.documentElement.style.overflow = 'auto';
document.body.classList.remove('js-b-nav--open');
this.nav.classList.remove('js-c-nav--open');
for (const itemOpen of this.nav.querySelectorAll('.js-c-nav__list-link--active')) {
itemOpen.classList.remove('js-c-nav__list-link--active');
itemOpen.setAttribute('aria-expanded', false);
}
for (const itemOpen of this.nav.querySelectorAll('.js-c-nav__list--open')) {
itemOpen.classList.remove('js-c-nav__list--open');
}
}
}
class StickyNavigation {
constructor(nav) {
this.lastScrollPos = 0;
this.ticking = false;
this.nav = nav;
window.addEventListener('scroll', event => this.sticky(event));
}
sticky(event) {
this.lastScrollPos = window.scrollY;
if (!this.ticking) {
window.requestAnimationFrame(() => {
if (this.lastScrollPos > 50) {
this.nav.classList.add('js-c-nav--sticky');
} else {
this.nav.classList.remove('js-c-nav--sticky');
}
this.ticking = false;
});
}
this.ticking = true;
}
}
const initNavigation = () => {
new StickyNavigation(document.querySelector('.c-nav'));
const init = event => {
if (window.innerWidth < 1280) {
new MobileNavigation(document.querySelector('.c-nav'));
} else {
new DesktopNavigation(document.querySelector('.c-nav'));
}
};
init();
};
document.addEventListener('DOMContentLoaded', initNavigation);
No notes defined.