[SOLVED] Profile & Notification menu don't work

[adrelliott]

I am a back end developer and JS makes my head hurt.

However, after a few hours of mucking about trying to get the menus to toggle visible:invisible, I realised that the issue was which element the @click.away method was on.

TL;DR: Move the @click.away() method up to the as in the code below

MOVE THE LINE @click.away="closeProfileMenu"

TO THE '<button> ELEMENT ABOVE <template> HERE:

<button class="align-middle rounded-full focus:shadow-outline-purple focus:outline-none" @click="toggleProfileMenu" @click.away="closeProfileMenu". // <--- PUT IT HERE @keydown.escape="closeProfileMenu" aria-label="Account" aria-haspopup="true">

Oh, and it seems that Alpine now calls @click.away @click.outside.

Hope that saves someone else hours of scratching their heads!