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

premiers resultats concrets sur le menus

Browse Source
This commit is contained in:
Antoine M 2023-07-11 17:14:35 +02:00
parent a103e01286
commit 55efd70f34
19 changed files with 1123 additions and 479 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

529
css/app.css
View File

@ -974,6 +974,166 @@ video {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
} }
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes slide-in {
0% {
transform: translateY(-80%);
}
100% {
transform: translateY(0%);
}
}
@keyframes slide-in {
0% {
transform: translateY(-80%);
}
100% {
transform: translateY(0%);
}
}
@-webkit-keyframes slide-out {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(-10%);
}
}
@keyframes slide-out {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(-10%);
}
}
@-webkit-keyframes height-in {
0% {
max-height: 0px;
}
100% {
max-height: 300px;
}
}
@keyframes height-in {
0% {
max-height: 0px;
}
100% {
max-height: 300px;
}
}
@-webkit-keyframes height-out {
0% {
max-height: 300px;
}
100% {
max-height: 0px;
}
}
@keyframes height-out {
0% {
max-height: 300px;
}
100% {
max-height: 0px;
}
}
@-webkit-keyframes translate-in {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(100%);
}
}
@keyframes translate-in {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(100%);
}
}
@-webkit-keyframes translate-out {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(60%);
}
}
@keyframes translate-out {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(60%);
}
}
/* ########### BASE ############ */ /* ########### BASE ############ */
body:not(.wp-admin) { body:not(.wp-admin) {
@ -1367,6 +1527,7 @@ button:focus {
position: absolute; position: absolute;
left: 0px; left: 0px;
bottom: 0px; bottom: 0px;
z-index: 10;
width: 100%; width: 100%;
--tw-translate-y: 100%; --tw-translate-y: 100%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@ -1376,6 +1537,28 @@ button:focus {
padding-right: 4rem; padding-right: 4rem;
padding-top: 1.5rem; padding-top: 1.5rem;
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
display: block;
}
/* transition: all 0.5s;
transition-timing-function: cubic-bezier(0, 0.51, 0.23, 0.99); */
.search-module[mobile-closed] {
display: none;
}
.search-module[mobile-closing] {
/* animation: translate-out 400ms forwards cubic-bezier(0, 0.51, 0.23, 0.99),
fade-out 800ms forwards ease-in; */
-webkit-animation: translate-out 800ms forwards ease-in, fade-out 600ms forwards ease-in;
animation: translate-out 800ms forwards ease-in, fade-out 600ms forwards ease-in;
}
.search-module[mobile-opened] {
-webkit-animation: translate-in 700ms forwards cubic-bezier(0, 0.51, 0.23, 0.99),
fade-in 600ms forwards ease-out;
animation: translate-in 700ms forwards cubic-bezier(0, 0.51, 0.23, 0.99),
fade-in 600ms forwards ease-out;
} }
.search-module__wrapper-container { .search-module__wrapper-container {
@ -1469,32 +1652,6 @@ button:focus {
text-underline-offset: 4px; text-underline-offset: 4px;
} }
.search-module {
display: block;
transition: all 0.5s;
transition-timing-function: cubic-bezier(0, 0.51, 0.23, 0.99);
}
.search-module[aria-hidden='true'] {
display: none;
}
.search-module-closed {
/* transition: all 0.3s ease-in-out; */
pointer-events: none;
--tw-translate-y: 50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
opacity: 0;
z-index: -1;
}
.search-module-open {
/* transition: all 0.3s ease-in-out; */
--tw-translate-y: 100%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
z-index: 20;
}
.card-frequent-question { .card-frequent-question {
position: relative; position: relative;
border-radius: 1.5rem; border-radius: 1.5rem;
@ -1663,12 +1820,16 @@ header#main-header {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
@media (min-width: 782px) { @media (min-width: 960px) {
header#main-header { header#main-header {
flex-direction: column; flex-direction: column;
} }
} }
.sub-menu {
z-index: 10;
}
.site-footer { .site-footer {
margin-top: 3rem; margin-top: 3rem;
display: grid; display: grid;
@ -1815,8 +1976,6 @@ article > *:not(.entry-content),
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
--tw-bg-opacity: 1;
background-color: rgb(254 252 232 / var(--tw-bg-opacity));
padding-top: 2rem; padding-top: 2rem;
padding-bottom: 2rem; padding-bottom: 2rem;
padding-left: 4rem; padding-left: 4rem;
@ -1826,13 +1985,14 @@ article > *:not(.entry-content),
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
} }
.menu-renovateur .logo { .menu-renovateur .website_logo {
order: 1;
margin-right: 3rem; margin-right: 3rem;
width: 190px; width: 190px;
} }
@media (min-width: 1280px) { @media (min-width: 1280px) {
.menu-renovateur .logo { .menu-renovateur .website_logo {
width: 222px; width: 222px;
} }
} }
@ -1842,24 +2002,28 @@ article > *:not(.entry-content),
} */ } */
.menu-renovateur__navlist { .menu-renovateur__navlist {
position: relative;
justify-content: center; justify-content: center;
gap: 2rem;
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(187 247 208 / var(--tw-bg-opacity)); background-color: rgb(240 171 252 / var(--tw-bg-opacity));
} }
@media (min-width: 782px) { @media (min-width: 960px) {
.menu-renovateur__navlist { .menu-renovateur__navlist {
display: flex; display: flex;
} }
} }
.menu-renovateur__navlist > li .page_icon { .menu-renovateur__navlist > .menu-item:hover > a,
height: 50px; .menu-renovateur__navlist > .menu-item:hover > button,
width: 50px; .menu-renovateur__navlist > .menu-item > a:focus,
.menu-renovateur__navlist > .menu-item > button:focus {
background-color: rgb(239, 239, 239, 0.6);
--tw-text-opacity: 1;
color: rgb(223 30 30 / var(--tw-text-opacity));
} }
.menu-renovateur__navlist > li { .menu-renovateur__navlist > .menu-item {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -1869,7 +2033,7 @@ article > *:not(.entry-content),
} }
@media (min-width: 960px) { @media (min-width: 960px) {
.menu-renovateur__navlist > li { .menu-renovateur__navlist > .menu-item {
position: relative; position: relative;
} }
} }
@ -1877,14 +2041,26 @@ article > *:not(.entry-content),
/* Generic Submenu Item */ /* Generic Submenu Item */
.menu-renovateur__navlist .sub-menu { .menu-renovateur__navlist .sub-menu {
position: absolute; position: fixed;
bottom: 0px; top: 0px;
z-index: 50;
min-height: 100vh;
width: 100%;
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity)); background-color: rgb(255 255 255 / var(--tw-bg-opacity));
transform: translateY(100%); padding: 2rem;
}
@media (min-width: 960px) {
.menu-renovateur__navlist .sub-menu {
position: absolute;
min-height: 0px;
width: 100vw; width: 100vw;
max-width: 48rem; max-width: 48rem;
padding: 2rem; bottom: -31px;
transform: translateY(100%);
top: unset;
}
} }
.menu-renovateur__navlist .sub-menu--closed { .menu-renovateur__navlist .sub-menu--closed {
@ -1897,22 +2073,18 @@ article > *:not(.entry-content),
/* Conseils — Thamtiques Submenu Item */ /* Conseils — Thamtiques Submenu Item */
.menu-renovateur__navlist li#menu-item-168 hr {
margin-top: 0.75rem;
margin-bottom: 1.5rem;
}
.menu-renovateur__navlist li#menu-item-168 .sub-menu {
/* @apply hidden; */
}
.menu-renovateur__navlist li#menu-item-168 .sub-menu__navlist { .menu-renovateur__navlist li#menu-item-168 .sub-menu__navlist {
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem; gap: 1rem;
} }
.menu-renovateur__navlist li#menu-item-168 .sub-menu__navlist__item { @media (min-width: 782px) {
.menu-renovateur__navlist li#menu-item-168 .sub-menu__navlist {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.menu-renovateur__navlist li#menu-item-168 .sub-menu__navlist__item a {
display: flex; display: flex;
gap: 1rem; gap: 1rem;
} }
@ -1945,19 +2117,165 @@ article > *:not(.entry-content),
text-underline-offset: 4px; text-underline-offset: 4px;
} }
@media (min-width: 782px) { .menu-renovateur__navlist-container {
order: 3;
width: 100%;
}
@media (min-width: 960px) {
.menu-renovateur__navlist-container {
order: 2;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
}
@media screen and (max-width: 960px) {
.menu-renovateur__navlist-container {
overflow: hidden;
}
.menu-renovateur__navlist-container[opened] {
-webkit-animation: height-in 400ms forwards ease-out, fade-in 800ms forwards ease-in;
animation: height-in 400ms forwards ease-out, fade-in 800ms forwards ease-in;
}
.menu-renovateur__navlist-container[closing] {
-webkit-animation: height-out 500ms forwards ease-out, fade-out 800ms forwards ease-in;
animation: height-out 500ms forwards ease-out, fade-out 800ms forwards ease-in;
}
.menu-renovateur__navlist-container[closed] {
display: none;
}
}
.menu-renovateur__interaction_toggles {
order: 2;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 1rem;
}
@media (min-width: 960px) {
.menu-renovateur__interaction_toggles {
order: 3;
}
}
.menu-renovateur__mobile-menu-toggle {
display: flex;
align-items: center;
gap: 1rem;
}
@media (min-width: 960px) {
.menu-renovateur__mobile-menu-toggle { .menu-renovateur__mobile-menu-toggle {
display: none; display: none;
} }
} }
.menu-renovateur__mobile-menu-toggle {
/* &:after {
@apply block w-8 h-8;
content: url('../resources/images/menu.svg');
} */
}
.menu-renovateur__mobile-menu-toggle .toggle-icon {
/* transform: translate(0, 7px); */
position: relative;
height: 1rem;
width: 1.5rem;
opacity: 0.8;
}
.menu-renovateur__mobile-menu-toggle .toggle-icon__bar {
position: absolute;
width: 100%;
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
height: 3px;
}
.menu-renovateur__mobile-menu-toggle .toggle-icon__bar--top {
top: 0;
transition: all 0.3s ease-in-out;
}
.menu-renovateur__mobile-menu-toggle .toggle-icon__bar--middle {
top: 50%;
transform: translateY(-50%);
}
.menu-renovateur__mobile-menu-toggle .toggle-icon__bar--bottom {
bottom: 0;
transition: all 0.3s ease-in-out;
}
.menu-renovateur__mobile-menu-toggle[aria-expanded] .toggle-icon {
position: relative;
}
.menu-renovateur__mobile-menu-toggle[aria-expanded] .toggle-icon__bar--top {
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
.menu-renovateur__mobile-menu-toggle[aria-expanded] .toggle-icon__bar--middle {
opacity: 0;
}
.menu-renovateur__mobile-menu-toggle[aria-expanded] .toggle-icon__bar--bottom {
top: 50%;
transform: translateY(-50%) rotate(-45deg);
}
.menu-renovateur__search-module-toggle { .menu-renovateur__search-module-toggle {
z-index: 50;
height: -webkit-fit-content; height: -webkit-fit-content;
height: -moz-fit-content; height: -moz-fit-content;
height: fit-content; height: fit-content;
} }
.menu-renovateur .menu-item .page_icon {
height: 50px;
width: 50px;
}
.menu-renovateur .menu-item__submenu-title {
margin-bottom: 1rem;
border-bottom-width: 1px;
--tw-border-opacity: 1;
border-color: rgb(118 117 117 / var(--tw-border-opacity));
padding-bottom: 1rem;
}
.menu-renovateur .menu-item__submenu-toggle,
.menu-renovateur .menu-item > a {
border-radius: 1.5rem;
padding: 1.5rem;
}
.menu-renovateur .menu-item__submenu-toggle {
text-align: left;
}
.menu-renovateur .menu-item__submenu-close {
position: absolute;
top: 2rem;
right: 2rem;
height: auto;
border-radius: 9999px;
text-align: right;
outline-offset: 4px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
padding: 0;
}
.menu-renovateur--footer { .menu-renovateur--footer {
display: grid; display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-columns: repeat(4, minmax(0, 1fr));
@ -1992,6 +2310,7 @@ article > *:not(.entry-content),
height: -webkit-fit-content; height: -webkit-fit-content;
height: -moz-fit-content; height: -moz-fit-content;
height: fit-content; height: fit-content;
width: 100%;
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(47 1 84 / var(--tw-bg-opacity)); background-color: rgb(47 1 84 / var(--tw-bg-opacity));
padding-top: 1rem; padding-top: 1rem;
@ -2064,40 +2383,13 @@ article > *:not(.entry-content),
} */ } */
} }
.menu-homegrade__wrapper-container {
margin-left: auto;
margin-right: auto;
display: flex;
width: 100%;
max-width: 1440px;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
@media (min-width: 960px) {
.menu-homegrade__wrapper-container {
flex-direction: row;
justify-content: flex-end;
}
}
.menu-homegrade__wrapper-container {
/* li.menu-item.menu-item-has-children:hover {
@screen lg {
.menu-item-submenu-toggle:after {
transform: rotate(180deg);
}
.sub-menu {
display: block;
}
}
} */
}
/* submenus */ /* submenus */
.menu-homegrade__wrapper-container li .sub-menu { .menu-homegrade .sub-menu[open] {
display: block;
}
.menu-homegrade li .sub-menu {
position: static; position: static;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -2107,34 +2399,34 @@ article > *:not(.entry-content),
} }
@media (min-width: 960px) { @media (min-width: 960px) {
.menu-homegrade__wrapper-container li .sub-menu { .menu-homegrade li .sub-menu {
position: absolute; position: absolute;
margin-left: 0px; margin-left: 0px;
margin-right: 0px; margin-right: 0px;
} }
} }
.menu-homegrade__wrapper-container li .sub-menu { .menu-homegrade li .sub-menu {
z-index: 999; z-index: 999;
display: none; display: none;
} }
.menu-homegrade__wrapper-container li .sub-menu.sub-menu-open { /* &.sub-menu--open {
display: block; display: block;
} } */
.menu-homegrade__wrapper-container li .sub-menu li { .menu-homegrade li .sub-menu li {
padding-top: 0.5rem; padding-top: 0.5rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
} }
@media (min-width: 960px) { @media (min-width: 960px) {
.menu-homegrade__wrapper-container li .sub-menu li { .menu-homegrade li .sub-menu li {
text-align: left; text-align: left;
} }
} }
.menu-homegrade__wrapper-container li .sub-menu > a::after { .menu-homegrade li .sub-menu > a::after {
transform: translateY(-2px) rotate(-90deg); transform: translateY(-2px) rotate(-90deg);
content: ''; content: '';
display: inline-block; display: inline-block;
@ -2147,7 +2439,15 @@ article > *:not(.entry-content),
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
} }
/* &__wrapper-container {
} */
.menu-homegrade__navlist { .menu-homegrade__navlist {
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 1440px;
justify-content: flex-end;
padding-right: 0px; padding-right: 0px;
} }
@ -2193,18 +2493,18 @@ article > *:not(.entry-content),
/* IF SUBMENU CHILD */ /* IF SUBMENU CHILD */
.menu-homegrade__navlist li.menu-item .menu-item-submenu-toggle:hover, .menu-homegrade__navlist li.menu-item .menu-item__submenu-toggle:hover,
.menu-homegrade__navlist li.menu-item .menu-item-submenu-toggle:focus { .menu-homegrade__navlist li.menu-item .menu-item__submenu-toggle:focus {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(223 30 30 / var(--tw-text-opacity)); color: rgb(223 30 30 / var(--tw-text-opacity));
} }
.menu-homegrade__navlist li.menu-item .menu-item-submenu-toggle { .menu-homegrade__navlist li.menu-item .menu-item__submenu-toggle {
position: relative; position: relative;
padding-right: 1rem; padding-right: 1rem;
} }
.menu-homegrade__navlist li.menu-item .menu-item-submenu-toggle:after { .menu-homegrade__navlist li.menu-item .menu-item__submenu-toggle:after {
right: 0px; right: 0px;
content: '▼'; content: '▼';
position: absolute; position: absolute;
@ -2220,11 +2520,11 @@ article > *:not(.entry-content),
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
} }
.menu-homegrade__navlist li.menu-item .menu-item-submenu-toggle[aria-expanded='false']:after { .menu-homegrade__navlist li.menu-item .menu-item__submenu-toggle[aria-expanded='false']:after {
transform: rotate(0deg); transform: rotate(0deg);
} }
.menu-homegrade__navlist li.menu-item .menu-item-submenu-toggle[aria-expanded='true']:after { .menu-homegrade__navlist li.menu-item .menu-item__submenu-toggle[aria-expanded='true']:after {
transform: rotate(180deg); transform: rotate(180deg);
} }
@ -2293,6 +2593,26 @@ article > *:not(.entry-content),
fill: #DF1E1E; fill: #DF1E1E;
} }
@media screen and (max-width: 960px) {
.menu-homegrade {
overflow: hidden;
}
.menu-homegrade[opened] {
-webkit-animation: height-in 400ms forwards ease-out, fade-in 800ms forwards ease-in;
animation: height-in 400ms forwards ease-out, fade-in 800ms forwards ease-in;
}
.menu-homegrade[closing] {
-webkit-animation: height-out 500ms forwards ease-in, fade-out 800ms forwards ease-in;
animation: height-out 500ms forwards ease-in, fade-out 800ms forwards ease-in;
}
.menu-homegrade[closed] {
display: none;
}
}
.menu-homegrade--header { .menu-homegrade--header {
} }
@ -2365,6 +2685,11 @@ article > *:not(.entry-content),
} }
} }
.home-header {
isolation: isolate;
/* relative */
}
/* background-color: #fbfff5a6; */ /* background-color: #fbfff5a6; */
.home-header__titling { .home-header__titling {
@ -2413,6 +2738,8 @@ article > *:not(.entry-content),
/* cubic-bezier(0.18, 0.89, 0.3, 1); */ /* cubic-bezier(0.18, 0.89, 0.3, 1); */
} }
/* bg-red-100 */
.home-header__fresque { .home-header__fresque {
width: 100%; width: 100%;
z-index: -1; z-index: -1;

4
header.php
View File

@ -25,7 +25,9 @@
<?php get_template_part('template-components/header/menu-homegrade'); ?> <?php get_template_part('template-components/header/menu-homegrade'); ?>
<!-- MENU RENOVATEUR --> <!-- MENU RENOVATEUR -->
<?php get_template_part('template-components/header/menu-renovateur'); ?> <?php
get_template_part('template-components/header/menu-renovateur');
?>

54
includes/navwalker.php
View File

@ -6,13 +6,10 @@
function wrap_parent_menu_item_buttons($output, $item, $depth, $args) function wrap_parent_menu_item_buttons($output, $item, $depth, $args)
{ {
// write_log($item);
// $item->classes = array_merge($item->classes, array('menu-item-' . $item->ID));
// #### MENU HOMEGRADE HEADER // #### MENU HOMEGRADE HEADER
if ($args->theme_location === "homegrade" && $args->menu_id === "menu-homegrade-navlist" && in_array('menu-item-has-children', $item->classes, true)) { if ($args->theme_location === "homegrade" && $args->menu_id === "menu-homegrade-navlist" && in_array('menu-item-has-children', $item->classes, true)) {
$output = '<button type="button" class="menu-item-submenu-toggle" aria-expanded="false" aria-controls="sub-menu-' . $item->ID . '">' . $item->title . '</button>'; $output = '<button type="button" class="menu-item__submenu-toggle" aria-expanded="false" aria-controls="sub-menu-' . $item->ID . '">' . $item->title . '</button>';
} }
// #### MENU HOMEGRADE FOOTER // #### MENU HOMEGRADE FOOTER
@ -21,12 +18,12 @@ function wrap_parent_menu_item_buttons($output, $item, $depth, $args)
} }
// #### MENU RENOVATEUR
if ($args->theme_location === "renovateur") { if ($args->theme_location === "renovateur") {
$page_icon = get_field('page_icon', $item->object_id); $page_icon = get_field('page_icon', $item->object_id);
if (in_array('menu-item-has-children', $item->classes, true)) { if (in_array('menu-item-has-children', $item->classes, true)) {
$output = '<button type="button" class="menu-item-submenu-toggle" aria-expanded="false" aria-controls="sub-menu-' . $item->ID . '">' . $item->title . '</button>'; $output = '<button type="button" class="menu-item__submenu-toggle" aria-expanded="false" aria-controls="sub-menu-' . $item->ID . '">' . $item->title . '</button>';
} }
// #### ICONE DE PAGE FOR TOP LEVEL MENU ITEMS // #### ICONE DE PAGE FOR TOP LEVEL MENU ITEMS
@ -36,7 +33,6 @@ function wrap_parent_menu_item_buttons($output, $item, $depth, $args)
$output = $icon . $link; $output = $icon . $link;
} }
write_log($output);
// #### TAXONOMY : GET ICON & INFOS ABOUT TAX // #### TAXONOMY : GET ICON & INFOS ABOUT TAX
@ -58,47 +54,3 @@ function wrap_parent_menu_item_buttons($output, $item, $depth, $args)
return $output; return $output;
} }
add_filter('walker_nav_menu_start_el', 'wrap_parent_menu_item_buttons', 10, 4); add_filter('walker_nav_menu_start_el', 'wrap_parent_menu_item_buttons', 10, 4);
/* -----------------------------------------------------------
Pass Specific submenus-classnames for menu renovateur
-----------------------------------------------------------*/
function customize_submenu_classnames($classes, $args, $depth)
{
// Here we can additionally use menu arguments.
// if ($args->theme_location === "renovateur") {
// $default_class_name_key = array_search('sub-menu', $classes);
// if (false !== $default_class_name_key) {
// unset($classes[$default_class_name_key]);
// }
// $classes[] = 'header-submenu';
// $classes[] = "depth-{$depth}";
// $classes[] = 'sub-menu';
// $classes[] = 'test';
// }
// write_log($classes);
// write_log($classes);
return $classes;
}
add_filter('nav_menu_submenu_css_class', 'customize_submenu_classnames', 10, 3);
/* -----------------------------------------------------------
TEST
-----------------------------------------------------------*/
function wpdocs_unset_menu_items($menu_objects, $args)
{
if ($args->theme_location === "renovateur") {
// write_log($args);
// write_log($menu_objects);
return $menu_objects;
}
}
add_filter('wp_nav_menu_objects', 'wpdocs_unset_menu_items', 10, 2);

