Antoine/homegrade_theme_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first menu fix for mobile/desktop

Browse Source
This commit is contained in:
Antoine M 2024-05-27 12:18:00 +02:00
parent ad76e72a3a
commit 4823dd6378
5 changed files with 27 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
header.php
View File

@ -40,6 +40,9 @@
<!-- MENU HOMEGRADE -->
<?php get_template_part('template-components/header/menu-homegrade'); ?>
<?php get_template_part('template-components/header/menu-renovateur'); ?>
<!-- SEARCH MODULE -->
<?php get_template_part('template-components/header/search-module'); ?>
</header>
<?php do_action('tailpress_content_start'); ?>

1
resources/css/layout/header.css
View File

@ -12,6 +12,7 @@ body:has(header .menu-renovateur .sub-menu--open) {
header#main-header {
@apply flex
relative
flex-col-reverse
lg:flex-col;
}

31
resources/js/menus.js
View File

@ -5,7 +5,8 @@ export default function menuInit() {
// Search module
const searchModule = header.querySelector('.search-module');
const searchModuleToggle = header.querySelector('#search-module-toggle');
// const searchModuleToggle = header.querySelector('#search-module-toggle');
const searchModuleToggles = header.querySelectorAll('#search-module-toggle');
// Mobile Menu
const mobileMenuToggle = header.querySelector('#mobile-menu-toggle');
@ -162,7 +163,7 @@ export default function menuInit() {
// IF TRANSITIONNING OR PROBLEM
return null;
}
function openSearch() {
function openSearch(searchModuleToggle) {
const searchFieldInput = header.querySelector('.search-module__search-form__input');
searchModuleToggle.setAttribute('aria-expanded', 'true');
searchModule.setAttribute('mobile-opened', '');
@ -172,7 +173,7 @@ export default function menuInit() {
searchModule.removeAttribute('aria-hidden');
}, 400);
}
function closeSearch() {
function closeSearch(searchModuleToggle) {
searchModuleToggle.setAttribute('aria-expanded', 'false');
searchModuleToggle.focus();
searchModule.setAttribute('aria-hidden', '');
@ -195,19 +196,21 @@ export default function menuInit() {
}
function handleSearchOpening() {
// SEARCH TOGGLE open/close
searchModuleToggle.addEventListener('click', function (e) {
closeSubmenus();
searchModuleToggles.forEach((searchModuleToggle) => {
searchModuleToggle.addEventListener('click', function (e) {
closeSubmenus();
// SEARCH IS CLOSED --> OPEN IT
if (isSearchOpen() === false) {
openSearch();
return;
}
// SEARCH IS CLOSED --> OPEN IT
if (isSearchOpen() === false) {
openSearch(searchModuleToggle);
return;
}
// SEARCH IS OPEN --> CLOSE IT
if (isSearchOpen() === true) {
closeSearch();
}
// SEARCH IS OPEN --> CLOSE IT
if (isSearchOpen() === true) {
closeSearch(searchModuleToggle);
}
});
});
}

5
template-components/header/menu-renovateur.php
View File

@ -213,7 +213,8 @@ $logoSRC = wp_get_attachment_image_src($logoID, 'full');
</button>
</div>
<!-- SEARCH MODULE -->
<?php get_template_part('template-components/header/search-module'); ?>
<?php
// get_template_part('template-components/header/search-module');
?>
</div>
</div>

5
template-components/header/mobile-brand.php
View File

@ -33,6 +33,7 @@ $logoSRC = wp_get_attachment_image_src($logoID, 'full');
</button>
</div>
<!-- SEARCH MODULE -->
<?php get_template_part('template-components/header/search-module'); ?>
<?php
// get_template_part('template-components/header/search-module');
?>
</nav>