I am currently working on a button with a logo displayed. The hover functionality is working fine, but I want the icon to change to a hamburger when the menu is opened and stay that way. Is there an option in v-menu that checks if the menu is open or should I create my own function to track this?
Here is the code snippet:
<v-menu bottom offset-y attach="#mainMenuButton">
<template #activator="{ on, attrs }">
<div v-bind="attrs" v-on="on" id="mainMenuButton">
<main-menu-div>
<template v-slot:element>
<v-hover v-slot="{ hover }">
<div class="d-flex justify-center align-center">
<v-icon v-if="hover" size="14" color="white">{{ "$hamburgerMenu" }}</v-icon>
<v-icon v-else size="16" color="white">{{ "$mainLogo" }}</v-icon>
</div>
</v-hover>
</template>
</main-menu-div>
</div>
</template>
<v-card class="m-main-menu-panel d-flex flex-row">
<div class="column" v-for="(column, idx) in mainMenuColumns" :key="'main-menu-column-' + idx">
<div v-for="(section, index) in column" :key="'section-' + index" class="d-flex flex-column">
<span class="d-flex align-center mb-2">
{{ $t(title) }}
</span>
</div>
</div>
</v-card>
</v-menu>
Any insights on how to achieve this would be greatly appreciated. Thank you!