121
js/app.js
View File

@ -2,63 +2,132 @@
// resources/js/header.js // resources/js/header.js
function menuInit() { function menuInit() {
const header = document.querySelector("#main-header"); const header = document.querySelector("#main-header");
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 submenuToggles = header.querySelectorAll(".menu-item-submenu-toggle"); const mobileMenuToggle = header.querySelector("#mobile-menu-toggle");
const submenusItems = header.querySelectorAll(".sub-menu"); const submenuToggles = header.querySelectorAll(".menu-item__submenu-toggle");
const submenuCloseBtns = header.querySelectorAll(".menu-item__submenu-close");
function isSubmenuOpen() { function isSubmenuOpen() {
return header.querySelector("sub-menu-open") !== null; return header.querySelector("sub-menu-open") !== null;
} }
function openSubmenu(buttonToggle) { function openSubmenu(buttonToggle) {
closeSubmenus();
let isExpanded = buttonToggle.getAttribute("aria-expanded") === "true"; let isExpanded = buttonToggle.getAttribute("aria-expanded") === "true";
buttonToggle.setAttribute("aria-expanded", !isExpanded); buttonToggle.setAttribute("aria-expanded", !isExpanded);
buttonToggle.parentElement.querySelector(".sub-menu").classList.toggle("sub-menu-open"); buttonToggle.parentElement.querySelector(".sub-menu").classList.toggle("sub-menu--open");
buttonToggle.parentElement.querySelector(".sub-menu").classList.toggle("sub-menu--closed");
} }
function closeSubmenus() { function closeSubmenus() {
const openSubmenus = header.querySelectorAll(".sub-menu-open"); const openSubmenus = header.querySelectorAll(".sub-menu--open");
openSubmenus.forEach((submenu) => { openSubmenus.forEach((submenu) => {
submenu.classList.remove("sub-menu-open"); submenu.classList.remove("sub-menu--open");
submenu.parentElement.querySelector(".menu-item-submenu-toggle").setAttribute("aria-expanded", "false"); submenu.classList.add("sub-menu--closed");
console.log(submenu.parentElement); submenu.parentElement.querySelector(".menu-item__submenu-toggle").setAttribute("aria-expanded", "false");
}); });
} }
function handleSubmenuToggle(buttonToggle) {
let isExpanded = buttonToggle.getAttribute("aria-expanded") === "true";
if (!isExpanded) {
closeSubmenus();
openSubmenu(buttonToggle);
} else {
closeSubmenus();
}
}
function closeCurrentSubmenu(buttonClose) {
console.log("close submenu");
console.log(buttonClose.parentElement);
const currentOpenedSubmenu = buttonClose.parentElement;
currentOpenedSubmenu.classList.remove("sub-menu--open");
currentOpenedSubmenu.classList.add("sub-menu--closed");
currentOpenedSubmenu.parentElement.querySelector(".menu-item__submenu-toggle").setAttribute("aria-expanded", "false");
}
submenuToggles.forEach((button) => {
button.addEventListener("click", () => {
if (isSearchOpen() === true) {
closeSearch();
}
handleSubmenuToggle(button);
});
});
submenuCloseBtns.forEach((button) => {
button.addEventListener("click", () => closeCurrentSubmenu(button));
});
function isSearchOpen() { function isSearchOpen() {
return searchModule.getAttribute("aria-hidden") === "true"; if (searchModule.getAttribute("mobile-closed") != null && searchModule.getAttribute("aria-hidden") != null && searchModule.getAttribute("mobile-opened") === null) {
return false;
}
if (searchModule.getAttribute("mobile-opened") != null && searchModule.getAttribute("mobile-closed") === null && searchModule.getAttribute("aria-hidden") === null) {
return true;
}
return null;
} }
function openSearch() { function openSearch() {
searchModule.classList.remove("search-module-open"); searchModuleToggle.setAttribute("aria-expanded", "");
searchModule.classList.add("search-module-closed"); searchModule.setAttribute("mobile-opened", "");
searchModule.removeAttribute("mobile-closed");
setTimeout(() => { setTimeout(() => {
searchModule.setAttribute("aria-hidden", "true"); searchModule.removeAttribute("aria-hidden");
}, 400); }, 400);
} }
function closeSearch() { function closeSearch() {
searchModule.setAttribute("aria-hidden", "false"); searchModule.setAttribute("aria-hidden", "");
setTimeout(() => { searchModule.removeAttribute("mobile-opened", "");
searchModule.classList.remove("search-module-closed"); searchModule.setAttribute("mobile-closing", "");
searchModule.classList.add("search-module-open"); searchModule.addEventListener("animationend", () => {
}, 50); searchModule.setAttribute("mobile-closed", "");
searchModule.removeAttribute("mobile-closing", "");
}, { once: true });
searchModuleToggle.toggleAttribute("aria-expanded"); searchModuleToggle.toggleAttribute("aria-expanded");
} }
searchModuleToggle.addEventListener("click", function(e) { searchModuleToggle.addEventListener("click", function(e) {
closeSubmenus(); closeSubmenus();
if (isSearchOpen()) { if (isSearchOpen() === false) {
closeSearch(); openSearch();
return; return;
} }
if (!isSearchOpen()) { if (isSearchOpen() === true) {
openSearch(); closeSearch();
} }
}); });
submenuToggles.forEach((button) => { const renovateurNavListContainer = header.querySelector(".menu-renovateur__navlist-container");
button.addEventListener("click", () => openSubmenu(button)); const HomegradeNavListContainer = header.querySelector(".menu-homegrade");
function openMenu(menuContainer) {
menuContainer.removeAttribute("closed", "");
menuContainer.setAttribute("opened", "");
menuContainer.removeAttribute("aria-hidden", "");
menuContainer.setAttribute("opening", "");
menuContainer.addEventListener("animationend", () => {
menuContainer.removeAttribute("opening", "");
}, { once: true });
}
function closeMenu(menuContainer) {
menuContainer.removeAttribute("opened");
menuContainer.setAttribute("aria-hidden", "");
menuContainer.setAttribute("closing", "");
menuContainer.addEventListener("animationend", () => {
menuContainer.setAttribute("closed", "");
menuContainer.removeAttribute("closing", "");
}, { once: true });
}
mobileMenuToggle.addEventListener("click", function(e) {
const isNavOpened = renovateurNavListContainer.hasAttribute("opened");
const textContent = mobileMenuToggle.querySelector("span.text-content");
const dataTextOpen = mobileMenuToggle.getAttribute("data-text-open");
const dataTextClose = mobileMenuToggle.getAttribute("data-text-close");
textContent.textContent = isNavOpened ? dataTextOpen : dataTextClose;
mobileMenuToggle.toggleAttribute("aria-expanded");
if (isNavOpened) {
closeMenu(renovateurNavListContainer);
closeMenu(HomegradeNavListContainer);
}
if (!isNavOpened) {
openMenu(renovateurNavListContainer);
openMenu(HomegradeNavListContainer);
}
}); });
} }
// resources/js/app.js // resources/js/app.js
console.log("menuInit");
console.log("menuIniteeeee");
window.addEventListener("load", function() { window.addEventListener("load", function() {
menuInit(); menuInit();
}); });

