search bar and javascript menu start ok
This commit is contained in:
parent
247acde2c4
commit
5324245dd4
|
|
@ -2,5 +2,5 @@
|
||||||
"tabWidth": 2,
|
"tabWidth": 2,
|
||||||
"semi": true,
|
"semi": true,
|
||||||
"singleQuote": true,
|
"singleQuote": true,
|
||||||
"printWidth": 60
|
"printWidth": 100
|
||||||
}
|
}
|
||||||
964
css/app.css
964
css/app.css
File diff suppressed because it is too large
Load Diff
|
|
@ -131,10 +131,6 @@
|
||||||
justify-content: center
|
justify-content: center
|
||||||
}
|
}
|
||||||
|
|
||||||
.justify-between {
|
|
||||||
justify-content: space-between
|
|
||||||
}
|
|
||||||
|
|
||||||
.rounded {
|
.rounded {
|
||||||
border-radius: 0.25rem
|
border-radius: 0.25rem
|
||||||
}
|
}
|
||||||
|
|
@ -143,6 +139,10 @@
|
||||||
border-width: 1px
|
border-width: 1px
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.\!border {
|
||||||
|
border-width: 1px !important
|
||||||
|
}
|
||||||
|
|
||||||
.border-b {
|
.border-b {
|
||||||
border-bottom-width: 1px
|
border-bottom-width: 1px
|
||||||
}
|
}
|
||||||
|
|
@ -152,6 +152,11 @@
|
||||||
border-color: rgb(47 1 84 / var(--tw-border-opacity))
|
border-color: rgb(47 1 84 / var(--tw-border-opacity))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.border-secondary {
|
||||||
|
--tw-border-opacity: 1;
|
||||||
|
border-color: rgb(223 30 30 / var(--tw-border-opacity))
|
||||||
|
}
|
||||||
|
|
||||||
.bg-primary {
|
.bg-primary {
|
||||||
--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))
|
||||||
|
|
@ -251,16 +256,16 @@
|
||||||
line-height: 2rem
|
line-height: 2rem
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-lg {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
line-height: 1.75rem
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-sm {
|
.text-sm {
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
line-height: 1.25rem
|
line-height: 1.25rem
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text-lg {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
line-height: 1.75rem
|
||||||
|
}
|
||||||
|
|
||||||
.font-light {
|
.font-light {
|
||||||
font-weight: 300
|
font-weight: 300
|
||||||
}
|
}
|
||||||
|
|
@ -581,18 +586,6 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 960px) {
|
@media (min-width: 960px) {
|
||||||
.lg\:flex {
|
|
||||||
display: flex
|
|
||||||
}
|
|
||||||
|
|
||||||
.lg\:items-center {
|
|
||||||
align-items: center
|
|
||||||
}
|
|
||||||
|
|
||||||
.lg\:justify-between {
|
|
||||||
justify-content: space-between
|
|
||||||
}
|
|
||||||
|
|
||||||
.lg\:text-5xl {
|
.lg\:text-5xl {
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
line-height: 1
|
line-height: 1
|
||||||
|
|
|
||||||
14
footer.php
14
footer.php
|
|
@ -44,7 +44,7 @@
|
||||||
'theme_location' => 'renovateur',
|
'theme_location' => 'renovateur',
|
||||||
'li_class' => 'menu-navlink',
|
'li_class' => 'menu-navlink',
|
||||||
'fallback_cb' => false,
|
'fallback_cb' => false,
|
||||||
'menu_class' => 'menu-renovateur-footer',
|
'menu_class' => 'menu-renovateur--footer',
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
@ -56,7 +56,7 @@
|
||||||
'theme_location' => 'homegrade',
|
'theme_location' => 'homegrade',
|
||||||
'li_class' => 'menu-navlink',
|
'li_class' => 'menu-navlink',
|
||||||
'fallback_cb' => false,
|
'fallback_cb' => false,
|
||||||
'menu_class' => 'menu-homegrade-footer',
|
'menu_class' => 'menu-homegrade--footer',
|
||||||
|
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
@ -85,11 +85,11 @@
|
||||||
<ul class="site-footer__partenaires">
|
<ul class="site-footer__partenaires">
|
||||||
<?php $partenaires = get_field('footer_partenaires', 'menu_' . 53)['partenaires']; ?>
|
<?php $partenaires = get_field('footer_partenaires', 'menu_' . 53)['partenaires']; ?>
|
||||||
<?php foreach ($partenaires as $partenaire) : ?>
|
<?php foreach ($partenaires as $partenaire) : ?>
|
||||||
<li>
|
<li>
|
||||||
<a href=" <?php echo $partenaire['url'] ?>" target="_blank">
|
<a href=" <?php echo $partenaire['url'] ?>" target="_blank">
|
||||||
<img src='<?php echo $partenaire['logo']['url'] ?>' alt='<?php echo $partenaire['name'] ?>'>
|
<img src='<?php echo $partenaire['logo']['url'] ?>' alt='<?php echo $partenaire['name'] ?>'>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|
|
||||||
57
header.php
57
header.php
|
|
@ -20,60 +20,17 @@
|
||||||
|
|
||||||
<?php do_action('tailpress_header'); ?>
|
<?php do_action('tailpress_header'); ?>
|
||||||
|
|
||||||
<header id="primary-header">
|
<header id="main-header">
|
||||||
<div class="primary-menu-container lg:flex lg:justify-between lg:items-center">
|
<!-- MENU HOMEGRADE -->
|
||||||
<nav id="primary-menu-nav" class="flex justify-between items-center">
|
<?php get_template_part('template-components/header/menu-homegrade'); ?>
|
||||||
|
|
||||||
|
<!-- MENU RENOVATEUR -->
|
||||||
|
<?php get_template_part('template-components/header/menu-renovateur'); ?>
|
||||||
|
|
||||||
|
|
||||||
<button id="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>
|
|
||||||
<div id="primary-menu">
|
|
||||||
<?php
|
|
||||||
wp_nav_menu(
|
|
||||||
array(
|
|
||||||
'container' => 'false',
|
|
||||||
'theme_location' => 'homegrade',
|
|
||||||
'li_class' => 'menu-navlink',
|
|
||||||
'fallback_cb' => false,
|
|
||||||
'menu_class' => 'menu-homegrade-header',
|
|
||||||
|
|
||||||
)
|
|
||||||
); ?>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<!-- qsdqds -->
|
|
||||||
</header>
|
</header>
|
||||||
<div class="menu-renovateur">
|
|
||||||
<div class="website_logo">
|
|
||||||
<?php if (has_custom_logo()) { ?>
|
|
||||||
<?php the_custom_logo(); ?>
|
|
||||||
<?php } else { ?>
|
|
||||||
<a href=" <?php echo get_bloginfo('url'); ?>" class="font-extrabold text-lg uppercase">
|
|
||||||
<?php echo get_bloginfo('name'); ?>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<p class="text-sm font-light text-gray-600">
|
|
||||||
<?php echo get_bloginfo('description'); ?>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<?php } ?>
|
|
||||||
</div>
|
|
||||||
<?php
|
|
||||||
wp_nav_menu(
|
|
||||||
array(
|
|
||||||
'container' => 'false',
|
|
||||||
'theme_location' => 'renovateur',
|
|
||||||
'li_class' => 'menu-navlink',
|
|
||||||
'fallback_cb' => false,
|
|
||||||
)
|
|
||||||
); ?>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<?php if (is_front_page()) { ?>
|
<?php if (is_front_page()) { ?>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -53,9 +53,10 @@ function tailpress_enqueue_scripts()
|
||||||
{
|
{
|
||||||
$theme = wp_get_theme();
|
$theme = wp_get_theme();
|
||||||
|
|
||||||
|
wp_enqueue_script('gsap', get_template_directory_uri() . '/assets/gsap/gsap.min.js', array(), $theme->get('Version'));
|
||||||
wp_enqueue_style('swipercss', get_template_directory_uri() . '/assets/swiper/swiper-bundle.min.css', array(), $theme->get('Version'));
|
wp_enqueue_style('swipercss', get_template_directory_uri() . '/assets/swiper/swiper-bundle.min.css', array(), $theme->get('Version'));
|
||||||
wp_enqueue_style('tailpress', tailpress_asset('css/app.css'), array(), $theme->get('Version'));
|
wp_enqueue_style('tailpress', tailpress_asset('css/app.css'), array(), $theme->get('Version'));
|
||||||
wp_enqueue_script('tailpress', tailpress_asset('js/app.js'), array(), $theme->get('Version'));
|
wp_enqueue_script('tailpress', tailpress_asset('js/app.js'), array('gsap'), $theme->get('Version'));
|
||||||
// wp_register_script('showthematiquejs', get_template_directory_uri() . '/template-blocks/home/show-thematiques/show-thematiques.js', array('swiperjs', 'swipercss'), $theme->get('Version'));
|
// wp_register_script('showthematiquejs', get_template_directory_uri() . '/template-blocks/home/show-thematiques/show-thematiques.js', array('swiperjs', 'swipercss'), $theme->get('Version'));
|
||||||
wp_enqueue_script('showthematiquejs', get_template_directory_uri() . '/template-blocks/home/show-thematiques/show-thematiques.js', array('swiperjs'), $theme->get('Version'));
|
wp_enqueue_script('showthematiquejs', get_template_directory_uri() . '/template-blocks/home/show-thematiques/show-thematiques.js', array('swiperjs'), $theme->get('Version'));
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@ function wrap_parent_menu_item_buttons($output, $item, $depth, $args)
|
||||||
{
|
{
|
||||||
|
|
||||||
// #### MENU HOMEGRADE HEADER
|
// #### MENU HOMEGRADE HEADER
|
||||||
if ($args->theme_location === "homegrade" && $args->menu_class === "menu-homegrade-header" && 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>';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -27,7 +27,7 @@ function wrap_parent_menu_item_buttons($output, $item, $depth, $args)
|
||||||
$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>';
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($page_icon['url']) {
|
if (isset($page_icon['url'])) {
|
||||||
write_log($page_icon['url']);
|
write_log($page_icon['url']);
|
||||||
$icon = '<img class="page_icon" src="' . $page_icon['url'] . '" alt=""/>';
|
$icon = '<img class="page_icon" src="' . $page_icon['url'] . '" alt=""/>';
|
||||||
$link = $output;
|
$link = $output;
|
||||||
|
|
|
||||||
|
|
@ -64,15 +64,14 @@ function create_posttype()
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
register_post_type(
|
register_post_type(
|
||||||
'fiche-conseils',
|
'conseils',
|
||||||
array(
|
array(
|
||||||
'labels' => array(
|
'labels' => array(
|
||||||
'name' => __('Fiches Conseil'),
|
'name' => __('Conseils'),
|
||||||
'singular_name' => __('Fiche Conseil')
|
'singular_name' => __('Conseil')
|
||||||
),
|
),
|
||||||
'public' => true,
|
'public' => true,
|
||||||
'has_archive' => true,
|
'has_archive' => true,
|
||||||
'rewrite' => array('slug' => 'fiche-conseil'),
|
|
||||||
'show_in_rest' => true,
|
'show_in_rest' => true,
|
||||||
'menu_icon' => 'dashicons-pressthis',
|
'menu_icon' => 'dashicons-pressthis',
|
||||||
'menu_position' => 4,
|
'menu_position' => 4,
|
||||||
|
|
|
||||||
77
js/app.js
77
js/app.js
|
|
@ -1,37 +1,58 @@
|
||||||
(() => {
|
(() => {
|
||||||
// resources/js/header.js
|
// resources/js/header.js
|
||||||
function menuInit() {
|
function menuInit() {
|
||||||
let main_navigation = document.querySelector("#primary-menu");
|
const header = document.querySelector("#main-header");
|
||||||
const header = document.querySelector("#primary-header");
|
searchModule = header.querySelector(".search-module");
|
||||||
const primary_menu = header.querySelector("#primary-menu");
|
const searchModuleToggle = header.querySelector("#search-module-toggle");
|
||||||
const burgerMenuToggle = header.querySelector("#burger-menu-toggle");
|
const submenuToggles = header.querySelectorAll(".menu-item-submenu-toggle");
|
||||||
const submenuToggles = primary_menu.querySelectorAll(".menu-item-submenu-toggle");
|
const submenusItems = header.querySelectorAll(".sub-menu");
|
||||||
burgerMenuToggle.addEventListener("click", function(e) {
|
function isSubmenuOpen() {
|
||||||
e.preventDefault();
|
return header.querySelector("sub-menu-open") !== null;
|
||||||
header.classList.toggle("nav-open");
|
}
|
||||||
burgerMenuToggle.toggleAttribute("aria-expanded");
|
function openSubmenu(buttonToggle) {
|
||||||
gsap.from(primary_menu, {
|
closeSubmenus();
|
||||||
opacity: 20,
|
let isExpanded = buttonToggle.getAttribute("aria-expanded") === "true";
|
||||||
y: "-100vh",
|
buttonToggle.setAttribute("aria-expanded", !isExpanded);
|
||||||
duration: 0.5,
|
buttonToggle.parentElement.querySelector(".sub-menu").classList.toggle("sub-menu-open");
|
||||||
ease: Power4.easeOut
|
}
|
||||||
|
function closeSubmenus() {
|
||||||
|
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);
|
||||||
});
|
});
|
||||||
});
|
}
|
||||||
document.addEventListener("focusin", (e) => {
|
function isSearchOpen() {
|
||||||
const header2 = document.querySelector("#primary-header");
|
return searchModule.getAttribute("aria-hidden") === "true";
|
||||||
console.log(header2.contains(document.activeElement));
|
}
|
||||||
if (header2.classList.contains("nav-open") && !header2.contains(document.activeElement)) {
|
function openSearch() {
|
||||||
header2.classList.remove("nav-open");
|
searchModule.classList.remove("search-module-open");
|
||||||
burgerMenuToggle.setAttribute("aria-expanded", false);
|
searchModule.classList.add("search-module-closed");
|
||||||
burgerMenuToggle.focus();
|
setTimeout(() => {
|
||||||
|
searchModule.setAttribute("aria-hidden", "true");
|
||||||
|
}, 400);
|
||||||
|
}
|
||||||
|
function closeSearch() {
|
||||||
|
searchModule.setAttribute("aria-hidden", "false");
|
||||||
|
setTimeout(() => {
|
||||||
|
searchModule.classList.remove("search-module-closed");
|
||||||
|
searchModule.classList.add("search-module-open");
|
||||||
|
}, 50);
|
||||||
|
searchModuleToggle.toggleAttribute("aria-expanded");
|
||||||
|
}
|
||||||
|
searchModuleToggle.addEventListener("click", function(e) {
|
||||||
|
closeSubmenus();
|
||||||
|
if (isSearchOpen()) {
|
||||||
|
closeSearch();
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
}, true);
|
if (!isSearchOpen()) {
|
||||||
|
openSearch();
|
||||||
|
}
|
||||||
|
});
|
||||||
submenuToggles.forEach((button) => {
|
submenuToggles.forEach((button) => {
|
||||||
button.addEventListener("click", function(e) {
|
button.addEventListener("click", () => openSubmenu(button));
|
||||||
let isExpanded = button.getAttribute("aria-expanded") === "true";
|
|
||||||
button.setAttribute("aria-expanded", !isExpanded);
|
|
||||||
button.parentElement.querySelector(".sub-menu").classList.toggle("sub-menu-open");
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,7 @@
|
||||||
@import './components/card-post.css';
|
@import './components/card-post.css';
|
||||||
@import './components/card-large-content.css';
|
@import './components/card-large-content.css';
|
||||||
@import './components/section-titling.css';
|
@import './components/section-titling.css';
|
||||||
|
@import './components/search-module.css';
|
||||||
|
|
||||||
@import '../../template-components/card-frequent_question.css';
|
@import '../../template-components/card-frequent_question.css';
|
||||||
@import '../../template-components/card-thematique.css';
|
@import '../../template-components/card-thematique.css';
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,8 @@
|
||||||
@apply rounded-full px-8 py-4 focus:rounded-full font-bold h-fit;
|
@apply rounded-full px-8 py-4 focus:rounded-full font-bold h-fit;
|
||||||
}
|
}
|
||||||
&--circular {
|
&--circular {
|
||||||
@apply rounded-full aspect-square w-12 flex items-center justify-center;
|
@apply rounded-full focus:rounded-full aspect-square w-12 flex items-center justify-center;
|
||||||
|
outline-offset: 5px !important;
|
||||||
}
|
}
|
||||||
&--primary {
|
&--primary {
|
||||||
@apply bg-primary text-white
|
@apply bg-primary text-white
|
||||||
|
|
@ -18,6 +19,9 @@
|
||||||
&--outline {
|
&--outline {
|
||||||
@apply border-2 bg-transparent hover:bg-gray;
|
@apply border-2 bg-transparent hover:bg-gray;
|
||||||
}
|
}
|
||||||
|
/* &--outline-secondary {
|
||||||
|
@apply border-secondary border;
|
||||||
|
} */
|
||||||
&--shadowed {
|
&--shadowed {
|
||||||
@apply shadowed;
|
@apply shadowed;
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
@ -40,8 +44,8 @@
|
||||||
transition: transform 0.3s ease-in-out;
|
transition: transform 0.3s ease-in-out;
|
||||||
}
|
}
|
||||||
&:hover .cta_arrow_button {
|
&:hover .cta_arrow_button {
|
||||||
filter: invert(27%) sepia(69%) saturate(6074%)
|
filter: invert(27%) sepia(69%) saturate(6074%) hue-rotate(348deg) brightness(87%)
|
||||||
hue-rotate(348deg) brightness(87%) contrast(100%);
|
contrast(100%);
|
||||||
transform: translateX(3px);
|
transform: translateX(3px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
65
resources/css/components/search-module.css
Normal file
65
resources/css/components/search-module.css
Normal file
|
|
@ -0,0 +1,65 @@
|
||||||
|
.search-module {
|
||||||
|
@apply w-full absolute
|
||||||
|
bg-white
|
||||||
|
left-0
|
||||||
|
bottom-0
|
||||||
|
px-16
|
||||||
|
py-6
|
||||||
|
transform translate-y-full;
|
||||||
|
|
||||||
|
&__wrapper-container {
|
||||||
|
@apply max-w-screen-xl mx-auto;
|
||||||
|
}
|
||||||
|
&__search-form {
|
||||||
|
@apply flex flex-wrap;
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
@apply block font-bold text-lg w-full;
|
||||||
|
}
|
||||||
|
&__separator {
|
||||||
|
@apply mt-2 mb-8 bg-gray-dark border-none opacity-50 w-full;
|
||||||
|
height: 1px;
|
||||||
|
}
|
||||||
|
&__input {
|
||||||
|
@apply block max-w-full flex-grow py-3 border border-black rounded-tl-3xl rounded-bl-3xl px-4;
|
||||||
|
}
|
||||||
|
button[type='submit'] {
|
||||||
|
@apply bg-secondary text-white w-1/6 flex justify-center items-center gap-3 rounded-tr-3xl rounded-br-3xl px-4 py-3;
|
||||||
|
max-width: 300px;
|
||||||
|
.search_icon {
|
||||||
|
@apply invert;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__suggestions {
|
||||||
|
@apply flex flex-wrap gap-x-3 pt-4;
|
||||||
|
&__navlist {
|
||||||
|
@apply flex flex-wrap gap-x-3;
|
||||||
|
|
||||||
|
.suggestion-item {
|
||||||
|
@apply font-bold underline underline-offset-4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
@ -1,263 +1,6 @@
|
||||||
.primary-menu-container {
|
header#main-header {
|
||||||
@apply mx-auto
|
@apply flex
|
||||||
bg-primary
|
flex-col-reverse
|
||||||
text-white
|
md:flex-col;
|
||||||
relative
|
|
||||||
h-fit
|
|
||||||
py-4
|
|
||||||
px-8
|
|
||||||
2xl:px-32
|
|
||||||
my-0;
|
|
||||||
|
|
||||||
nav#primary-menu-nav {
|
|
||||||
@apply max-w-screen-2xl w-full mx-auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#primary-menu {
|
|
||||||
@apply flex
|
|
||||||
flex-col
|
|
||||||
w-full
|
|
||||||
lg:flex-row
|
|
||||||
items-center
|
|
||||||
justify-around
|
|
||||||
lg:justify-end;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
@apply lg:flex
|
|
||||||
|
|
||||||
pr-0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Highlight using list element */
|
|
||||||
li.current-page-parent > a,
|
|
||||||
li.current_page_item > a {
|
|
||||||
@apply font-medium
|
|
||||||
text-white
|
|
||||||
decoration-secondary
|
|
||||||
underline
|
|
||||||
underline-offset-8;
|
|
||||||
}
|
|
||||||
|
|
||||||
li.menu-item {
|
|
||||||
@apply font-medium
|
|
||||||
|
|
||||||
text-center
|
|
||||||
px-4
|
|
||||||
py-2
|
|
||||||
rounded-xl;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
a:focus {
|
|
||||||
@apply cursor-pointer;
|
|
||||||
background-color: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
a:focus {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* IF SUBMENU CHILD */
|
|
||||||
.menu-item-submenu-toggle {
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
@apply text-secondary;
|
|
||||||
}
|
|
||||||
@apply relative pr-4;
|
|
||||||
&:after {
|
|
||||||
@apply absolute right-0;
|
|
||||||
content: '▼';
|
|
||||||
position: absolute;
|
|
||||||
display: inline-block;
|
|
||||||
line-height: 0.5;
|
|
||||||
height: 10px;
|
|
||||||
top: calc(50% - 4px);
|
|
||||||
width: 10px;
|
|
||||||
margin-left: 20px;
|
|
||||||
transform-origin: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: contain;
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.menu-item-submenu-toggle[aria-expanded='false']:after {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
.menu-item-submenu-toggle[aria-expanded='true']:after {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#secondary-menu {
|
|
||||||
@apply flex bg-white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
button#burger-menu-toggle {
|
|
||||||
@apply lg:hidden
|
|
||||||
absolute
|
|
||||||
right-10
|
|
||||||
-translate-y-1/2
|
|
||||||
z-50
|
|
||||||
top-1/2;
|
|
||||||
width: 26px;
|
|
||||||
height: 26px;
|
|
||||||
|
|
||||||
.menu-toggle-bar {
|
|
||||||
@apply top-1/2
|
|
||||||
absolute
|
|
||||||
block
|
|
||||||
right-0
|
|
||||||
w-full
|
|
||||||
h-[2px]
|
|
||||||
/* bg-red-400 */
|
|
||||||
bg-white;
|
|
||||||
margin-top: -1px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
|
|
||||||
&.menu-toggle-bar--top {
|
|
||||||
transform: translate(0, -7px);
|
|
||||||
}
|
|
||||||
&.menu-toggle-bar--middle {
|
|
||||||
}
|
|
||||||
&.menu-toggle-bar--bottom {
|
|
||||||
transform: translate(0, 7px);
|
|
||||||
}
|
|
||||||
.nav-open & {
|
|
||||||
@apply bg-secondary;
|
|
||||||
|
|
||||||
&.menu-toggle-bar--top {
|
|
||||||
transform: translate(0, 0) rotate(45deg);
|
|
||||||
}
|
|
||||||
&.menu-toggle-bar--middle {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
&.menu-toggle-bar--bottom {
|
|
||||||
transform: translate(0, 0) rotate(-45deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
path {
|
|
||||||
@apply fill-secondary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* RESPONSIVE */
|
|
||||||
@media (max-width: 960px) {
|
|
||||||
.primary-menu-container {
|
|
||||||
#primary-menu {
|
|
||||||
@apply bg-primary
|
|
||||||
mt-0
|
|
||||||
left-0
|
|
||||||
z-40
|
|
||||||
absolute
|
|
||||||
hidden;
|
|
||||||
|
|
||||||
/* transition: all 0.3s ease-out;
|
|
||||||
transform: translateY(-120vh); */
|
|
||||||
min-height: 100vh;
|
|
||||||
height: fit-content;
|
|
||||||
top: 0;
|
|
||||||
width: 100vw;
|
|
||||||
|
|
||||||
/* Rendu conditionnel de l'élément si contenu dans une classe de parent (nesting inversé) */
|
|
||||||
|
|
||||||
.nav-open & {
|
|
||||||
@apply flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
> ul {
|
|
||||||
@apply max-w-xs
|
|
||||||
mx-auto;
|
|
||||||
/* min-height: 96vh; */
|
|
||||||
padding-top: 5vh;
|
|
||||||
}
|
|
||||||
li.menu-item {
|
|
||||||
@apply mt-0
|
|
||||||
text-center
|
|
||||||
text-white
|
|
||||||
font-medium
|
|
||||||
py-8
|
|
||||||
text-lg
|
|
||||||
!block
|
|
||||||
pb-0;
|
|
||||||
|
|
||||||
.sub-menu li {
|
|
||||||
@apply text-sm;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* BURGER MENU */
|
|
||||||
body:has(.nav-open) {
|
|
||||||
@apply max-h-screen
|
|
||||||
overflow-hidden;
|
|
||||||
|
|
||||||
/* #content,
|
|
||||||
footer,
|
|
||||||
.wpml-ls-statics-footer {
|
|
||||||
@apply !hidden;
|
|
||||||
} */
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta_plain_secondary,
|
|
||||||
.switch_language {
|
|
||||||
/* @apply self-end; */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 960px) and (hover: none) {
|
|
||||||
/* ul {
|
|
||||||
@apply w-max mx-auto;
|
|
||||||
} */
|
|
||||||
.primary-menu-container {
|
|
||||||
li.menu-item {
|
|
||||||
@apply mx-auto
|
|
||||||
/* !text-left */;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,242 @@
|
||||||
.menu-homegrade-footer {
|
/* .primary-menu-container { */
|
||||||
|
|
||||||
|
.menu-homegrade {
|
||||||
|
@apply mx-auto
|
||||||
|
bg-primary
|
||||||
|
text-white
|
||||||
|
relative
|
||||||
|
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;
|
||||||
|
|
||||||
|
/* 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__navlist {
|
||||||
|
@apply lg:flex pr-0;
|
||||||
|
|
||||||
|
/* Highlight using list element */
|
||||||
|
li.current-page-parent > a,
|
||||||
|
li.current_page_item > a {
|
||||||
|
@apply font-medium
|
||||||
|
text-white
|
||||||
|
decoration-secondary
|
||||||
|
underline underline-offset-8;
|
||||||
|
}
|
||||||
|
|
||||||
|
li.menu-item {
|
||||||
|
@apply font-medium
|
||||||
|
text-center
|
||||||
|
px-4
|
||||||
|
py-2
|
||||||
|
rounded-xl;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
a:focus {
|
||||||
|
@apply cursor-pointer;
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
a:focus {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* IF SUBMENU CHILD */
|
||||||
|
.menu-item-submenu-toggle {
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
@apply text-secondary;
|
||||||
|
}
|
||||||
|
@apply relative pr-4;
|
||||||
|
&:after {
|
||||||
|
@apply absolute right-0;
|
||||||
|
content: '▼';
|
||||||
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 0.5;
|
||||||
|
height: 10px;
|
||||||
|
top: calc(50% - 4px);
|
||||||
|
width: 10px;
|
||||||
|
margin-left: 20px;
|
||||||
|
transform-origin: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menu-item-submenu-toggle[aria-expanded='false']:after {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
.menu-item-submenu-toggle[aria-expanded='true']:after {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__burger-menu-toggle {
|
||||||
|
@apply lg:hidden
|
||||||
|
absolute
|
||||||
|
right-10
|
||||||
|
-translate-y-1/2
|
||||||
|
z-50
|
||||||
|
top-1/2;
|
||||||
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
|
||||||
|
.menu-toggle-bar {
|
||||||
|
@apply top-1/2
|
||||||
|
absolute
|
||||||
|
block
|
||||||
|
right-0
|
||||||
|
w-full
|
||||||
|
h-[2px]
|
||||||
|
/* bg-red-400 */
|
||||||
|
bg-white;
|
||||||
|
margin-top: -1px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&.menu-toggle-bar--top {
|
||||||
|
transform: translate(0, -7px);
|
||||||
|
}
|
||||||
|
&.menu-toggle-bar--middle {
|
||||||
|
}
|
||||||
|
&.menu-toggle-bar--bottom {
|
||||||
|
transform: translate(0, 7px);
|
||||||
|
}
|
||||||
|
.nav-open & {
|
||||||
|
@apply bg-secondary;
|
||||||
|
|
||||||
|
&.menu-toggle-bar--top {
|
||||||
|
transform: translate(0, 0) rotate(45deg);
|
||||||
|
}
|
||||||
|
&.menu-toggle-bar--middle {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
&.menu-toggle-bar--bottom {
|
||||||
|
transform: translate(0, 0) rotate(-45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
path {
|
||||||
|
@apply fill-secondary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*##### RESPONSIVE */
|
||||||
|
|
||||||
|
/* @media (max-width: 960px) {
|
||||||
|
&__wrapper-container {
|
||||||
|
@apply mt-0
|
||||||
|
left-0
|
||||||
|
z-40
|
||||||
|
absolute
|
||||||
|
hidden;
|
||||||
|
|
||||||
|
min-height: 100vh;
|
||||||
|
height: fit-content;
|
||||||
|
top: 0;
|
||||||
|
width: 100vw;
|
||||||
|
|
||||||
|
// Rendu conditionnel de l'élément si contenu dans une classe de parent (nesting inversé)
|
||||||
|
|
||||||
|
.nav-open & {
|
||||||
|
@apply flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
> ul {
|
||||||
|
@apply max-w-xs
|
||||||
|
mx-auto;
|
||||||
|
padding-top: 5vh;
|
||||||
|
}
|
||||||
|
li.menu-item {
|
||||||
|
@apply mt-0
|
||||||
|
text-center
|
||||||
|
text-white
|
||||||
|
font-medium
|
||||||
|
py-8
|
||||||
|
text-lg
|
||||||
|
!block
|
||||||
|
pb-0;
|
||||||
|
|
||||||
|
.sub-menu li {
|
||||||
|
@apply text-sm;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// BURGER MENU
|
||||||
|
body:has(.nav-open) {
|
||||||
|
@apply max-h-screen
|
||||||
|
overflow-hidden;
|
||||||
|
}
|
||||||
|
} */
|
||||||
|
|
||||||
|
/* @media (max-width: 960px) and (hover: none) {
|
||||||
|
li.menu-item {
|
||||||
|
@apply mx-auto
|
||||||
|
}
|
||||||
|
} */
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-homegrade--header {
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-homegrade--footer {
|
||||||
@apply grid grid-cols-4 gap-y-8 mt-8;
|
@apply grid grid-cols-4 gap-y-8 mt-8;
|
||||||
|
|
||||||
li.menu-item a {
|
li.menu-item a {
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,11 @@
|
||||||
.menu-renovateur {
|
.menu-renovateur {
|
||||||
@apply py-8
|
@apply py-8
|
||||||
px-16
|
px-16
|
||||||
|
relative
|
||||||
|
bg-yellow-50
|
||||||
shadow-md
|
shadow-md
|
||||||
flex
|
flex
|
||||||
|
flex-wrap
|
||||||
justify-between;
|
justify-between;
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
|
|
@ -10,9 +13,12 @@
|
||||||
w-[190px]
|
w-[190px]
|
||||||
xl:w-[222px];
|
xl:w-[222px];
|
||||||
}
|
}
|
||||||
|
&__main-elements {
|
||||||
ul {
|
@apply w-full bg-red-200 flex justify-between items-center;
|
||||||
@apply flex justify-center gap-8;
|
}
|
||||||
|
&__navlist {
|
||||||
|
@apply md:absolute md:flex justify-center gap-8 bg-green-200
|
||||||
|
left-1/2 transform -translate-x-1/2 top-1/2 -translate-y-1/2;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
.page_icon {
|
.page_icon {
|
||||||
|
|
@ -29,10 +35,16 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&__mobile-menu-toggle {
|
||||||
|
@apply md:hidden;
|
||||||
|
}
|
||||||
|
&__search-module-toggle {
|
||||||
|
@apply z-50 h-fit;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-renovateur-footer {
|
.menu-renovateur--footer {
|
||||||
@apply flex justify-between gap-8;
|
@apply grid grid-cols-4;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
.page_icon {
|
.page_icon {
|
||||||
|
|
@ -40,7 +52,7 @@
|
||||||
}
|
}
|
||||||
@apply text-black
|
@apply text-black
|
||||||
flex
|
flex
|
||||||
justify-center
|
justify-start
|
||||||
items-center
|
items-center
|
||||||
font-bold;
|
font-bold;
|
||||||
|
|
||||||
|
|
|
||||||
7
resources/img/graphic-assets/search-icon.svg
Normal file
7
resources/img/graphic-assets/search-icon.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
<svg id="icone-recherche" xmlns="http://www.w3.org/2000/svg" width="16.703" height="16.359" viewBox="0 0 16.703 16.359">
|
||||||
|
<g id="Ellipse_30" data-name="Ellipse 30" fill="none" stroke="#000" stroke-linecap="round" stroke-width="2">
|
||||||
|
<circle cx="6.4" cy="6.4" r="6.4" stroke="none"/>
|
||||||
|
<circle cx="6.4" cy="6.4" r="5.4" fill="none"/>
|
||||||
|
</g>
|
||||||
|
<path id="Tracé_254" data-name="Tracé 254" d="M826.43,42l4.545,4.545" transform="translate(-815.686 -31.6)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="2"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 532 B |
|
|
@ -2,5 +2,5 @@ import menuInit from './header';
|
||||||
console.log('menuInit');
|
console.log('menuInit');
|
||||||
console.log('menuIniteeeee');
|
console.log('menuIniteeeee');
|
||||||
window.addEventListener('load', function () {
|
window.addEventListener('load', function () {
|
||||||
menuInit();
|
menuInit();
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,62 +1,110 @@
|
||||||
export default function menuInit() {
|
export default function menuInit() {
|
||||||
let main_navigation =
|
const header = document.querySelector('#main-header');
|
||||||
document.querySelector('#primary-menu');
|
|
||||||
const header = document.querySelector('#primary-header');
|
|
||||||
const primary_menu =
|
|
||||||
header.querySelector('#primary-menu');
|
|
||||||
const burgerMenuToggle = header.querySelector(
|
|
||||||
'#burger-menu-toggle'
|
|
||||||
);
|
|
||||||
const submenuToggles = primary_menu.querySelectorAll(
|
|
||||||
'.menu-item-submenu-toggle'
|
|
||||||
);
|
|
||||||
|
|
||||||
// #### Open/close burger nav
|
// Search module
|
||||||
burgerMenuToggle.addEventListener('click', function (e) {
|
searchModule = header.querySelector('.search-module');
|
||||||
e.preventDefault();
|
const searchModuleToggle = header.querySelector('#search-module-toggle');
|
||||||
header.classList.toggle('nav-open');
|
|
||||||
burgerMenuToggle.toggleAttribute('aria-expanded');
|
// Submenus
|
||||||
gsap.from(primary_menu, {
|
const submenuToggles = header.querySelectorAll('.menu-item-submenu-toggle');
|
||||||
opacity: 20,
|
const submenusItems = header.querySelectorAll('.sub-menu');
|
||||||
y: '-100vh',
|
|
||||||
duration: 0.5,
|
function isSubmenuOpen() {
|
||||||
ease: Power4.easeOut,
|
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');
|
||||||
|
}
|
||||||
|
function closeSubmenus() {
|
||||||
|
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);
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function isSearchOpen() {
|
||||||
|
return searchModule.getAttribute('aria-hidden') === 'true';
|
||||||
|
}
|
||||||
|
function openSearch() {
|
||||||
|
searchModule.classList.remove('search-module-open');
|
||||||
|
searchModule.classList.add('search-module-closed');
|
||||||
|
setTimeout(() => {
|
||||||
|
searchModule.setAttribute('aria-hidden', 'true');
|
||||||
|
}, 400);
|
||||||
|
}
|
||||||
|
function closeSearch() {
|
||||||
|
searchModule.setAttribute('aria-hidden', 'false');
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
searchModule.classList.remove('search-module-closed');
|
||||||
|
searchModule.classList.add('search-module-open');
|
||||||
|
}, 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();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// MENU IS CLOSED --> OPEN IT
|
||||||
|
if (!isSearchOpen()) {
|
||||||
|
openSearch();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// SEARCH TOGGLE open/close
|
||||||
|
submenuToggles.forEach((button) => {
|
||||||
|
button.addEventListener('click', () => openSubmenu(button));
|
||||||
|
});
|
||||||
|
|
||||||
|
// #### 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
|
// #### 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();
|
// document.addEventListener(
|
||||||
}
|
// 'focusin',
|
||||||
},
|
// (e) => {
|
||||||
true
|
// 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);
|
||||||
|
|
||||||
submenuToggles.forEach((button) => {
|
// burgerMenuToggle.focus();
|
||||||
button.addEventListener('click', function (e) {
|
// }
|
||||||
let isExpanded =
|
// },
|
||||||
button.getAttribute('aria-expanded') === 'true';
|
// true
|
||||||
button.setAttribute('aria-expanded', !isExpanded);
|
// );
|
||||||
|
|
||||||
button.parentElement
|
|
||||||
.querySelector('.sub-menu')
|
|
||||||
.classList.toggle('sub-menu-open');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
20
search.php
Normal file
20
search.php
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
<?php get_header(); ?>
|
||||||
|
|
||||||
|
<div class="container mx-auto my-8">
|
||||||
|
|
||||||
|
<?php if (have_posts()) : ?>
|
||||||
|
<?php
|
||||||
|
while (have_posts()) :
|
||||||
|
the_post();
|
||||||
|
?>
|
||||||
|
|
||||||
|
<?php get_template_part('template-components/content', get_post_format()); ?>
|
||||||
|
|
||||||
|
<?php endwhile; ?>
|
||||||
|
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
get_footer();
|
||||||
14
searchform.php
Normal file
14
searchform.php
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
<form action="/" method="get" class="search-module__search-form">
|
||||||
|
<label class="search-module__search-form__title" for="search"><?php echo __('Vous cherchez quelque chose en particulier ?', 'homegrade-theme-texte-fonctionnel') ?></label>
|
||||||
|
<hr class="search-module__search-form__separator separator">
|
||||||
|
<!-- <label class="search-module__label" for="search">Rechercher</label> -->
|
||||||
|
|
||||||
|
<input class="search-module__search-form__input" type="text" name="s" id="search" value="<?php the_search_query(); ?>" placeholder="<?php echo __('Rechercher dans le site. Taper vos mots-clés ici', 'homegrade-theme-texte-fonctionnel') ?>" />
|
||||||
|
<!-- <input class="search-module__search-form__submit" type="image" alt="Search" src="<?php get_template_directory_uri() . "/resources/img/search-icon.svg" ?>" /> -->
|
||||||
|
|
||||||
|
|
||||||
|
<button type="submit">
|
||||||
|
<span>Rechercher</span>
|
||||||
|
<img class="search_icon" src='<?php echo get_template_directory_uri() ?>/resources/img/graphic-assets/search-icon.svg' alt=''>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
.swiper-content {
|
.swiper-content {
|
||||||
@apply px-24 relative max-w-screen-2xl;
|
@apply px-24 relative max-w-screen-2xl mx-auto;
|
||||||
|
/* @apply bg-fuchsia-100; */
|
||||||
}
|
}
|
||||||
.swiper-container {
|
.swiper-container {
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
@ -11,6 +12,10 @@
|
||||||
@apply pt-24 pb-16 w-full;
|
@apply pt-24 pb-16 w-full;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.swiper-slide .card-thematique {
|
||||||
|
@apply h-full;
|
||||||
|
}
|
||||||
|
|
||||||
.thematique-button-next,
|
.thematique-button-next,
|
||||||
.thematique-button-prev {
|
.thematique-button-prev {
|
||||||
@apply absolute top-1/2 z-50 opacity-80;
|
@apply absolute top-1/2 z-50 opacity-80;
|
||||||
|
|
|
||||||
|
|
@ -73,27 +73,5 @@ $terms = get_terms(array(
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- <div class="thematiques-container">
|
|
||||||
<?php foreach ($terms as $term) : ?>
|
|
||||||
<?php
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
get_template_part(
|
|
||||||
'template-components/card-thematique',
|
|
||||||
null,
|
|
||||||
array(
|
|
||||||
'thematique' => $term,
|
|
||||||
'post_ID' => $post_datas->ID,
|
|
||||||
'post_title' => $post_datas->post_title,
|
|
||||||
'post_excerpt' => $post_datas->post_excerpt,
|
|
||||||
)
|
|
||||||
);
|
|
||||||
?>
|
|
||||||
|
|
||||||
<?php endforeach; ?>
|
|
||||||
|
|
||||||
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
26
template-components/header/menu-homegrade.php
Normal file
26
template-components/header/menu-homegrade.php
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
?>
|
||||||
|
|
||||||
|
<nav class="menu-homegrade menu-homegrade--header">
|
||||||
|
<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
|
||||||
|
wp_nav_menu(
|
||||||
|
array(
|
||||||
|
'container' => 'false',
|
||||||
|
'theme_location' => 'homegrade',
|
||||||
|
'li_class' => 'menu-navlink',
|
||||||
|
'fallback_cb' => false,
|
||||||
|
'menu_class' => 'menu-homegrade-header menu-homegrade__navlist',
|
||||||
|
'menu_id' => 'menu-homegrade-navlist',
|
||||||
|
|
||||||
|
)
|
||||||
|
); ?>
|
||||||
|
</nav>
|
||||||
45
template-components/header/menu-renovateur.php
Normal file
45
template-components/header/menu-renovateur.php
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
?>
|
||||||
|
<div class="menu-renovateur">
|
||||||
|
|
||||||
|
<div class="website_logo">
|
||||||
|
<?php if (has_custom_logo()) { ?>
|
||||||
|
<?php the_custom_logo(); ?>
|
||||||
|
<?php } else { ?>
|
||||||
|
<a href=" <?php echo get_bloginfo('url'); ?>" class="font-extrabold text-lg uppercase">
|
||||||
|
<?php echo get_bloginfo('name'); ?>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<p class="text-sm font-light text-gray-600">
|
||||||
|
<?php echo get_bloginfo('description'); ?>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<?php } ?>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
wp_nav_menu(
|
||||||
|
array(
|
||||||
|
'container' => 'false',
|
||||||
|
'theme_location' => 'renovateur',
|
||||||
|
'li_class' => 'menu-navlink',
|
||||||
|
'fallback_cb' => false,
|
||||||
|
'menu_class' => "menu-renovateur__navlist",
|
||||||
|
)
|
||||||
|
); ?>
|
||||||
|
|
||||||
|
<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 -->
|
||||||
|
<?php get_template_part('template-components/header/search-module'); ?>
|
||||||
|
</div>
|
||||||
29
template-components/header/search-module.php
Normal file
29
template-components/header/search-module.php
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
?>
|
||||||
|
|
||||||
|
<div class="search-module search-module-closed" aria-hidden="true">
|
||||||
|
<div class="search-module__wrapper-container">
|
||||||
|
<?php get_search_form(); ?>
|
||||||
|
<div class="search-module__suggestions">
|
||||||
|
<h6>Suggestions :</h6>
|
||||||
|
<?php
|
||||||
|
$args = array(
|
||||||
|
'post_type' => 'conseils',
|
||||||
|
'posts_per_page' => 3,
|
||||||
|
'orderby' => 'rand',
|
||||||
|
|
||||||
|
);
|
||||||
|
$suggestions_posts = get_posts($args);
|
||||||
|
?>
|
||||||
|
<ul class="search-module__suggestions__navlist">
|
||||||
|
<?php foreach ($suggestions_posts as $post) : ?>
|
||||||
|
<li class="suggestion-item">
|
||||||
|
<a href="<?php echo get_the_permalink($post->ID) ?>"><?php echo $post->post_title ?></a>
|
||||||
|
</li>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
Loading…
Reference in New Issue
Block a user