[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"

<ul
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
@click.away="closeProfileMenu". // <--- THIS ONE
@keydown.escape="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!

[adrelliott]

Ah balls - clearly didn't do the correct markup to get the code to format properly.

Here's a gist.

Oh, and don't forget to the same for the notification menu.

[edxzh]

Thanks so much @adrelliott , the profile & notification menu works on Alpine 2.x.x but not 3.x.x, and your solution works for me 👍

[adrelliott]

Sorry for horrible formatting. I didn't know how to format code on GitHub.