1
resources/css/app.css
View File

@ -4,6 +4,7 @@
/* ########### UTILITIES ############ */ /* ########### UTILITIES ############ */
@import './utilities/shadows.css'; @import './utilities/shadows.css';
@import './utilities/animation.css';
/* ########### BASE ############ */ /* ########### BASE ############ */
@import './base/typography.css'; @import './base/typography.css';

42
resources/css/components/search-module.css
View File

@ -2,11 +2,30 @@
@apply w-full absolute @apply w-full absolute
bg-white bg-white
left-0 left-0
bottom-0
px-16 px-16
py-6 py-6
z-10
bottom-0
transform translate-y-full; transform translate-y-full;
@apply block;
/* transition: all 0.5s;
transition-timing-function: cubic-bezier(0, 0.51, 0.23, 0.99); */
&[mobile-closed] {
@apply hidden;
}
&[mobile-closing] {
/* animation: translate-out 400ms forwards cubic-bezier(0, 0.51, 0.23, 0.99),
fade-out 800ms forwards ease-in; */
animation: translate-out 800ms forwards ease-in, fade-out 600ms forwards ease-in;
}
&[mobile-opened] {
animation: translate-in 700ms forwards cubic-bezier(0, 0.51, 0.23, 0.99),
fade-in 600ms forwards ease-out;
}
&__wrapper-container { &__wrapper-container {
@apply max-w-screen-xl mx-auto; @apply max-w-screen-xl mx-auto;
} }
@ -42,24 +61,3 @@
} }
} }
} }
.search-module {
@apply block;
transition: all 0.5s;
transition-timing-function: cubic-bezier(0, 0.51, 0.23, 0.99);
}
.search-module[aria-hidden='true'] {
@apply hidden;
}
.search-module-closed {
/* transition: all 0.3s ease-in-out; */
@apply transform translate-y-1/2 opacity-0 pointer-events-none;
z-index: -1;
}
.search-module-open {
/* transition: all 0.3s ease-in-out; */
@apply transform translate-y-full;
z-index: 20;
}

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

