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 --> <!-- MENU HOMEGRADE -->
<?php get_template_part('template-components/header/menu-homegrade'); ?> <?php get_template_part('template-components/header/menu-homegrade'); ?>
<?php get_template_part('template-components/header/menu-renovateur'); ?> <?php get_template_part('template-components/header/menu-renovateur'); ?>
<!-- SEARCH MODULE -->
<?php get_template_part('template-components/header/search-module'); ?>
</header> </header>
<?php do_action('tailpress_content_start'); ?> <?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 { header#main-header {
@apply flex @apply flex
relative
flex-col-reverse flex-col-reverse
lg:flex-col; lg:flex-col;
} }

31
resources/js/menus.js
View File

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

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

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

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

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