Есть блок с боковым меню. В нем есть блок со стрелкой, при нажатии на которую блок перемещается заданным позициям. На БОЛЬШОМ экране все работает нормально, но на МАЛЕНЬКОМ, при нажатии на блок со стрелкой первый раз ничего не происходит, а при повторных нажатиях начинает нормально работать. Не могу понять как устранить дабл клик, что все работало с первого нажатия.
const aside = document.querySelector('.aside');
const actionArrow = document.querySelector('.action-arrow');
let isOpen = false;
let rotation = 0;
const width = window.innerWidth;
if (width < 1080) {
actionArrow.style.transform = `rotateY(180deg)`
aside.style.left = "-336px";
} else {
aside.style.left = "0";
}
actionArrow.addEventListener('click', () => {
isOpen = !isOpen;
rotation += 180;
if (isOpen) {
aside.style.left = "-336px";
aside.style.transition = `left 0.5s ease-in-out`;
actionArrow.style.transform = `rotateY(${rotation}deg)`
} else {
aside.style.left = "0";
aside.style.transition = `left 0.5s ease-in-out`;
actionArrow.style.transform = `rotateY(0)`
}
});
window.addEventListener('resize', () => {
const width = window.innerWidth;
if (width < 1080) {
aside.style.left = "-336px";
actionArrow.style.transform = `rotateY(180deg)`
} else {
aside.style.left = "0";
actionArrow.style.transform = `rotateY(0deg)`
}
});
.aside {
position: fixed;
left: 0;
width: 348px;
height: 100dvh;
color: #000000;
background-color: #4a90d9;
display: flex;
flex-direction: column;
align-items: center;
@media (max-width: 1080px) {
left: -336px;
}
}
.aside .wrapper {
position: relative;
width: 348px;
height: 100dvh;
box-sizing: border-box;
padding: 0 16px;
}
.aside .wrapper .action-arrow {
position: absolute;
top: 50dvh;
left: 339px;
width: 12px;
height: 22px;
background-color: #4a90d9;
border: solid 2px #eff2f7;
outline: none;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
cursor: pointer;
z-index: 999;
}
.aside .wrapper .action-arrow span {
color: #000000;
display: flex;
justify-content: center;
align-items: center;
}
<div class="aside">
<div class="wrapper">
<div class="action-arrow">
<span class="material-symbols-outlined">></span>
</div>
</div>
</div>