FEATURE Changing the menu template parts and behaviour

header.php

@@ -31,88 +31,12 @@
 		<?php do_action('tailpress_header'); ?>
 
 		<header id="primary-header">
-			<div class="secondary-menu-container">
-				<div class="secondary-menu-nav">
-					<?php
-					wp_nav_menu(
-						array(
-							'container'    => 'false',
-							'theme_location'  => 'secondary',
-							'li_class'        => 'menu-navlink',
-							'fallback_cb'     => false,
-						)
-					); ?>
-					<div class="network-redirector">
-						<a href="<?php echo get_site_url(1); ?>">
-							CARHOP
-						</a>
-					</div>
-				</div>
 
-			</div>
+			<?php get_template_part('template-parts/header/mobile-menu-brand'); ?>
-			<div class="primary-menu-container lg:flex lg:justify-between lg:items-center">
+			<?php get_template_part('template-parts/header/secondary-menu'); ?>
-				<nav id="primary-menu-nav" class="flex justify-between items-center">
+			<?php get_template_part('template-parts/header/primary-menu'); ?>
-					<div class="website_logo">
-						<?php if (has_custom_logo()) { ?>
-							<?php the_custom_logo(); ?>
-						<?php } else { ?>
-							<a href=" <?php echo get_bloginfo('url'); ?>" class="font-extrabold text-lg uppercase">
-								<?php echo get_bloginfo('name'); ?>
-							</a>
-
-							<p class="text-sm font-light text-gray-600">
-								<?php echo get_bloginfo('description'); ?>
-							</p>
-
-						<?php } ?>
-					</div>
-
-					<button id="burger-menu-toggle" aria-label="<?php echo esc_html_e("Ouvrir le menu", 'deligraph-theme') ?>">
-						<div class="menu-toggle-bar menu-toggle-bar--top"></div>
-						<div class="menu-toggle-bar menu-toggle-bar--middle"></div>
-						<div class="menu-toggle-bar menu-toggle-bar--bottom"></div>
-						<!-- <?php echo get_template_part('resources/svg/burger-menu-icon.svg'); ?> -->
-					</button>
-					<div id="primary-menu">
-						<!-- <button id="close-menu-btn" aria-label="<?php echo esc_html_e("Fermer le menu", 'deligraph-theme') ?>">
-							<?php echo get_template_part('resources/svg/close-menu-icon.svg'); ?>
-						</button> -->
-						<?php
-						wp_nav_menu(
-							array(
-								'container'    => 'false',
-								// 'container_id'    => 'primary-menu',
-								// 'container_class' => '',
-								'theme_location'  => 'primary',
-								'li_class'        => 'menu-navlink',
-								'fallback_cb'     => false,
-							)
-						); ?>
 
 
-					</div>
-
-					<div class="tools-container">
-						<button class="search-button">
-							<img src="<?php echo get_template_directory_uri(); ?>/resources/img/icons/carhop-rechercher.svg" alt="">
-							Rechercher
-						</button>
-						<button class="subscribe-button">
-							<img src="<?php echo get_template_directory_uri(); ?>/resources/img/icons/carhop-abonner.svg" alt="">
-							S’abonner
-						</button>
-					</div>
-
-
-
-
-				</nav>
-
-
-
-
-
-			</div>
 			<?php get_template_part('template-parts/search-module'); ?>
 
 		</header>

resources/css/app.css

@@ -46,6 +46,7 @@
 
 /* ########### LAYOUT ############ */
 @import './layout/nav.css';
+@import './layout/menu-mobile-brand.css';
 
 /* ########### BLOCKS ############ */
 @import './blocks/explore-tags.css';

resources/css/components/index-panel.css

