<script>
export default {
data() {
return {
userNavigation: [
{ name: 'Your Profile', href: '/profile' },
{ name: 'Settings', href: '/settings' },
{ name: 'Logout', href: '/logout', method: 'post', as: 'button', type: 'button' },
],
isMenuOpen: false, // Toggle for dropdown menu
};
},
methods: {
toggleMenu() {
this.isMenuOpen = !this.isMenuOpen;
},
closeMenu() {
this.isMenuOpen = false;
},
},
};
</script>
<template>
<div class="relative">
<!-- Trigger Button -->
<button @click="toggleMenu" class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md focus:outline-none">
Menu
</button>
<!-- Dropdown Menu -->
<div
v-if="isMenuOpen"
@click.outside="closeMenu"
class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none"
>
<MenuItem v-for="item in userNavigation" :key="item.name" v-slot="{ active }">
<Link
:href="item.href"
:method="item.method"
:as="item.as"
:type="item.type"
:class="[active ? 'bg-gray-100 outline-none' : '', 'block px-4 py-2 text-sm text-gray-700']"
>
{{ item.name }}
</Link>
</MenuItem>
</div>
</div>
</template>
<style>
/* Add custom styles as necessary */
</style>
try this way