مشکل جاوا اسکریپتی

سلام دوستان من یه دکمه دارم که میخوام وقتی منو باز شد بچرخه و وقتی بسته شد برگرده سر حالت اولش
برا اینکار وقتی روش کلیک میشه (که همزمانم منو باز میشه) یه کلاس بهش میدم که رو حالت فوکوس اونو 90 درجه میچرخونه و با کلیک بعدی کلاس رو حذف میکنم
مشکل اینجاست وقتی که منو باز باشه یعنی یه بار روش کلیک کردیم اگه روی خود دکمه کلیک نشه و بیرونش کلیک بشه کلاس حذف نمیشه ولی چون رو حالت فوکوس هست کار نمیکنه (ما هم میخوایم که کار نکنه)
ولی خوب اگه یه بار دیگه رو دکمه کلیک کنییم چون از قبل اون کلاس رو داره حذفش میکنه منو باز میشه ولی دکمه ما نچرخیده
منو با alpinjs باز و بسته میشه
استایل ها tailwindcss هست
حذف و اضافه کردن کلاس به صورت این لاین با جاوا اسکریپت

<header class="bg-white border-b" x-data="{ open: false }">
    <div class="flex items-center justify-between p-4">
        <div>
            <button type="button" @click="open = true" class="block text-gray-900 hover:text-gray-600 focus:text-gray-600 focus:outline-none
                    duration-500 transform" onclick="this.classList.toggle('focus:rotate-90')">
                <svg class="w-10 h-10 fill-current" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1"
                     viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
                     xmlns:xlink="http://www.w3.org/1999/xlink"><path
                        d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/></svg>
            </button>
        </div>
        <div>
            <a href="/">
                <img class="h-20" src="image/logo.png" alt="Malaco logo">
            </a>
        </div>
    </div>
    <div class="px-2 pb-6 text-right" x-show.transition.opacity.duration.500ms="open" @click.away="open = false">
        <a class="text-gray-900 block font-semibold text-xl hover:bg-gray-200 rounded px-2 py-1" href="#">ورود</a>
        <a class="mt-1 text-gray-900 block font-semibold text-xl hover:bg-gray-200 rounded px-2 py-1" href="#">عضویت</a>
        <a class="mt-1 text-gray-900 block font-semibold text-xl hover:bg-gray-200 rounded px-2 py-1" href="#">تماس با
            ما</a>
        <a class="mt-1 text-gray-900 block font-semibold text-xl hover:bg-gray-200 rounded px-2 py-1" href="#">درباره
            ما</a>
        <a class="mt-1 text-gray-900 block font-semibold text-xl hover:bg-gray-200 rounded px-2 py-1" href="#">سوالات
            متداول</a>
    </div>
</header>