@@ -4,7 +4,7 @@
   overflow-y: auto; */
 
   &__header {
-    @apply p-4 md:p-6 pb-0 flex gap-4  border-b border-gray-300;
+    @apply p-4 md:p-6 !pb-0 flex gap-4  border-b border-gray-300;
 
     button {
       @apply pb-6 text-base md:text-lg  text-carhop-gray opacity-60 relative;

resources/css/layout/menu-mobile-brand.css

@@ -0,0 +1,14 @@
+.menu-mobile-brand {
+  @apply bg-primary text-white pb-8;
+
+  @screen lg {
+    @apply hidden;
+  }
+  &__inner-elements {
+    @apply flex justify-between items-center px-6;
+  }
+
+  .tools-container {
+    @apply flex;
+  }
+}

resources/js/header.ts

@@ -1,61 +1,140 @@
-export default function menuInit() {
+// Déclaration pour GSAP si disponible
-  let main_navigation =
+declare var gsap: any;
-    document.querySelector('#primary-menu');
-  const header = document.querySelector('#primary-header');
-  const primary_menu =
-    header.querySelector('#primary-menu');
-  const burgerMenuToggle = header.querySelector(
-    '#burger-menu-toggle'
-  );
-  const submenuToggles = primary_menu.querySelectorAll(
-    '.menu-item-submenu-toggle'
-  );
 
-  // #### Open/close burger nav
+class MobileMenu {
-  burgerMenuToggle.addEventListener('click', function (e) {
+  private mobileMenu: HTMLElement | null;
+  private mobileMenuToggle: HTMLElement | null;
+  private header: HTMLElement | null;
+  private primaryMenu: HTMLElement | null;
+  private submenuToggles: NodeListOf<Element>;
+
+  constructor() {
+    this.mobileMenu = document.querySelector('#menu-mobile-brand');
+    this.header = document.querySelector('#primary-header');
+    this.primaryMenu = this.header?.querySelector('#primary-menu-nav') || null;
+    this.mobileMenuToggle = this.mobileMenu?.querySelector('#mobile-menu-toggle') || null;
+    this.submenuToggles =
+      this.primaryMenu?.querySelectorAll('.menu-item-submenu-toggle') || ([] as any);
+
+    this.init();
+  }
+
+  /**
+   * Initialise le menu mobile et ses événements
+   */
+  private init(): void {
+    if (!this.mobileMenu || !this.header || !this.mobileMenuToggle || !this.primaryMenu) {
+      console.warn('Éléments du menu mobile introuvables');
+      return;
+    }
+
+    this.bindEvents();
+  }
+
+  /**
+   * Lie tous les événements du menu mobile
+   */
+  private bindEvents(): void {
+    // Événement pour le toggle du menu mobile
+    this.mobileMenuToggle?.addEventListener('click', (e) => this.handleToggleClick(e));
+
+    // Événement pour fermer le menu avec Tab
+    document.addEventListener('focusin', (e) => this.handleFocusOut(e), true);
+
+    // Événements pour les sous-menus
+    this.submenuToggles.forEach((button) => {
+      button.addEventListener('click', (e) => this.handleSubmenuToggle(e, button));
+    });
+  }
+
+  /**
+   * Ouvre le menu mobile
+   */
+  public openMobileMenu(): void {
+    if (!this.mobileMenu || !this.mobileMenuToggle || !this.header) return;
+
+    this.mobileMenu.setAttribute('nav-open', 'true');
+    this.header.setAttribute('nav-open', 'true');
+    this.mobileMenuToggle.setAttribute('aria-expanded', 'true');
+
+    // // Animation GSAP si disponible
+    // if (typeof gsap !== 'undefined' && this.primaryMenu) {
+    //   gsap.from(this.primaryMenu, {
+    //     opacity: 0,
+    //     y: '-100vh',
+    //     duration: 0.5,
+    //     ease: 'power4.out',
+    //   });
+    // }
+  }
+
+  /**
+   * Ferme le menu mobile
+   */
+  public closeMobileMenu(): void {
+    if (!this.mobileMenu || !this.mobileMenuToggle || !this.header) return;
+
+    this.mobileMenu.setAttribute('nav-open', 'false');
+    this.header.setAttribute('nav-open', 'false');
+    this.mobileMenuToggle.setAttribute('aria-expanded', 'false');
+  }
+
+  /**
+   * Toggle l'état du menu mobile
+   */
+  public toggleMobileMenu(): void {
+    if (!this.mobileMenu) return;
+
+    if (this.mobileMenu.getAttribute('nav-open') === 'true') {
+      this.closeMobileMenu();
+      this.mobileMenuToggle.textContent = 'Menu';
+    } else {
+      this.openMobileMenu();
+      this.mobileMenuToggle.textContent = 'Fermer';
+    }
+  }
+
+  /**
+   * Vérifie si le menu mobile est ouvert
+   */
+  public isMenuOpen(): boolean {
+    return this.mobileMenu?.getAttribute('nav-open') === 'true' || false;
+  }
+
+  /**
+   * Gère le clic sur le bouton toggle
+   */
+  private handleToggleClick(e: Event): void {
     e.preventDefault();
-    header.classList.toggle('nav-open');
+    this.toggleMobileMenu();
-    burgerMenuToggle.toggleAttribute('aria-expanded');
+  }
-    gsap.from(primary_menu, {
-      opacity: 20,
-      y: '-100vh',
-      duration: 0.5,
-      ease: Power4.easeOut,
-    });
-  });
 
-  // #### Close nav when reaching the end of the menu with tab
+  /**
-  document.addEventListener(
+   * Gère la fermeture du menu lors du focus en dehors
-    'focusin',
+   */
-    (e) => {
+  private handleFocusOut(e: Event): void {
-      const header = document.querySelector(
+    if (!this.header || !this.isMenuOpen()) return;
-        '#primary-header'
-      );
-      if (
-        header.classList.contains('nav-open') &&
-        !header.contains(document.activeElement)
-      ) {
-        header.classList.remove('nav-open');
-        burgerMenuToggle.setAttribute(
-          'aria-expanded',
-          false
-        );
 
-        burgerMenuToggle.focus();
+    const target = e.target as Element;
-      }
+    if (!this.header.contains(target)) {
-    },
+      this.closeMobileMenu();
-    true
+      this.mobileMenuToggle?.focus();
-  );
+    }
+  }
 
-  submenuToggles.forEach((button) => {
+  /**
-    button.addEventListener('click', function (e) {
+   * Gère le toggle des sous-menus
-      let isExpanded =
+   */
-        button.getAttribute('aria-expanded') === 'true';
+  private handleSubmenuToggle(e: Event, button: Element): void {
-      button.setAttribute('aria-expanded', !isExpanded);
+    e.preventDefault();
+    const isExpanded = button.getAttribute('aria-expanded') === 'true';
+    button.setAttribute('aria-expanded', String(!isExpanded));
 
-      button.parentElement
+    const submenu = button.parentElement?.querySelector('.sub-menu');
-        .querySelector('.sub-menu')
+    submenu?.classList.toggle('sub-menu-open');
-        .classList.toggle('sub-menu-open');
+  }
-    });
+}
-  });
+
+export default function menuInit(): MobileMenu {
+  return new MobileMenu();
 }