@ -1,6 +1,9 @@
header#main-header { header#main-header {
@apply flex @apply flex
flex-col-reverse flex-col-reverse
md:flex-col; lg:flex-col;
} }
.sub-menu {
@apply z-10;
}

51
resources/css/layout/menu-homegrade.css
View File

@ -5,34 +5,17 @@
bg-primary bg-primary
text-white text-white
relative relative
w-full
h-fit h-fit
py-4 py-4
px-8 px-8
2xl:px-32 2xl:px-32
my-0; my-0;
&__wrapper-container { /* submenus */
@apply max-w-screen-2xl .sub-menu[open] {
w-full
mx-auto
flex
flex-col
lg:flex-row
items-center
justify-around
lg:justify-end;
/* li.menu-item.menu-item-has-children:hover {
@screen lg {
.menu-item-submenu-toggle:after {
transform: rotate(180deg);
}
.sub-menu {
display: block; display: block;
} }
}
} */
/* submenus */
li .sub-menu { li .sub-menu {
@apply bg-primary @apply bg-primary
p-6 p-6
@ -43,9 +26,9 @@
z-index: 999; z-index: 999;
display: none; display: none;
&.sub-menu-open { /* &.sub-menu--open {
display: block; display: block;
} } */
li { li {
@apply py-2 lg:text-left; @apply py-2 lg:text-left;
@ -64,10 +47,12 @@
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
} }
} }
} /* &__wrapper-container {
} */
&__navlist { &__navlist {
@apply lg:flex pr-0; @apply w-full
max-w-screen-2xl mx-auto lg:flex justify-end pr-0;
/* Highlight using list element */ /* Highlight using list element */
li.current-page-parent > a, li.current-page-parent > a,
@ -95,7 +80,7 @@
} }
/* IF SUBMENU CHILD */ /* IF SUBMENU CHILD */
.menu-item-submenu-toggle { .menu-item__submenu-toggle {
&:hover, &:hover,
&:focus { &:focus {
@apply text-secondary; @apply text-secondary;
@ -117,10 +102,10 @@
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
} }
} }
.menu-item-submenu-toggle[aria-expanded='false']:after { .menu-item__submenu-toggle[aria-expanded='false']:after {
transform: rotate(0deg); transform: rotate(0deg);
} }
.menu-item-submenu-toggle[aria-expanded='true']:after { .menu-item__submenu-toggle[aria-expanded='true']:after {
transform: rotate(180deg); transform: rotate(180deg);
} }
} }
@ -176,7 +161,19 @@
} }
} }
} }
@media screen and (max-width: 960px) {
@apply overflow-hidden;
&[opened] {
animation: height-in 400ms forwards ease-out, fade-in 800ms forwards ease-in;
}
&[closing] {
animation: height-out 500ms forwards ease-in, fade-out 800ms forwards ease-in;
}
&[closed] {
@apply hidden;
}
}
/*##### RESPONSIVE */ /*##### RESPONSIVE */
/* @media (max-width: 960px) { /* @media (max-width: 960px) {

147
resources/css/layout/menu-renovateur.css
View File

@ -2,27 +2,35 @@
@apply py-8 @apply py-8
px-16 px-16
relative relative
bg-yellow-50
shadow-md shadow-md
flex flex
flex-wrap flex-wrap
justify-between; justify-between;
.logo { .website_logo {
@apply mr-12 @apply order-1
mr-12
w-[190px] w-[190px]
xl:w-[222px]; xl:w-[222px];
} }
/* &__main-elements { /* &__main-elements {
@apply w-full bg-red-200 flex justify-between items-center; @apply w-full bg-red-200 flex justify-between items-center;
} */ } */
&__navlist {
@apply md:flex justify-center gap-8 bg-green-200;
> li { &__navlist {
.page_icon { @apply lg:flex
@apply w-[50px] h-[50px]; bg-fuchsia-300
justify-center
relative;
> .menu-item {
&:hover > a,
&:hover > button,
> a:focus,
> button:focus {
@apply text-secondary bg-gray;
} }
@apply text-black @apply text-black
flex flex
lg:relative lg:relative
@ -32,9 +40,24 @@
} }
/* Generic Submenu Item */ /* Generic Submenu Item */
.sub-menu { .sub-menu {
@apply absolute bottom-0 bg-white; @apply fixed
bg-white
z-50
top-0
min-h-screen
w-full
p-8
lg:absolute
lg:min-h-0
lg:w-screen
lg:max-w-3xl;
@screen lg {
bottom: -31px;
transform: translateY(100%); transform: translateY(100%);
@apply max-w-3xl w-screen p-8; top: unset;
}
&--closed { &--closed {
@apply hidden; @apply hidden;
} }
@ -45,15 +68,9 @@
/* Conseils — Thamtiques Submenu Item */ /* Conseils — Thamtiques Submenu Item */
li#menu-item-168 { li#menu-item-168 {
hr {
@apply my-3 mb-6;
}
.sub-menu {
/* @apply hidden; */
}
.sub-menu__navlist { .sub-menu__navlist {
@apply grid grid-cols-2 gap-4; @apply grid md:grid-cols-2 gap-4;
&__item { &__item a {
@apply flex gap-4; @apply flex gap-4;
} }
@ -80,11 +97,101 @@
} }
} }
} }
&__navlist-container {
@apply /* bg-white */
order-3
lg:order-2
w-full
lg:w-fit;
}
@media screen and (max-width: 960px) {
&__navlist-container {
@apply overflow-hidden;
}
&__navlist-container[opened] {
animation: height-in 400ms forwards ease-out, fade-in 800ms forwards ease-in;
}
&__navlist-container[closing] {
animation: height-out 500ms forwards ease-out, fade-out 800ms forwards ease-in;
}
&__navlist-container[closed] {
@apply hidden;
}
}
&__interaction_toggles {
@apply order-2 lg:order-3 flex items-center justify-start gap-4;
}
&__mobile-menu-toggle { &__mobile-menu-toggle {
@apply md:hidden; @apply lg:hidden flex items-center gap-4;
.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] {
.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 { &__search-module-toggle {
@apply z-50 h-fit; @apply h-fit;
}
.menu-item {
.page_icon {
@apply w-[50px] h-[50px];
}
&__submenu-title {
@apply pb-4 mb-4 border-b border-gray-dark;
}
&__submenu-toggle,
> a {
@apply p-6 rounded-3xl;
}
&__submenu-toggle {
@apply text-left;
}
&__submenu-close {
@apply absolute text-right top-8 right-8 w-fit h-auto rounded-full outline-offset-4;
width: fit-content;
padding: 0;
}
} }
} }

