REFACTOR Deleted useless code in duplicate nav
This commit is contained in:
parent
6ff8ced567
commit
12bcdd9eb3
|
|
@ -1,271 +1,10 @@
|
||||||
.primary-menu-container {
|
.primary-menu-container {
|
||||||
@apply mx-auto
|
|
||||||
|
|
||||||
text-white
|
|
||||||
relative
|
|
||||||
h-fit
|
|
||||||
py-8
|
|
||||||
px-8
|
|
||||||
2xl:px-32
|
|
||||||
my-0;
|
|
||||||
|
|
||||||
nav#primary-menu-nav {
|
|
||||||
@apply max-w-screen-2xl w-full mx-auto;
|
|
||||||
}
|
|
||||||
.logo {
|
|
||||||
@apply mr-12
|
|
||||||
w-[190px]
|
|
||||||
xl:w-[222px];
|
|
||||||
}
|
|
||||||
#primary-menu {
|
#primary-menu {
|
||||||
@apply flex
|
|
||||||
flex-col
|
|
||||||
lg:flex-row
|
|
||||||
items-center
|
|
||||||
justify-around
|
|
||||||
lg:justify-between;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
@apply lg:flex
|
|
||||||
gap-x-2
|
|
||||||
lg:gap-x-4
|
|
||||||
xl:gap-x-8
|
|
||||||
pr-0
|
|
||||||
lg:pr-4
|
|
||||||
xl:pr-24;
|
|
||||||
}
|
|
||||||
|
|
||||||
li.menu-item:has(.page_icon) {
|
li.menu-item:has(.page_icon) {
|
||||||
@apply flex flex-col items-center justify-center gap-3;
|
@apply flex flex-row items-center justify-center gap-2;
|
||||||
.page_icon {
|
.page_icon {
|
||||||
@apply w-12 h-12 object-contain;
|
@apply w-7 h-7 object-contain;
|
||||||
}
|
|
||||||
}
|
|
||||||
/* 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-sm
|
|
||||||
text-center;
|
|
||||||
|
|
||||||
&:hover > a,
|
|
||||||
a:focus {
|
|
||||||
@apply cursor-pointer
|
|
||||||
underline
|
|
||||||
underline-offset-8
|
|
||||||
!text-white;
|
|
||||||
}
|
|
||||||
a:focus {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* IF SUBMENU CHILD */
|
|
||||||
.menu-item-submenu-toggle {
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
@apply !text-white;
|
|
||||||
}
|
|
||||||
@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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
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 */;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user