template-parts/articles/index-panel.php

@@ -3,11 +3,11 @@
 	<div class="index-panel__header">
 		<button class="focus" data-index="sommaire" aria-selected="true" aria-controls="sommaire-index">
 			<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-resume.svg" alt="">
-			Résumé
+			Titre
 		</button>
 		<button class="focus" data-index="footnotes" aria-selected="false" aria-controls="footnotes-index">
 			<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-notes.svg" alt="">
-			Notes de bas de page
+			Notes
 		</button>
 	</div>
 

template-parts/header/mobile-menu-brand.php

@@ -0,0 +1,39 @@
+<?php
+?>
+<div class="carhop-mobile-menu-brand menu-mobile-brand" id="menu-mobile-brand">
+	<button id="mobile-menu-toggle" class="menu-mobile-brand__mobile-menu-toggle cta cta--outline cta--button" data-text-open="Menu" data-text-close="Fermer" aria-expanded="true">
+		<span class="text-content">Menu</span>
+		<div class="toggle-icon">
+			<div class="toggle-icon__bar toggle-icon__bar--top"></div>
+			<div class="toggle-icon__bar toggle-icon__bar--middle"></div>
+			<div class="toggle-icon__bar toggle-icon__bar--bottom"></div>
+		</div>
+
+	</button>
+	<div class="menu-mobile-brand__inner-elements">
+		<div class="website_logo">
+			<?php if (has_custom_logo()) { ?>
+				<?php the_custom_logo(); ?>
+			<?php } else { ?>
+				<a href=" <?php echo get_bloginfo('url'); ?>" class="font-extrabold text-lg uppercase">
+					<?php echo get_bloginfo('name'); ?>
+				</a>
+
+				<p class="text-sm font-light text-gray-600">
+					<?php echo get_bloginfo('description'); ?>
+				</p>
+
+			<?php } ?>
+		</div>
+		<div class="tools-container">
+			<button class="search-button">
+				<img src="<?php echo get_template_directory_uri(); ?>/resources/img/icons/carhop-rechercher.svg" alt="">
+				Rechercher
+			</button>
+			<button class="subscribe-button">
+				<img src="<?php echo get_template_directory_uri(); ?>/resources/img/icons/carhop-abonner.svg" alt="">
+				S’abonner
+			</button>
+		</div>
+	</div>
+</div>

