From 55efd70f34a1ba1e68f2d3a38236f5c01fc4c202 Mon Sep 17 00:00:00 2001 From: Antoine M Date: Tue, 11 Jul 2023 17:14:35 +0200 Subject: [PATCH] premiers resultats concrets sur le menus --- css/app.css | 533 ++++++++++++++---- header.php | 4 +- includes/navwalker.php | 56 +- js/app.js | 121 +++- resources/css/app.css | 1 + resources/css/components/search-module.css | 42 +- resources/css/layout/header.css | 5 +- resources/css/layout/menu-homegrade.css | 103 ++-- resources/css/layout/menu-renovateur.css | 149 ++++- resources/css/utilities/animation.css | 67 +++ .../img/graphic-assets/close_submenu_icon.svg | 12 + resources/js/app.js | 3 +- resources/js/header.js | 235 +++++--- style.css | 2 +- .../home/home-header/home-header.css | 8 +- .../home/show-thematiques/show-thematiques.js | 10 +- template-components/header/menu-homegrade.php | 32 +- .../header/menu-renovateur.php | 217 +++---- template-components/header/search-module.php | 2 +- 19 files changed, 1123 insertions(+), 479 deletions(-) create mode 100644 resources/css/utilities/animation.css create mode 100644 resources/img/graphic-assets/close_submenu_icon.svg diff --git a/css/app.css b/css/app.css index bf605c8..f26395c 100644 --- a/css/app.css +++ b/css/app.css @@ -974,6 +974,166 @@ video { 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 ############ */ body:not(.wp-admin) { @@ -1367,6 +1527,7 @@ button:focus { position: absolute; left: 0px; bottom: 0px; + z-index: 10; width: 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)); @@ -1376,6 +1537,28 @@ button:focus { padding-right: 4rem; padding-top: 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 { @@ -1469,32 +1652,6 @@ button:focus { 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 { position: relative; border-radius: 1.5rem; @@ -1663,12 +1820,16 @@ header#main-header { flex-direction: column-reverse; } -@media (min-width: 782px) { +@media (min-width: 960px) { header#main-header { flex-direction: column; } } +.sub-menu { + z-index: 10; +} + .site-footer { margin-top: 3rem; display: grid; @@ -1815,8 +1976,6 @@ article > *:not(.entry-content), display: flex; flex-wrap: wrap; justify-content: space-between; - --tw-bg-opacity: 1; - background-color: rgb(254 252 232 / var(--tw-bg-opacity)); padding-top: 2rem; padding-bottom: 2rem; 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); } -.menu-renovateur .logo { +.menu-renovateur .website_logo { + order: 1; margin-right: 3rem; width: 190px; } @media (min-width: 1280px) { - .menu-renovateur .logo { + .menu-renovateur .website_logo { width: 222px; } } @@ -1842,24 +2002,28 @@ article > *:not(.entry-content), } */ .menu-renovateur__navlist { + position: relative; justify-content: center; - gap: 2rem; --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 { display: flex; } } -.menu-renovateur__navlist > li .page_icon { - height: 50px; - width: 50px; +.menu-renovateur__navlist > .menu-item:hover > a, + .menu-renovateur__navlist > .menu-item:hover > button, + .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; align-items: center; justify-content: center; @@ -1869,7 +2033,7 @@ article > *:not(.entry-content), } @media (min-width: 960px) { - .menu-renovateur__navlist > li { + .menu-renovateur__navlist > .menu-item { position: relative; } } @@ -1877,16 +2041,28 @@ article > *:not(.entry-content), /* Generic Submenu Item */ .menu-renovateur__navlist .sub-menu { - position: absolute; - bottom: 0px; + position: fixed; + top: 0px; + z-index: 50; + min-height: 100vh; + width: 100%; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); - transform: translateY(100%); - width: 100vw; - max-width: 48rem; padding: 2rem; } +@media (min-width: 960px) { + .menu-renovateur__navlist .sub-menu { + position: absolute; + min-height: 0px; + width: 100vw; + max-width: 48rem; + bottom: -31px; + transform: translateY(100%); + top: unset; + } +} + .menu-renovateur__navlist .sub-menu--closed { display: none; } @@ -1897,22 +2073,18 @@ article > *:not(.entry-content), /* 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 { display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); 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; gap: 1rem; } @@ -1945,19 +2117,165 @@ article > *:not(.entry-content), 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 { 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 { - z-index: 50; height: -webkit-fit-content; height: -moz-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 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); @@ -1992,6 +2310,7 @@ article > *:not(.entry-content), height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; + width: 100%; --tw-bg-opacity: 1; background-color: rgb(47 1 84 / var(--tw-bg-opacity)); 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 */ -.menu-homegrade__wrapper-container li .sub-menu { +.menu-homegrade .sub-menu[open] { + display: block; +} + +.menu-homegrade li .sub-menu { position: static; margin-left: auto; margin-right: auto; @@ -2107,34 +2399,34 @@ article > *:not(.entry-content), } @media (min-width: 960px) { - .menu-homegrade__wrapper-container li .sub-menu { + .menu-homegrade li .sub-menu { position: absolute; margin-left: 0px; margin-right: 0px; } } -.menu-homegrade__wrapper-container li .sub-menu { +.menu-homegrade li .sub-menu { z-index: 999; display: none; } -.menu-homegrade__wrapper-container li .sub-menu.sub-menu-open { - display: block; -} +/* &.sub-menu--open { + display: block; + } */ -.menu-homegrade__wrapper-container li .sub-menu li { +.menu-homegrade li .sub-menu li { padding-top: 0.5rem; padding-bottom: 0.5rem; } @media (min-width: 960px) { - .menu-homegrade__wrapper-container li .sub-menu li { + .menu-homegrade li .sub-menu li { text-align: left; } } -.menu-homegrade__wrapper-container li .sub-menu > a::after { +.menu-homegrade li .sub-menu > a::after { transform: translateY(-2px) rotate(-90deg); content: ''; display: inline-block; @@ -2147,7 +2439,15 @@ article > *:not(.entry-content), transition: all 0.3s ease-out; } +/* &__wrapper-container { + } */ + .menu-homegrade__navlist { + margin-left: auto; + margin-right: auto; + width: 100%; + max-width: 1440px; + justify-content: flex-end; padding-right: 0px; } @@ -2193,18 +2493,18 @@ article > *:not(.entry-content), /* IF SUBMENU CHILD */ -.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:hover, + .menu-homegrade__navlist li.menu-item .menu-item__submenu-toggle:focus { --tw-text-opacity: 1; 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; 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; content: '▼'; position: absolute; @@ -2220,11 +2520,11 @@ article > *:not(.entry-content), 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); } -.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); } @@ -2293,6 +2593,26 @@ article > *:not(.entry-content), 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 { } @@ -2365,6 +2685,11 @@ article > *:not(.entry-content), } } +.home-header { + isolation: isolate; + /* relative */ +} + /* background-color: #fbfff5a6; */ .home-header__titling { @@ -2413,6 +2738,8 @@ article > *:not(.entry-content), /* cubic-bezier(0.18, 0.89, 0.3, 1); */ } +/* bg-red-100 */ + .home-header__fresque { width: 100%; z-index: -1; diff --git a/header.php b/header.php index 829ecca..906df8b 100644 --- a/header.php +++ b/header.php @@ -25,7 +25,9 @@ - + diff --git a/includes/navwalker.php b/includes/navwalker.php index f94bec9..823e86c 100644 --- a/includes/navwalker.php +++ b/includes/navwalker.php @@ -6,13 +6,10 @@ 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 if ($args->theme_location === "homegrade" && $args->menu_id === "menu-homegrade-navlist" && in_array('menu-item-has-children', $item->classes, true)) { - $output = ''; + $output = ''; } // #### MENU HOMEGRADE FOOTER @@ -21,12 +18,12 @@ function wrap_parent_menu_item_buttons($output, $item, $depth, $args) } - + // #### MENU RENOVATEUR if ($args->theme_location === "renovateur") { $page_icon = get_field('page_icon', $item->object_id); if (in_array('menu-item-has-children', $item->classes, true)) { - $output = ''; + $output = ''; } // #### ICONE DE PAGE FOR TOP LEVEL MENU ITEMS @@ -36,8 +33,7 @@ function wrap_parent_menu_item_buttons($output, $item, $depth, $args) $output = $icon . $link; } - write_log($output); - + // #### TAXONOMY : GET ICON & INFOS ABOUT TAX if ($item->type === "taxonomy") { @@ -58,47 +54,3 @@ function wrap_parent_menu_item_buttons($output, $item, $depth, $args) return $output; } 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); \ No newline at end of file diff --git a/js/app.js b/js/app.js index bbde911..bc94801 100644 --- a/js/app.js +++ b/js/app.js @@ -2,63 +2,132 @@ // resources/js/header.js function menuInit() { 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 submenuToggles = header.querySelectorAll(".menu-item-submenu-toggle"); - const submenusItems = header.querySelectorAll(".sub-menu"); + const mobileMenuToggle = header.querySelector("#mobile-menu-toggle"); + const submenuToggles = header.querySelectorAll(".menu-item__submenu-toggle"); + const submenuCloseBtns = header.querySelectorAll(".menu-item__submenu-close"); function isSubmenuOpen() { return header.querySelector("sub-menu-open") !== null; } function openSubmenu(buttonToggle) { - closeSubmenus(); let isExpanded = buttonToggle.getAttribute("aria-expanded") === "true"; 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() { - const openSubmenus = header.querySelectorAll(".sub-menu-open"); + const openSubmenus = header.querySelectorAll(".sub-menu--open"); openSubmenus.forEach((submenu) => { - submenu.classList.remove("sub-menu-open"); - submenu.parentElement.querySelector(".menu-item-submenu-toggle").setAttribute("aria-expanded", "false"); - console.log(submenu.parentElement); + submenu.classList.remove("sub-menu--open"); + submenu.classList.add("sub-menu--closed"); + 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() { - 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() { - searchModule.classList.remove("search-module-open"); - searchModule.classList.add("search-module-closed"); + searchModuleToggle.setAttribute("aria-expanded", ""); + searchModule.setAttribute("mobile-opened", ""); + searchModule.removeAttribute("mobile-closed"); setTimeout(() => { - searchModule.setAttribute("aria-hidden", "true"); + searchModule.removeAttribute("aria-hidden"); }, 400); } function closeSearch() { - searchModule.setAttribute("aria-hidden", "false"); - setTimeout(() => { - searchModule.classList.remove("search-module-closed"); - searchModule.classList.add("search-module-open"); - }, 50); + searchModule.setAttribute("aria-hidden", ""); + searchModule.removeAttribute("mobile-opened", ""); + searchModule.setAttribute("mobile-closing", ""); + searchModule.addEventListener("animationend", () => { + searchModule.setAttribute("mobile-closed", ""); + searchModule.removeAttribute("mobile-closing", ""); + }, { once: true }); searchModuleToggle.toggleAttribute("aria-expanded"); } searchModuleToggle.addEventListener("click", function(e) { closeSubmenus(); - if (isSearchOpen()) { - closeSearch(); + if (isSearchOpen() === false) { + openSearch(); return; } - if (!isSearchOpen()) { - openSearch(); + if (isSearchOpen() === true) { + closeSearch(); } }); - submenuToggles.forEach((button) => { - button.addEventListener("click", () => openSubmenu(button)); + const renovateurNavListContainer = header.querySelector(".menu-renovateur__navlist-container"); + 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 - console.log("menuInit"); - console.log("menuIniteeeee"); window.addEventListener("load", function() { menuInit(); }); diff --git a/resources/css/app.css b/resources/css/app.css index e7b307b..ff1f82c 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -4,6 +4,7 @@ /* ########### UTILITIES ############ */ @import './utilities/shadows.css'; +@import './utilities/animation.css'; /* ########### BASE ############ */ @import './base/typography.css'; diff --git a/resources/css/components/search-module.css b/resources/css/components/search-module.css index e7e2142..4614365 100644 --- a/resources/css/components/search-module.css +++ b/resources/css/components/search-module.css @@ -2,11 +2,30 @@ @apply w-full absolute bg-white left-0 - bottom-0 px-16 py-6 + z-10 + bottom-0 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 { @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; -} diff --git a/resources/css/layout/header.css b/resources/css/layout/header.css index fb85718..d127f2a 100644 --- a/resources/css/layout/header.css +++ b/resources/css/layout/header.css @@ -1,6 +1,9 @@ header#main-header { @apply flex flex-col-reverse - md:flex-col; + lg:flex-col; } +.sub-menu { + @apply z-10; +} diff --git a/resources/css/layout/menu-homegrade.css b/resources/css/layout/menu-homegrade.css index ed1b6ec..2129cb0 100644 --- a/resources/css/layout/menu-homegrade.css +++ b/resources/css/layout/menu-homegrade.css @@ -5,69 +5,54 @@ bg-primary text-white relative + w-full h-fit py-4 px-8 2xl:px-32 my-0; - &__wrapper-container { - @apply max-w-screen-2xl - w-full - mx-auto - flex - flex-col - lg:flex-row - items-center - justify-around - lg:justify-end; + /* submenus */ + .sub-menu[open] { + display: block; + } + li .sub-menu { + @apply bg-primary + p-6 + mx-auto + lg:mx-0 + static + lg:absolute; + z-index: 999; + display: none; - /* li.menu-item.menu-item-has-children:hover { - @screen lg { - .menu-item-submenu-toggle:after { - transform: rotate(180deg); - } - .sub-menu { - display: block; - } - } - } */ - /* submenus */ - li .sub-menu { - @apply bg-primary - p-6 - mx-auto - lg:mx-0 - static - lg:absolute; - z-index: 999; - display: none; + /* &.sub-menu--open { + display: block; + } */ - &.sub-menu-open { - display: block; - } + li { + @apply py-2 lg:text-left; + } - li { - @apply py-2 lg:text-left; - } - - > a::after { - transform: translateY(-2px) rotate(-90deg); - content: ''; - display: inline-block; - height: 10px; - width: 10px; - margin-left: 20px; - background-image: url('../resources/img/arrow_down_white.svg'); - background-repeat: no-repeat; - background-size: contain; - transition: all 0.3s ease-out; - } + > a::after { + transform: translateY(-2px) rotate(-90deg); + content: ''; + display: inline-block; + height: 10px; + width: 10px; + margin-left: 20px; + background-image: url('../resources/img/arrow_down_white.svg'); + background-repeat: no-repeat; + background-size: contain; + transition: all 0.3s ease-out; } } + /* &__wrapper-container { + } */ &__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 */ li.current-page-parent > a, @@ -95,7 +80,7 @@ } /* IF SUBMENU CHILD */ - .menu-item-submenu-toggle { + .menu-item__submenu-toggle { &:hover, &:focus { @apply text-secondary; @@ -117,10 +102,10 @@ 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); } - .menu-item-submenu-toggle[aria-expanded='true']:after { + .menu-item__submenu-toggle[aria-expanded='true']:after { 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 */ /* @media (max-width: 960px) { diff --git a/resources/css/layout/menu-renovateur.css b/resources/css/layout/menu-renovateur.css index 405c40f..49ba5f3 100644 --- a/resources/css/layout/menu-renovateur.css +++ b/resources/css/layout/menu-renovateur.css @@ -2,27 +2,35 @@ @apply py-8 px-16 relative - bg-yellow-50 shadow-md flex flex-wrap justify-between; - .logo { - @apply mr-12 + .website_logo { + @apply order-1 + mr-12 w-[190px] xl:w-[222px]; } /* &__main-elements { @apply w-full bg-red-200 flex justify-between items-center; } */ - &__navlist { - @apply md:flex justify-center gap-8 bg-green-200; - > li { - .page_icon { - @apply w-[50px] h-[50px]; + &__navlist { + @apply lg:flex + bg-fuchsia-300 + justify-center + relative; + + > .menu-item { + &:hover > a, + &:hover > button, + > a:focus, + > button:focus { + @apply text-secondary bg-gray; } + @apply text-black flex lg:relative @@ -32,9 +40,24 @@ } /* Generic Submenu Item */ .sub-menu { - @apply absolute bottom-0 bg-white; - transform: translateY(100%); - @apply max-w-3xl w-screen p-8; + @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%); + top: unset; + } + &--closed { @apply hidden; } @@ -45,15 +68,9 @@ /* Conseils — Thamtiques Submenu Item */ li#menu-item-168 { - hr { - @apply my-3 mb-6; - } - .sub-menu { - /* @apply hidden; */ - } .sub-menu__navlist { - @apply grid grid-cols-2 gap-4; - &__item { + @apply grid md:grid-cols-2 gap-4; + &__item a { @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 { - @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 { - @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; + } } } diff --git a/resources/css/utilities/animation.css b/resources/css/utilities/animation.css new file mode 100644 index 0000000..2debd7e --- /dev/null +++ b/resources/css/utilities/animation.css @@ -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%); + } +} diff --git a/resources/img/graphic-assets/close_submenu_icon.svg b/resources/img/graphic-assets/close_submenu_icon.svg new file mode 100644 index 0000000..2d46fbf --- /dev/null +++ b/resources/img/graphic-assets/close_submenu_icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/resources/js/app.js b/resources/js/app.js index 053ebd4..47ede7c 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -1,6 +1,5 @@ import menuInit from './header'; -console.log('menuInit'); -console.log('menuIniteeeee'); + window.addEventListener('load', function () { menuInit(); }); diff --git a/resources/js/header.js b/resources/js/header.js index 04307bd..27cbfc8 100644 --- a/resources/js/header.js +++ b/resources/js/header.js @@ -2,109 +2,212 @@ export default function menuInit() { const header = document.querySelector('#main-header'); // Search module - searchModule = header.querySelector('.search-module'); + const searchModule = header.querySelector('.search-module'); const searchModuleToggle = header.querySelector('#search-module-toggle'); - // Submenus - const submenuToggles = header.querySelectorAll('.menu-item-submenu-toggle'); - const submenusItems = header.querySelectorAll('.sub-menu'); + // Mobile Menu + const mobileMenuToggle = header.querySelector('#mobile-menu-toggle'); + + /* ----------------------------------------------------------- + HANDLE SUBMENUS + -----------------------------------------------------------*/ + // SubmenusToggles + const submenuToggles = header.querySelectorAll('.menu-item__submenu-toggle'); + const submenuCloseBtns = header.querySelectorAll('.menu-item__submenu-close'); function isSubmenuOpen() { return header.querySelector('sub-menu-open') !== null; } function openSubmenu(buttonToggle) { - closeSubmenus(); let isExpanded = buttonToggle.getAttribute('aria-expanded') === 'true'; 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() { - const openSubmenus = header.querySelectorAll('.sub-menu-open'); + const openSubmenus = header.querySelectorAll('.sub-menu--open'); openSubmenus.forEach((submenu) => { - submenu.classList.remove('sub-menu-open'); + submenu.classList.remove('sub-menu--open'); + submenu.classList.add('sub-menu--closed'); submenu.parentElement - .querySelector('.menu-item-submenu-toggle') + .querySelector('.menu-item__submenu-toggle') .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() { - 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() { - searchModule.classList.remove('search-module-open'); - searchModule.classList.add('search-module-closed'); + searchModuleToggle.setAttribute('aria-expanded', ''); + searchModule.setAttribute('mobile-opened', ''); + searchModule.removeAttribute('mobile-closed'); setTimeout(() => { - searchModule.setAttribute('aria-hidden', 'true'); + searchModule.removeAttribute('aria-hidden'); }, 400); } function closeSearch() { - searchModule.setAttribute('aria-hidden', 'false'); + searchModule.setAttribute('aria-hidden', ''); + searchModule.removeAttribute('mobile-opened', ''); - setTimeout(() => { - searchModule.classList.remove('search-module-closed'); - searchModule.classList.add('search-module-open'); - }, 50); + searchModule.setAttribute('mobile-closing', ''); + + searchModule.addEventListener( + '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'); } // SEARCH TOGGLE open/close searchModuleToggle.addEventListener('click', function (e) { - // const isSearchOpen = searchModule.getAttribute('aria-hidden') === 'true'; closeSubmenus(); - // MENU IS OPEN --> CLOSE IT - if (isSearchOpen()) { - closeSearch(); + + // SEARCH IS CLOSED --> OPEN IT + if (isSearchOpen() === false) { + openSearch(); return; } - // MENU IS CLOSED --> OPEN IT - if (!isSearchOpen()) { - openSearch(); + + // SEARCH IS OPEN --> CLOSE IT + if (isSearchOpen() === true) { + closeSearch(); } }); - // SEARCH TOGGLE open/close - submenuToggles.forEach((button) => { - button.addEventListener('click', () => openSubmenu(button)); + /* ----------------------------------------------------------- + HANDLE MOBILE + -----------------------------------------------------------*/ + 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 - // ); } diff --git a/style.css b/style.css index 744707d..f21447d 100644 --- a/style.css +++ b/style.css @@ -3,5 +3,5 @@ Theme Name: Homegrade_Theme Author: Deligraph Author URI: https://deligraph.com/ Version: 1.0.0 - +Text Domain: homegrade-theme__texte-fonctionnel */ diff --git a/template-blocks/home/home-header/home-header.css b/template-blocks/home/home-header/home-header.css index d9c6294..af6a58a 100755 --- a/template-blocks/home/home-header/home-header.css +++ b/template-blocks/home/home-header/home-header.css @@ -1,8 +1,10 @@ .home-header { @apply max-w-screen-xl mx-auto px-6 lg:px-16 pt-16 xl:pt-20 - mb-24 - /* relative */ - /* bg-red-100 */; + mb-24; + isolation: isolate; + + /* relative */ + /* bg-red-100 */ /* aspect-ratio: 1.5; */ /* min-height: 80vh; */ diff --git a/template-blocks/home/show-thematiques/show-thematiques.js b/template-blocks/home/show-thematiques/show-thematiques.js index 50e418a..1eb1d03 100644 --- a/template-blocks/home/show-thematiques/show-thematiques.js +++ b/template-blocks/home/show-thematiques/show-thematiques.js @@ -1,8 +1,5 @@ window.addEventListener('DOMContentLoaded', (event) => { - const cardThematiques = document.querySelectorAll( - '.swiper-slide .card-thematique' - ); - console.log(`cardThematiques`, cardThematiques); + const cardThematiques = document.querySelectorAll('.swiper-slide .card-thematique'); mySwiper = new Swiper('.swiper-container', { grabCursor: false, @@ -21,10 +18,7 @@ window.addEventListener('DOMContentLoaded', (event) => { el: '.swiper-pagination', clickable: true, renderBullet: function (index, className) { - const ariaLabel = - cardThematiques[index].getAttribute( - 'data-taxonomy' - ); + const ariaLabel = cardThematiques[index].getAttribute('data-taxonomy'); return ``; }, diff --git a/template-components/header/menu-homegrade.php b/template-components/header/menu-homegrade.php index 6c414ec..a418996 100644 --- a/template-components/header/menu-homegrade.php +++ b/template-components/header/menu-homegrade.php @@ -2,25 +2,19 @@ ?> -