<div class="flex justify-center">
    <div x-data="{
            open: false,
            toggle() {
                if (this.open) {
                    return this.close()
                }
 
                this.$refs.button.focus()
 
                this.open = true
            },
            close(focusAfter) {
                if (! this.open) return
 
                this.open = false
 
                focusAfter && focusAfter.focus()
            }
        }" x-on:keydown.escape.prevent.stop="close($refs.button)" x-on:focusin.window="! $refs.panel.contains($event.target) && close()" x-id="['dropdown-button']" class="relative">
        <!-- Button -->
        <button x-ref="button" x-on:click="toggle()" :aria-expanded="open" :aria-controls="$id('dropdown-button')" type="button" class="flex inline-flex items-center rounded-xl border border-gray-50 bg-white p-2 text-sm font-medium leading-4 text-gray-500 shadow-sm focus:outline-none">
            <div class="px-2"><img src="<?php print __HPO_CONNECTOR_IMAGE_DIR__; ?>/bars.png" style="height:15px;" alt="menu_icon" /></div>
            <div><img src="<?php print __HPO_CONNECTOR_IMAGE_DIR__; ?>/menu_icon.jpg" style="height:25px;" alt="menu_logo" /></div>
        </button>

        <!-- Panel -->
        <div x-ref="panel" x-show="open" x-transition.origin.top.left x-on:click.outside="close($refs.button)" :id="$id('dropdown-button')" style="display: none;" class="absolute -left-1/2 mt-2 w-40 rounded-md bg-white shadow-md">
            <a href="<?php print __PLATFORM_URL__; ?>/profile" target="_blank" class="flex items-center gap-2 w-full first-of-type:rounded-t-md font-medium last-of-type:rounded-b-md px-4 py-2.5 text-left text-md hover:bg-gray-50 text-black ">
                Profilo
            </a>

            <!--
            <a href="<?php print __PLATFORM_URL__; ?>/chatify" target="_blank" class="flex items-center gap-2 w-full first-of-type:rounded-t-md last-of-type:rounded-b-md px-4 py-2.5 text-md font-medium text-black text-left hover:bg-gray-50 ">
                Messaggi
            </a>

            <a href="<?php print __PLATFORM_URL__; ?>/profile/send-request-partnership" target="_blank" class="flex items-center gap-2 w-full first-of-type:rounded-t-md last-of-type:rounded-b-md px-4 py-2.5 text-md font-medium text-black text-left hover:bg-gray-50 ">
                Collaborazioni
            </a>

            <a href="<?php print __PLATFORM_URL__; ?>/profile-change-password" target="_blank" class="flex items-center gap-2 w-full first-of-type:rounded-t-md last-of-type:rounded-b-md px-4 py-2.5 text-left text-md font-medium text-black hover:bg-gray-50 ">
                Cambio Password
            </a>
            -->

            <a href="<?php print __PLATFORM_URL__; ?>/api/v1/logout" class="flex items-center gap-2 w-full first-of-type:rounded-t-md last-of-type:rounded-b-md px-4 py-2.5 text-left text-md font-medium text-black hover:bg-gray-50 ">
                Esci
            </a>
        </div>
    </div>
</div>