tethys.backend/resources/js/Components/NavBarMenu.vue

<script setup>
import { StyleService } from '@/Stores/style';
import { computed, ref, onMounted, onBeforeUnmount } from 'vue';
import { mdiChevronUp, mdiChevronDown } from '@mdi/js';
import NavBarItem from '@/Components/NavBarItem.vue';
import BaseIcon from '@/Components/BaseIcon.vue';

const styleStore = StyleService();

const isDropdownActive = ref(false);

const toggleDropdownIcon = computed(() => (isDropdownActive.value ? mdiChevronUp : mdiChevronDown));

const toggle = () => {
    isDropdownActive.value = !isDropdownActive.value;
};

const root = ref(null);

const forceClose = (event) => {
    if (!root.value.$el.contains(event.target)) {
        isDropdownActive.value = false;
    }
};

onMounted(() => {
    window.addEventListener('click', forceClose);
});

onBeforeUnmount(() => {
    window.removeEventListener('click', forceClose);
});
</script>

<template>
    <NavBarItem ref="root" type="block" :active="isDropdownActive" dropdown @click="toggle">
        <a
            class="flex items-center py-2 px-3 dark:bg-slate-800 lg:bg-transparent lg:dark:bg-transparent"
            :class="styleStore.navBarMenuListUpperLabelStyle"
        >
            <slot />
            <BaseIcon :path="toggleDropdownIcon" class="hidden lg:inline-flex transition-colors" />
        </a>
        <div
            class="-mx-px text-sm border-b border-gray-100 lg:border lg:bg-white lg:absolute lg:top-full lg:left-0 lg:min-w-full lg:z-20 lg:rounded-b lg:dark:bg-slate-800 dark:border-slate-700"
            :class="{ 'lg:hidden': !isDropdownActive }"
        >
            <slot name="dropdown" />
        </div>
    </NavBarItem>
</template>