Не происходит перемещения блока при нажатии на кнопку

Question

Есть блок с боковым меню. В нем есть блок со стрелкой, при нажатии на которую блок перемещается заданным позициям. На БОЛЬШОМ экране все работает нормально, но на МАЛЕНЬКОМ, при нажатии на блок со стрелкой первый раз ничего не происходит, а при повторных нажатиях начинает нормально работать. Не могу понять как устранить дабл клик, что все работало с первого нажатия.

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>

Answer 1

let isOpen = true;
    let rotation = 0;

    const width = window.innerWidth;
    if (width > 1080) {
        rotation=180;
        isOpen=false;
    }

    function move_block() {
        let actionArrow = document.getElementById('action_arrow');
        let aside = document.getElementById('aside');

        isOpen = !isOpen;
        if (rotation === 180) rotation=0;
        else 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(${rotation}deg)`
        }
    }

@media screen and (max-width: 1080px) {
        #aside {
            left: -336px;
        }
    }
    @media screen and (min-width: 1080px) {
        #aside {
            left: 0;
        }
        #action_arrow {
            transform: rotateY(180deg);
        }
    }
    #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 id="aside">
    <div id="wrapper">
        <div id="action_arrow">
            <span onclick="move_block()" id="material-symbols-outlined">></span>
        </div>
    </div>
</div>

Answer 2

HTML + CSS

Вы конечно можете не считать это решением и захотеть решение через Java Script, но я предпочитаю не усложнять и себе и другим жизнь.

body {
  position: fixed;
  inset: 0;
}

aside.wrapper {
  position: absolute;
  inset: 0 auto 0 0;
  background-color: #4a90d9;
  display: flex;
  width: 0;
  min-width: 10px;
  max-width: 348px;
  transition: 0.8s;
}

aside.wrapper:has(input#toggle-wrapper:checked) {
  width: 100%;
}

label[for="toggle-wrapper"] {
  width: 15px;
  height: 30px;
  position: absolute;
  right: -10px;
  align-self: center;
  background-color: #4a90d9;
  border: 1px solid white;
  border-radius: 50vmax;
  display: grid;
  place-items: center;
}

label[for="toggle-wrapper"]::before {
  content: ">";
  transition: 0.8s;
}

aside.wrapper input#toggle-wrapper:checked+label[for="toggle-wrapper"]::before {
  transform: rotateY(180deg);
}

<body>
  <aside class="wrapper">
    <input id="toggle-wrapper" type="checkbox" hidden>
    <label for="toggle-wrapper"></label>
  </aside>
</body>

Работать будет на экранов любых размеров, а так же коротко и без усилий.

БЛОГ НА HUSL

Не происходит перемещения блока при нажатии на кнопку

Ответы (2 шт):

HTML + CSS