template-parts/header/primary-menu.php

@@ -0,0 +1,51 @@
+<?php
+?>
+<div class="primary-menu-container lg:flex lg:justify-between lg:items-center">
+	<nav id="primary-menu-nav" class="flex justify-between items-center">
+		<div class="website_logo">
+			<?php if (has_custom_logo()) { ?>
+				<?php the_custom_logo(); ?>
+			<?php } else { ?>
+				<a href=" <?php echo get_bloginfo('url'); ?>" class="font-extrabold text-lg uppercase">
+					<?php echo get_bloginfo('name'); ?>
+				</a>
+
+				<p class="text-sm font-light text-gray-600">
+					<?php echo get_bloginfo('description'); ?>
+				</p>
+
+			<?php } ?>
+		</div>
+
+
+		<div id="primary-menu">
+			<!-- <button id="close-menu-btn" aria-label="<?php echo esc_html_e("Fermer le menu", 'deligraph-theme') ?>">
+							<?php echo get_template_part('resources/svg/close-menu-icon.svg'); ?>
+						</button> -->
+			<?php
+			wp_nav_menu(
+				array(
+					'container'    => 'false',
+					// 'container_id'    => 'primary-menu',
+					// 'container_class' => '',
+					'theme_location'  => 'primary',
+					'li_class'        => 'menu-navlink',
+					'fallback_cb'     => false,
+				)
+			); ?>
+
+
+		</div>
+
+		<div class="tools-container">
+			<button class="search-button">
+				<img src="<?php echo get_template_directory_uri(); ?>/resources/img/icons/carhop-rechercher.svg" alt="">
+				Rechercher
+			</button>
+			<button class="subscribe-button">
+				<img src="<?php echo get_template_directory_uri(); ?>/resources/img/icons/carhop-abonner.svg" alt="">
+				S’abonner
+			</button>
+		</div>
+	</nav>
+</div>

template-parts/header/secondary-menu.php

@@ -0,0 +1,21 @@
+<?php
+?>
+<div class="secondary-menu-container">
+	<div class="secondary-menu-nav">
+		<?php
+		wp_nav_menu(
+			array(
+				'container'    => 'false',
+				'theme_location'  => 'secondary',
+				'li_class'        => 'menu-navlink',
+				'fallback_cb'     => false,
+			)
+		); ?>
+		<div class="network-redirector">
+			<a href="<?php echo get_site_url(1); ?>">
+				CARHOP
+			</a>
+		</div>
+	</div>
+
+</div>