Antoine/carhop__dynamiques-theme__PROD-DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Antoine:397ff721f165877a84a840e38d73f7c8b39fde84
Branches Tags
Antoine:main
...
compare: Antoine:c4e8479b26379de53292261c1f8123e55841dd3c
Branches Tags
Antoine:main

7 Commits
397ff721f1 ... c4e8479b26

Author SHA1 Message Date
Nonimart
c4e8479b26 FEATURE Changing the menu template parts and behaviour
All checks were successful
continuous-integration/drone/push Build is passing
Details
2025-09-04 16:11:48 +02:00
Nonimart
d1610f4281 FEATURE Improving the mobile menu behaviour 2025-09-04 16:11:08 +02:00
Nonimart
2c1dabec6e FEATURE Introducing the mobile menu brand component 2025-09-04 16:09:04 +02:00
Nonimart
d56e10517a STYLE Few paddings adjustements 2025-09-04 16:08:54 +02:00
Nonimart
e7e09e5f8a FEATURE Introducing the mobile menu brand component 2025-09-04 16:08:26 +02:00
Nonimart
d4d955ca2e REFACTOR Changing Menu indentation and hierrachy and using template parts 2025-09-04 16:07:51 +02:00
Nonimart
d3c8054d33 FIX Changement du titre des onglets 2025-09-04 16:07:24 +02:00
9 changed files with 265 additions and 136 deletions
Show Stats Expand all files Collapse all files

82
header.php
View File

@ -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>
<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>
<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,
)
); ?>
<?php get_template_part('template-parts/header/mobile-menu-brand'); ?>
<?php get_template_part('template-parts/header/secondary-menu'); ?>
<?php get_template_part('template-parts/header/primary-menu'); ?>
</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>

1
resources/css/app.css
View File

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

2
resources/css/components/index-panel.css
View File

@ -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;

14
resources/css/layout/menu-mobile-brand.css Normal file
View File

@ -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;
}
}

187
resources/js/header.ts
View File

@ -1,61 +1,140 @@
export default function menuInit() {
let main_navigation =
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'
);
// Déclaration pour GSAP si disponible
declare var gsap: any;
// #### Open/close burger nav
burgerMenuToggle.addEventListener('click', function (e) {
class MobileMenu {
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');
burgerMenuToggle.toggleAttribute('aria-expanded');
gsap.from(primary_menu, {
opacity: 20,
y: '-100vh',
duration: 0.5,
ease: Power4.easeOut,
});
});
this.toggleMobileMenu();
}
// #### Close nav when reaching the end of the menu with tab
document.addEventListener(
'focusin',
(e) => {
const header = document.querySelector(
'#primary-header'
);
if (
header.classList.contains('nav-open') &&
!header.contains(document.activeElement)
) {
header.classList.remove('nav-open');
burgerMenuToggle.setAttribute(
'aria-expanded',
false
);
/**
* Gère la fermeture du menu lors du focus en dehors
*/
private handleFocusOut(e: Event): void {
if (!this.header || !this.isMenuOpen()) return;
burgerMenuToggle.focus();
}
},
true
);
const target = e.target as Element;
if (!this.header.contains(target)) {
this.closeMobileMenu();
this.mobileMenuToggle?.focus();
}
}
submenuToggles.forEach((button) => {
button.addEventListener('click', function (e) {
let isExpanded =
button.getAttribute('aria-expanded') === 'true';
button.setAttribute('aria-expanded', !isExpanded);
/**
* Gère le toggle des sous-menus
*/
private handleSubmenuToggle(e: Event, button: Element): void {
e.preventDefault();
const isExpanded = button.getAttribute('aria-expanded') === 'true';
button.setAttribute('aria-expanded', String(!isExpanded));
button.parentElement
.querySelector('.sub-menu')
.classList.toggle('sub-menu-open');
});
});
const submenu = button.parentElement?.querySelector('.sub-menu');
submenu?.classList.toggle('sub-menu-open');
}
}
export default function menuInit(): MobileMenu {
return new MobileMenu();
}

4
template-parts/articles/index-panel.php
View File

@ -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>

39
template-parts/header/mobile-menu-brand.php Normal file
View File

@ -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>

51
template-parts/header/primary-menu.php Normal file
View File

@ -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>

21
template-parts/header/secondary-menu.php Normal file
View File

@ -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>