In Vue 3, using PrimeVue, is there a way to change the hamburger menu button to a X when clicked?

Question

With the Menubar component, the hamburger menu is automatically displayed when shrinking the browser window. However, upon clicking that button, I want to change the icon from pi-bars to pi-times. Is there a way to do this?

I'm not even sure how to access the button within the code. The example at https://www.primefaces.org/primevue/#/menubar doesn't explain it either.

Answer 1

One way to do this is with CSS. The menu gets the .p-menubar-mobile-active class applied when the mobile-mode menu is open, and the icon (<i>) is a descendant of the .p-menubar-button. Change the icon's ::before content to \e90b, which is the character code for pi-times:

<style>
.p-menubar.p-menubar-mobile-active .p-menubar-button i::before {
  content: "\e90b"; /* pi-times icon */
}
</style>

demo