Как менять иконку бургер-меню, при клике на ссылку?

Как поменять иконку бургер-меню, при клике на ссылку? У меня есть код, который открывает и закрывает бургер-меню, при нажатии на иконку или на ссылку. Но я не могу менять иконку меню, когда нажимаю на ссылку. Как это можно реализовать?

<!-- mobile header -->
<header
    class="bg-main_light_bg dark:bg-main_dark_bg text-gray-600 body-font md:hidden overflow-x-hidden duration-500">
    <nav x-data="accordion(6)"
        class="rounded-b-xl fixed top-0 z-40 flex flex-wrap items-center justify-between w-full px-4 py-5 tracking-wide shadow-md bg-light_gray/50 dark:bg-dark_gray/60 dark:backdrop-blur-md backdrop-blur-md bg-opacity-90 md:py-8 md:px-8 lg:px-14">
        <a href="#"
            class="flex title-font font-medium items-center text-text_light md:mb-0 dark:text-white/70">
            <img src="#" class="w-9 h-9" alt="logo">
            <span class="ml-3 text-xl cursor-default">Hello</span>
        </a>
        <div @click="handleClick()" x-data="{open : false}"
            class="block text-gray-600 dark:text-white/70 cursor-pointer lg:hidden">
            <!-- вот иконки, которые меняются в зависимости от клика -->
            <button @click="open = ! open" class="w-6 h-6 text-lg">
                <svg x-show="! open" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"
                    :class="{'transition-full each-in-out transform duration-500':! open}">
                    <rect width="48" height="48" fill="white" fill-opacity="0.01"></rect>
                    <path d="M7.94977 11.9498H39.9498" stroke="currentColor" stroke-width="4" stroke-linecap="round"
                        stroke-linejoin="round"></path>
                    <path d="M7.94977 23.9498H39.9498" stroke="currentColor" stroke-width="4" stroke-linecap="round"
                        stroke-linejoin="round"></path>
                    <path d="M7.94977 35.9498H39.9498" stroke="currentColor" stroke-width="4" stroke-linecap="round"
                        stroke-linejoin="round"></path>
                </svg>
                <svg x-show="open" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round" class="feather feather-x">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
            </button>
        </div>
        <div x-ref="tab" :style="handleToggle()"
            class="relative w-full overflow-hidden transition-all duration-500 lg:hidden max-h-0">
            <div class="flex items-center flex-col my-6 text-lg hover:font-b text-gray-600 dark:text-white/70">

                <!-- внизу три ссылки, которые закрывают меню и должны менять иконку -->
                <a @click="handleClick()"href="#main" class="duration-500 hover:text-text_light my-3"><span>Главная</span></a>
                <a @click="handleClick()"href="#what" class="duration-500 hover:text-text_light my-3"><span>О товаре</span></a>
                <a @click="handleClick()"href="#team" class="duration-500 hover:text-text_light my-3"><span>Команда</span></a>
            </div>
        </div>
    </nav>
</header>

ниже скрипт к меню на Alpine JS

<!-- mobile menu -->
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('accordion', {
            tab: 0
        });
        Alpine.data('accordion', (idx) => ({
            init() {
                this.idx = idx;
            },
            idx: -1,
            handleClick() {
                this.$store.accordion.tab = this.$store.accordion.tab === this.idx ? 0 : this.idx;
            },
            handleRotate() {
                return this.$store.accordion.tab === this.idx ? '-rotate-180' : '';
            },
            handleToggle() {
                return this.$store.accordion.tab === this.idx ? `max-height: ${this.$refs.tab.scrollHeight}px` : '';
            }
        }));
    })
</script>