67
resources/css/utilities/animation.css Normal file
View File

@ -0,0 +1,67 @@
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes slide-in {
0% {
transform: translateY(-80%);
}
100% {
transform: translateY(0%);
}
}
@keyframes slide-out {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(-10%);
}
}
@keyframes height-in {
0% {
max-height: 0px;
}
100% {
max-height: 300px;
}
}
@keyframes height-out {
0% {
max-height: 300px;
}
100% {
max-height: 0px;
}
}
@keyframes translate-in {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(100%);
}
}
@keyframes translate-out {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(60%);
}
}

12
resources/img/graphic-assets/close_submenu_icon.svg Normal file
View File

@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 27 27">
<g id="Groupe_1505" data-name="Groupe 1505" transform="translate(-953 -6187)">
<g id="Groupe_1477" data-name="Groupe 1477">
<g id="Ellipse_225" data-name="Ellipse 225" transform="translate(953 6187)" fill="#fff" stroke="#000" stroke-width="2">
<circle cx="13.5" cy="13.5" r="13.5" stroke="none"/>
<circle cx="13.5" cy="13.5" r="12.5" fill="none"/>
</g>
<path id="Tracé_3611" data-name="Tracé 3611" d="M-3940.773,6207.279l8.909-8.884" transform="translate(4903.115 -2)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="2"/>
</g>
<path id="Tracé_3612" data-name="Tracé 3612" d="M-3931.864,6207.279l-8.909-8.884" transform="translate(4903.115 -2)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="2"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 877 B

