first(temp) mobile menu fix
This commit is contained in:
parent
30bd2e2344
commit
2409a09807
|
|
@ -36,10 +36,14 @@
|
|||
<?php do_action('tailpress_header'); ?>
|
||||
|
||||
<header id="main-header">
|
||||
|
||||
<!-- MENU MOBILE -->
|
||||
<?php
|
||||
get_template_part('template-components/header/mobile-brand');
|
||||
?>
|
||||
|
||||
<!-- MENU HOMEGRADE -->
|
||||
<?php get_template_part('template-components/header/menu-homegrade'); ?>
|
||||
|
||||
<!-- MENU RENOVATEUR -->
|
||||
<?php get_template_part('template-components/header/menu-renovateur'); ?>
|
||||
</header>
|
||||
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@
|
|||
@import './layout/section.css';
|
||||
@import './layout/menu-renovateur.css';
|
||||
@import './layout/menu-homegrade.css';
|
||||
@import './layout/menu-mobile-brand.css';
|
||||
@import './layout/containers.css';
|
||||
|
||||
/* ###### EDITOR ##### */
|
||||
|
|
|
|||
88
resources/css/layout/menu-mobile-brand.css
Normal file
88
resources/css/layout/menu-mobile-brand.css
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
.menu-mobile-brand {
|
||||
@apply py-4
|
||||
px-4
|
||||
lg:hidden
|
||||
xl:px-8
|
||||
relative
|
||||
flex
|
||||
flex-wrap
|
||||
items-center
|
||||
justify-between
|
||||
shadowed
|
||||
lg:justify-center
|
||||
xl:container
|
||||
xl:mx-auto;
|
||||
|
||||
&__interaction_toggles {
|
||||
@apply order-2 lg:order-3 flex items-center justify-start gap-2 md:gap-4 xl:ml-auto;
|
||||
}
|
||||
|
||||
&__mobile-menu-toggle {
|
||||
@apply lg:hidden flex items-center gap-4 px-4 md:px-8;
|
||||
.toggle-icon {
|
||||
/* transform: translate(0, 7px); */
|
||||
@apply w-6 h-4 relative opacity-80;
|
||||
&__bar {
|
||||
@apply bg-black w-full absolute;
|
||||
|
||||
height: 3px;
|
||||
}
|
||||
&__bar--top {
|
||||
top: 0;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
&__bar--middle {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
&__bar--bottom {
|
||||
bottom: 0;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
/* &:after {
|
||||
@apply block w-8 h-8;
|
||||
content: url('../resources/images/menu.svg');
|
||||
} */
|
||||
}
|
||||
&__mobile-menu-toggle[aria-expanded='true'] {
|
||||
.toggle-icon {
|
||||
@apply relative;
|
||||
&__bar--top {
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(45deg);
|
||||
}
|
||||
&__bar--middle {
|
||||
opacity: 0;
|
||||
}
|
||||
&__bar--bottom {
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__search-module-toggle {
|
||||
@apply h-fit;
|
||||
}
|
||||
}
|
||||
|
||||
header#main-header {
|
||||
@apply flex-col;
|
||||
}
|
||||
|
||||
.menu-renovateur__interaction_toggles,
|
||||
.menu-renovateur .website_logo {
|
||||
@apply hidden;
|
||||
@screen lg {
|
||||
display: revert;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.menu-renovateur:not([opened]) {
|
||||
@apply h-0 opacity-0;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
|
@ -217,6 +217,8 @@ export default function menuInit() {
|
|||
HANDLE MOBILE
|
||||
-----------------------------------------------------------*/
|
||||
const renovateurNavListContainer = header.querySelector('.menu-renovateur__navlist-container');
|
||||
const menuRenovateur = header.querySelector('.menu-renovateur');
|
||||
const menuMobileBrand = header.querySelector('.menu-mobile-brand');
|
||||
const HomegradeNavListContainer = header.querySelector('.menu-homegrade');
|
||||
function isMobileNavOpened() {
|
||||
return (
|
||||
|
|
@ -228,6 +230,7 @@ export default function menuInit() {
|
|||
function openMenu(menuContainer) {
|
||||
// Change Toggle expanded
|
||||
mobileMenuToggle.setAttribute('aria-expanded', 'true');
|
||||
menuMobileBrand.setAttribute('aria-expanded', 'true');
|
||||
|
||||
// Change Text button
|
||||
const textContent = mobileMenuToggle.querySelector('span.text-content');
|
||||
|
|
@ -239,6 +242,10 @@ export default function menuInit() {
|
|||
renovateurNavListContainer.removeAttribute('aria-hidden', '');
|
||||
renovateurNavListContainer.setAttribute('opening', '');
|
||||
|
||||
menuRenovateur.removeAttribute('closed', '');
|
||||
menuRenovateur.setAttribute('opened', '');
|
||||
menuRenovateur.removeAttribute('aria-hidden', '');
|
||||
|
||||
renovateurNavListContainer.addEventListener(
|
||||
'animationend',
|
||||
() => {
|
||||
|
|
@ -248,6 +255,13 @@ export default function menuInit() {
|
|||
);
|
||||
}
|
||||
|
||||
function openMobileBrand() {
|
||||
if (!menuMobileBrand) return;
|
||||
menuMobileBrand.removeAttribute('closed', '');
|
||||
menuMobileBrand.setAttribute('opened', '');
|
||||
menuMobileBrand.removeAttribute('aria-hidden', '');
|
||||
}
|
||||
|
||||
function openHomegrade() {
|
||||
HomegradeNavListContainer.removeAttribute('closed', '');
|
||||
HomegradeNavListContainer.setAttribute('opened', '');
|
||||
|
|
@ -265,6 +279,7 @@ export default function menuInit() {
|
|||
|
||||
openRenovateur();
|
||||
openHomegrade();
|
||||
openMobileBrand();
|
||||
}
|
||||
function closeMenu(menuContainer) {
|
||||
// Change Toggle expanded
|
||||
|
|
@ -280,6 +295,10 @@ export default function menuInit() {
|
|||
renovateurNavListContainer.setAttribute('aria-hidden', '');
|
||||
renovateurNavListContainer.setAttribute('closing', '');
|
||||
|
||||
menuRenovateur.removeAttribute('opened');
|
||||
menuRenovateur.setAttribute('aria-hidden', '');
|
||||
menuRenovateur.setAttribute('closing', '');
|
||||
|
||||
renovateurNavListContainer.addEventListener(
|
||||
'animationend',
|
||||
() => {
|
||||
|
|
|
|||
38
template-components/header/mobile-brand.php
Normal file
38
template-components/header/mobile-brand.php
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<?php
|
||||
$logoID = get_theme_mod('custom_logo');
|
||||
$logoSRC = wp_get_attachment_image_src($logoID, 'full');
|
||||
?>
|
||||
|
||||
<nav class="menu-mobile-brand" closed>
|
||||
<div class="website_logo">
|
||||
<?php if (has_custom_logo()) { ?>
|
||||
<a id="website-logo-link" href="<?php echo home_url() ?>" tabindex="0">
|
||||
<img src="<?php echo $logoSRC[0] ?>" alt="<?php echo __("Accueil Homegrade.brussels", "homegrade-theme__texte-fonctionnel") ?>">
|
||||
</a>
|
||||
<!-- <?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>
|
||||
<?php } ?>
|
||||
</div>
|
||||
<div class="menu-mobile-brand__interaction_toggles">
|
||||
<button id="search-module-toggle" class="menu-mobile-brand__search-module-toggle cta cta--circular cta--outline cta--outline-secondary !border border-secondary" aria-expanded="false">
|
||||
<img src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/search-icon.svg' ?>" alt="<?php echo __("Recherche", "homegrade-theme__texte-fonctionnel") ?>">
|
||||
</button>
|
||||
<button id="mobile-menu-toggle" class="menu-mobile-brand__mobile-menu-toggle cta cta--outline cta--button" data-text-open="<?php echo __("Menu", 'homegrade-theme__texte-fonctionnel') ?>" data-text-close="<?php echo __("Fermer", 'homegrade-theme__texte-fonctionnel') ?>" aria-expanded="false">
|
||||
<span class="text-content">
|
||||
<?php echo __("Menu", 'homegrade-theme__texte-fonctionnel') ?>
|
||||
</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>
|
||||
|
||||
<!-- SEARCH MODULE -->
|
||||
<?php get_template_part('template-components/header/search-module'); ?>
|
||||
</nav>
|
||||
Loading…
Reference in New Issue
Block a user