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

Compare commits

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

No commits in common. "c4e8479b26379de53292261c1f8123e55841dd3c" and "397ff721f165877a84a840e38d73f7c8b39fde84" have entirely different histories.
c4e8479b26 ... 397ff721f1

9 changed files with 136 additions and 265 deletions
Show Stats Expand all files Collapse all files

82
header.php
View File

@ -31,12 +31,88 @@
<?php do_action('tailpress_header'); ?> <?php do_action('tailpress_header'); ?>
<header id="primary-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>
<?php get_template_part('template-parts/header/mobile-menu-brand'); ?> </div>
<?php get_template_part('template-parts/header/secondary-menu'); ?> <div class="primary-menu-container lg:flex lg:justify-between lg:items-center">
<?php get_template_part('template-parts/header/primary-menu'); ?> <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,
)
); ?>
</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'); ?> <?php get_template_part('template-parts/search-module'); ?>
</header> </header>

1
resources/css/app.css
View File

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

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

@ -4,7 +4,7 @@
overflow-y: auto; */ overflow-y: auto; */
&__header { &__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 { button {
@apply pb-6 text-base md:text-lg text-carhop-gray opacity-60 relative; @apply pb-6 text-base md:text-lg text-carhop-gray opacity-60 relative;

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

@ -1,14 +0,0 @@
.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,140 +1,61 @@
// Déclaration pour GSAP si disponible export default function menuInit() {
declare var gsap: any; 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'
);
class MobileMenu { // #### Open/close burger nav
private mobileMenu: HTMLElement | null; burgerMenuToggle.addEventListener('click', function (e) {
private mobileMenuToggle: HTMLElement | null; e.preventDefault();
private header: HTMLElement | null; header.classList.toggle('nav-open');
private primaryMenu: HTMLElement | null; burgerMenuToggle.toggleAttribute('aria-expanded');
private submenuToggles: NodeListOf<Element>; gsap.from(primary_menu, {
opacity: 20,
constructor() { y: '-100vh',
this.mobileMenu = document.querySelector('#menu-mobile-brand'); duration: 0.5,
this.header = document.querySelector('#primary-header'); ease: Power4.easeOut,
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));
}); });
} });
/** // #### Close nav when reaching the end of the menu with tab
* Ouvre le menu mobile document.addEventListener(
*/ 'focusin',
public openMobileMenu(): void { (e) => {
if (!this.mobileMenu || !this.mobileMenuToggle || !this.header) return; 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
);
this.mobileMenu.setAttribute('nav-open', 'true'); burgerMenuToggle.focus();
this.header.setAttribute('nav-open', 'true'); }
this.mobileMenuToggle.setAttribute('aria-expanded', 'true'); },
true
);
// // Animation GSAP si disponible submenuToggles.forEach((button) => {
// if (typeof gsap !== 'undefined' && this.primaryMenu) { button.addEventListener('click', function (e) {
// gsap.from(this.primaryMenu, { let isExpanded =
// opacity: 0, button.getAttribute('aria-expanded') === 'true';
// y: '-100vh', button.setAttribute('aria-expanded', !isExpanded);
// duration: 0.5,
// ease: 'power4.out',
// });
// }
}
/** button.parentElement
* Ferme le menu mobile .querySelector('.sub-menu')
*/ .classList.toggle('sub-menu-open');
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();
this.toggleMobileMenu();
}
/**
* Gère la fermeture du menu lors du focus en dehors
*/
private handleFocusOut(e: Event): void {
if (!this.header || !this.isMenuOpen()) return;
const target = e.target as Element;
if (!this.header.contains(target)) {
this.closeMobileMenu();
this.mobileMenuToggle?.focus();
}
}
/**
* 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));
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"> <div class="index-panel__header">
<button class="focus" data-index="sommaire" aria-selected="true" aria-controls="sommaire-index"> <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=""> <img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-resume.svg" alt="">
Titre Résumé
</button> </button>
<button class="focus" data-index="footnotes" aria-selected="false" aria-controls="footnotes-index"> <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=""> <img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-notes.svg" alt="">
Notes Notes de bas de page
</button> </button>
</div> </div>

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

@ -1,39 +0,0 @@
<?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
View File

@ -1,51 +0,0 @@
<?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
View File

@ -1,21 +0,0 @@
<?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>