3
resources/js/app.js
View File

@ -1,6 +1,5 @@
import menuInit from './header'; import menuInit from './header';
console.log('menuInit');
console.log('menuIniteeeee');
window.addEventListener('load', function () { window.addEventListener('load', function () {
menuInit(); menuInit();
}); });

233
resources/js/header.js
View File

@ -2,109 +2,212 @@ export default function menuInit() {
const header = document.querySelector('#main-header'); const header = document.querySelector('#main-header');
// Search module // Search module
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');
// Submenus // Mobile Menu
const submenuToggles = header.querySelectorAll('.menu-item-submenu-toggle'); const mobileMenuToggle = header.querySelector('#mobile-menu-toggle');
const submenusItems = header.querySelectorAll('.sub-menu');
/* -----------------------------------------------------------
HANDLE SUBMENUS
-----------------------------------------------------------*/
// SubmenusToggles
const submenuToggles = header.querySelectorAll('.menu-item__submenu-toggle');
const submenuCloseBtns = header.querySelectorAll('.menu-item__submenu-close');
function isSubmenuOpen() { function isSubmenuOpen() {
return header.querySelector('sub-menu-open') !== null; return header.querySelector('sub-menu-open') !== null;
} }
function openSubmenu(buttonToggle) { function openSubmenu(buttonToggle) {
closeSubmenus();
let isExpanded = buttonToggle.getAttribute('aria-expanded') === 'true'; let isExpanded = buttonToggle.getAttribute('aria-expanded') === 'true';
buttonToggle.setAttribute('aria-expanded', !isExpanded); buttonToggle.setAttribute('aria-expanded', !isExpanded);
buttonToggle.parentElement.querySelector('.sub-menu').classList.toggle('sub-menu-open'); buttonToggle.parentElement.querySelector('.sub-menu').classList.toggle('sub-menu--open');
buttonToggle.parentElement.querySelector('.sub-menu').classList.toggle('sub-menu--closed');
} }
function closeSubmenus() { function closeSubmenus() {
const openSubmenus = header.querySelectorAll('.sub-menu-open'); const openSubmenus = header.querySelectorAll('.sub-menu--open');
openSubmenus.forEach((submenu) => { openSubmenus.forEach((submenu) => {
submenu.classList.remove('sub-menu-open'); submenu.classList.remove('sub-menu--open');
submenu.classList.add('sub-menu--closed');
submenu.parentElement submenu.parentElement
.querySelector('.menu-item-submenu-toggle') .querySelector('.menu-item__submenu-toggle')
.setAttribute('aria-expanded', 'false'); .setAttribute('aria-expanded', 'false');
console.log(submenu.parentElement);
}); });
} }
function handleSubmenuToggle(buttonToggle) {
let isExpanded = buttonToggle.getAttribute('aria-expanded') === 'true';
if (!isExpanded) {
closeSubmenus();
openSubmenu(buttonToggle);
} else {
closeSubmenus();
}
}
function closeCurrentSubmenu(buttonClose) {
console.log('close submenu');
console.log(buttonClose.parentElement);
const currentOpenedSubmenu = buttonClose.parentElement;
currentOpenedSubmenu.classList.remove('sub-menu--open');
currentOpenedSubmenu.classList.add('sub-menu--closed');
currentOpenedSubmenu.parentElement
.querySelector('.menu-item__submenu-toggle')
.setAttribute('aria-expanded', 'false');
}
// SUBMENU TOGGGLES open/close
submenuToggles.forEach((button) => {
button.addEventListener('click', () => {
if (isSearchOpen() === true) {
closeSearch();
}
handleSubmenuToggle(button);
// closeSearch();
});
});
submenuCloseBtns.forEach((button) => {
button.addEventListener('click', () => closeCurrentSubmenu(button));
});
/* -----------------------------------------------------------
HANDLE SEARCH
-----------------------------------------------------------*/
function isSearchOpen() { function isSearchOpen() {
return searchModule.getAttribute('aria-hidden') === 'true'; // IF CLOSED
if (
searchModule.getAttribute('mobile-closed') != null &&
searchModule.getAttribute('aria-hidden') != null &&
searchModule.getAttribute('mobile-opened') === null
) {
return false;
}
// IF OPENED
if (
searchModule.getAttribute('mobile-opened') != null &&
searchModule.getAttribute('mobile-closed') === null &&
searchModule.getAttribute('aria-hidden') === null
) {
return true;
}
// IF TRANSITIONNING OR PROBLEM
return null;
} }
function openSearch() { function openSearch() {
searchModule.classList.remove('search-module-open'); searchModuleToggle.setAttribute('aria-expanded', '');
searchModule.classList.add('search-module-closed'); searchModule.setAttribute('mobile-opened', '');
searchModule.removeAttribute('mobile-closed');
setTimeout(() => { setTimeout(() => {
searchModule.setAttribute('aria-hidden', 'true'); searchModule.removeAttribute('aria-hidden');
}, 400); }, 400);
} }
function closeSearch() { function closeSearch() {
searchModule.setAttribute('aria-hidden', 'false'); searchModule.setAttribute('aria-hidden', '');
searchModule.removeAttribute('mobile-opened', '');
setTimeout(() => { searchModule.setAttribute('mobile-closing', '');
searchModule.classList.remove('search-module-closed');
searchModule.classList.add('search-module-open'); searchModule.addEventListener(
}, 50); 'animationend',
() => {
searchModule.setAttribute('mobile-closed', '');
searchModule.removeAttribute('mobile-closing', '');
},
{ once: true }
);
// setTimeout(() => {
// searchModule.setAttribute('mobile-closed', '');
// searchModule.removeAttribute('mobile-opened', '');
// }, 50);
searchModuleToggle.toggleAttribute('aria-expanded'); searchModuleToggle.toggleAttribute('aria-expanded');
} }
// SEARCH TOGGLE open/close // SEARCH TOGGLE open/close
searchModuleToggle.addEventListener('click', function (e) { searchModuleToggle.addEventListener('click', function (e) {
// const isSearchOpen = searchModule.getAttribute('aria-hidden') === 'true';
closeSubmenus(); closeSubmenus();
// MENU IS OPEN --> CLOSE IT
if (isSearchOpen()) { // SEARCH IS CLOSED --> OPEN IT
closeSearch(); if (isSearchOpen() === false) {
openSearch();
return; return;
} }
// MENU IS CLOSED --> OPEN IT
if (!isSearchOpen()) { // SEARCH IS OPEN --> CLOSE IT
openSearch(); if (isSearchOpen() === true) {
closeSearch();
} }
}); });
// SEARCH TOGGLE open/close /* -----------------------------------------------------------
submenuToggles.forEach((button) => { HANDLE MOBILE
button.addEventListener('click', () => openSubmenu(button)); -----------------------------------------------------------*/
const renovateurNavListContainer = header.querySelector('.menu-renovateur__navlist-container');
const HomegradeNavListContainer = header.querySelector('.menu-homegrade');
function openMenu(menuContainer) {
// header.removeAttribute('closed', '');
// header.setAttribute('opened', '');
// header.removeAttribute('aria-hidden', '');
// header.setAttribute('opening', '');
// RENOVATEUR
menuContainer.removeAttribute('closed', '');
menuContainer.setAttribute('opened', '');
menuContainer.removeAttribute('aria-hidden', '');
menuContainer.setAttribute('opening', '');
menuContainer.addEventListener(
'animationend',
() => {
menuContainer.removeAttribute('opening', '');
},
{ once: true }
);
}
function closeMenu(menuContainer) {
// header.removeAttribute('opened');
// header.setAttribute('aria-hidden', '');
// header.setAttribute('closing', '');
menuContainer.removeAttribute('opened');
menuContainer.setAttribute('aria-hidden', '');
menuContainer.setAttribute('closing', '');
menuContainer.addEventListener(
'animationend',
() => {
menuContainer.setAttribute('closed', '');
menuContainer.removeAttribute('closing', '');
},
{ once: true }
);
}
mobileMenuToggle.addEventListener('click', function (e) {
const isNavOpened = renovateurNavListContainer.hasAttribute('opened');
// Button Text Content
const textContent = mobileMenuToggle.querySelector('span.text-content');
const dataTextOpen = mobileMenuToggle.getAttribute('data-text-open');
const dataTextClose = mobileMenuToggle.getAttribute('data-text-close');
// Change Text button
textContent.textContent = isNavOpened ? dataTextOpen : dataTextClose;
// Toggle Aria-expanded
mobileMenuToggle.toggleAttribute('aria-expanded');
// Handle Visibility
if (isNavOpened) {
closeMenu(renovateurNavListContainer);
closeMenu(HomegradeNavListContainer);
}
if (!isNavOpened) {
openMenu(renovateurNavListContainer);
openMenu(HomegradeNavListContainer);
}
}); });
// #### BURGER TOGGLE open/close
// const burgerMenuToggle = header.querySelector('#burger-menu-toggle');
// burgerMenuToggle.addEventListener('click', function (e) {
// 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,
// });
// });
// #### SUBMENUS TOGGLE open/close
// const submenuToggles = primary_menu.querySelectorAll(
// '.menu-item-submenu-toggle'
// );
// #### Close nav when reaching the end of the menu with tab
// document.addEventListener(
// 'focusin',
// (e) => {
// const header = document.querySelector('#primary-header');
// console.log(header.contains(document.activeElement));
// if (header.classList.contains('nav-open') && !header.contains(document.activeElement)) {
// header.classList.remove('nav-open');
// burgerMenuToggle.setAttribute('aria-expanded', false);
// burgerMenuToggle.focus();
// }
// },
// true
// );
} }

2
style.css
View File

@ -3,5 +3,5 @@ Theme Name: Homegrade_Theme
Author: Deligraph Author: Deligraph
Author URI: https://deligraph.com/ Author URI: https://deligraph.com/
Version: 1.0.0 Version: 1.0.0
Text Domain: homegrade-theme__texte-fonctionnel
*/ */

6
template-blocks/home/home-header/home-header.css
View File

@ -1,8 +1,10 @@
.home-header { .home-header {
@apply max-w-screen-xl mx-auto px-6 lg:px-16 pt-16 xl:pt-20 @apply max-w-screen-xl mx-auto px-6 lg:px-16 pt-16 xl:pt-20
mb-24 mb-24;
isolation: isolate;
/* relative */ /* relative */
/* bg-red-100 */; /* bg-red-100 */
/* aspect-ratio: 1.5; */ /* aspect-ratio: 1.5; */
/* min-height: 80vh; */ /* min-height: 80vh; */

10
template-blocks/home/show-thematiques/show-thematiques.js
View File

@ -1,8 +1,5 @@
window.addEventListener('DOMContentLoaded', (event) => { window.addEventListener('DOMContentLoaded', (event) => {
const cardThematiques = document.querySelectorAll( const cardThematiques = document.querySelectorAll('.swiper-slide .card-thematique');
'.swiper-slide .card-thematique'
);
console.log(`cardThematiques`, cardThematiques);
mySwiper = new Swiper('.swiper-container', { mySwiper = new Swiper('.swiper-container', {
grabCursor: false, grabCursor: false,
@ -21,10 +18,7 @@ window.addEventListener('DOMContentLoaded', (event) => {
el: '.swiper-pagination', el: '.swiper-pagination',
clickable: true, clickable: true,
renderBullet: function (index, className) { renderBullet: function (index, className) {
const ariaLabel = const ariaLabel = cardThematiques[index].getAttribute('data-taxonomy');
cardThematiques[index].getAttribute(
'data-taxonomy'
);
return `<button class="${className}" aria-label="${ariaLabel}"></button>`; return `<button class="${className}" aria-label="${ariaLabel}"></button>`;
}, },

10
template-components/header/menu-homegrade.php
View File

@ -2,15 +2,9 @@
?> ?>
<nav class="menu-homegrade menu-homegrade--header"> <nav class="menu-homegrade menu-homegrade--header" closed>
<div class="menu-homegrade__wrapper-container"> <!-- <div class="menu-homegrade__wrapper-container"> -->
<button class="menu-homegrade__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>
<?php <?php
wp_nav_menu( wp_nav_menu(
array( array(

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

@ -7,16 +7,8 @@ $menuitems = wp_get_nav_menu_items($menu->term_id, array('order' => 'DESC'));
// print_r($menuitems); // print_r($menuitems);
// echo '</pre>'; // echo '</pre>';
?> ?>
<!-- MENU RENOV NEW -->
<!-- MENU RENOV ANCIEN -->
<div class="menu-renovateur"> <div class="menu-renovateur">
<div class="website_logo"> <div class="website_logo">
@ -36,17 +28,40 @@ $menuitems = wp_get_nav_menu_items($menu->term_id, array('order' => 'DESC'));
</div> </div>
<div class="menu-renovateur__interaction_toggles">
<button id="search-module-toggle" class="menu-renovateur__search-module-toggle cta cta--circular cta--outline cta--outline-secondary !border border-secondary " title="<?php echo __("Ouvrir la recherche", "homegrade-theme__texte-fonctionnel") ?>" aria-label="<?php echo __("Ouvrir la recherche", "homegrade-theme__texte-fonctionnel") ?>" aria-controls="search-module">
<img src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/search-icon.svg' ?>" alt="">
</button>
<button id="mobile-menu-toggle" class="menu-renovateur__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-label="<?php echo __("Ouvrir le menu", "homegrade-theme__texte-fonctionnel") ?>" aria-controls="menu-renovateur-navlist-container">
<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>
<ul id="menu-menu-renovateur" class="menu-renovateur__navlist"> </button>
</div>
<div id="menu-renovateur-navlist-container" class="menu-renovateur__navlist-container" closed>
<ul id="menu-menu-renovateur" class="menu-renovateur__navlist mobile-navlist">
<?php <?php
$count = 0; $count = 0;
$submenu = false; $submenu = false;
foreach ($menuitems as $key => $item) : foreach ($menuitems as $key => $item) :
// write_log("item"); // write_log("item");
// write_log($item); // write_log($item);
$link = $item->url; $link = $item->url;
$title = $item->title; $title = $item->title;
$pageIcon = get_field('page_icon', $object->ID);
// echo '<pre>';
// print_r($item);
// print_r($pageIcon);
// echo '</pre>';
// item does not have a parent so menu_item_parent equals 0 (false) // item does not have a parent so menu_item_parent equals 0 (false)
?> ?>
@ -59,14 +74,14 @@ $menuitems = wp_get_nav_menu_items($menu->term_id, array('order' => 'DESC'));
<!-- HAS SUBMENU --> <!-- HAS SUBMENU -->
<?php if ($menuitems[$key + 1]->menu_item_parent == $item->ID) : ?> <?php if ($menuitems[$key + 1]->menu_item_parent == $item->ID) : ?>
<li id="menu-item-<?php echo $item->ID ?>" class="menu-item-has-children"> <li id="menu-item-<?php echo $item->ID ?>" class="menu-item menu-item-has-children">
<button> <button type="button" class="menu-item__submenu-toggle" aria-expanded="false">
<?php echo $title; ?> <?php echo $title; ?>
</button> </button>
<!-- NO SUBMENU --> <!-- HAS NO SUBMENU -->
<?php else : ?> <?php else : ?>
<li id="menu-item-<?php echo $item->ID ?>"> <li id="menu-item-<?php echo $item->ID ?>" class="menu-item ">
<a href=" <?php echo $link; ?>" class="title"> <a href=" <?php echo $link; ?>" class="title">
<?php echo $title; ?> <?php echo $title; ?>
@ -80,40 +95,48 @@ $menuitems = wp_get_nav_menu_items($menu->term_id, array('order' => 'DESC'));
/* ----------------------------------------------------------- /* -----------------------------------------------------------
IF IS A SUBMENU IF IS A SUBMENU
-----------------------------------------------------------*/ -----------------------------------------------------------*/
write_log($item); // write_log($item);
// echo '<pre>'; // echo '<pre>';
// print_r(168); // print_r(168);
// print_r(gettype($item->ID)); // print_r(gettype($item->ID));
// echo '</pre>'; // echo '</pre>';
if ($parent_id == $item->menu_item_parent) : ?> if ($parent_id == $item->menu_item_parent) : ?>
<?php if (!$submenu) : $submenu = true; ?> <?php if (!$submenu) : $submenu = true; ?>
<div class="sub-menu sub-menu--closed"> <div class="sub-menu sub-menu--closed" id="submenu-<?php echo $item->menu_item_parent ?>">
<button class="menu-item__submenu-close" id="submenu-toggle-<?php echo $item->menu_item_parent ?>" aria-label="<?php echo __("Fermer le sous-menu", "homegrade-theme__texte-fonctionnel") ?>" aria-controls="submenu-<?php echo $item->menu_item_parent ?>">
<img src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/close_submenu_icon.svg' ?>" alt="">
</button>
<?php /* NOS CONSEILS — TAXONOMY SUBMENU TITLE */ <?php /* NOS CONSEILS — TAXONOMY SUBMENU TITLE */
if ($item->menu_item_parent === "168") : ?> if ($item->menu_item_parent === "168") : ?>
<h5>Découvrez nos conseils par thématique</h5> <h5 class="menu-item__submenu-title">Découvrez nos conseils par thématique</h5>
<hr>
<?php endif; ?> <?php endif; ?>
<?php /* AIDES FINANCIERES SUBMENU TITLE */ <?php /* AIDES FINANCIERES SUBMENU TITLE */
if ($item->menu_item_parent === "169") : ?> if ($item->menu_item_parent === "169") : ?>
<h5>Quelles sont les aides financières disponibles pour votre logement ?</h5> <h5 class="menu-item__submenu-title">Quelles sont les aides financières disponibles pour votre logement ?</h5>
<hr>
<?php endif; ?> <?php endif; ?>
<ul class="sub-menu__navlist"> <ul class="sub-menu__navlist">
<?php endif; ?> <?php endif; ?>
<li class="sub-menu__navlist__item"> <li class="submenu-item sub-menu__navlist__item">
<?php <?php
// #### IF IS TAXONOMY SUB-ITEM // #### IF IS TAXONOMY SUB-ITEM
if ($item->type === "taxonomy") : if ($item->type === "taxonomy") :
$term = get_term_by('id', $item->object_id, 'thematiques'); $term = get_term_by('id', $item->object_id, 'thematiques');
$cover = get_field('taxonomy_pictures', "thematiques_" . $item->object_id); $cover = get_field('taxonomy_pictures', "thematiques_" . $item->object_id);
?> ?>
<a href="<?php echo get_term_link($term) ?>">
<img class="sub-menu__navlist__thematique-icon" src="<?php echo $cover['icon']['url'] ?>" alt=""> <img class="sub-menu__navlist__thematique-icon" src="<?php echo $cover['icon']['url'] ?>" alt="">
<div class="details"> <div class="details">
<h6><?php echo $title; ?></h6> <h6><?php echo $title; ?></h6>
<p class="sub-menu__navlist__description"><?php echo $term->description ?></p> <p class="sub-menu__navlist__description"><?php echo $term->description ?></p>
</div> </div>
</a>
<?php else : ?> <?php else : ?>
<a href="<?php echo $link; ?>" class="title"><?php echo $title; ?></a> <a href="<?php echo $link; ?>" class="title"><?php echo $title; ?></a>
@ -137,16 +160,10 @@ $menuitems = wp_get_nav_menu_items($menu->term_id, array('order' => 'DESC'));
endforeach; ?> endforeach; ?>
</ul> </ul>
</div>
<button id="search-module-toggle" class="menu-renovateur__search-module-toggle cta cta--circular cta--outline cta--outline-secondary !border border-secondary " title="<?php echo __('Facebook', "homegrade-theme-terminologie") ?>" href="<?php echo $social_networks['facebook_profile_url'] ?>">
<img src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/search-icon.svg' ?>" alt="">
</button>
<button id="mobile-menu-toggle" class="menu-renovateur__mobile-menu-toggle cta cta--outline cta--button">
Menu
</button>
<!-- SEARCH MODULE --> <!-- SEARCH MODULE -->
<?php get_template_part('template-components/header/search-module'); ?> <?php get_template_part('template-components/header/search-module'); ?>

2
template-components/header/search-module.php
View File

@ -2,7 +2,7 @@
?> ?>
<div class="search-module search-module-closed" aria-hidden="true"> <div id="search-module" class="search-module" mobile-closed aria-hidden role="search">
<div class="search-module__wrapper-container"> <div class="search-module__wrapper-container">
<?php get_search_form(); ?> <?php get_search_form(); ?>
<div class="search-module__suggestions"> <div class="search-module__suggestions">