52 lines
1.1 KiB
Vue
52 lines
1.1 KiB
Vue
<script setup>
|
|
import { computed, defineProps, onBeforeUnmount, ref } from "vue";
|
|
import { globalStore } from "../stores/index.js";
|
|
|
|
const store = globalStore();
|
|
|
|
const props = defineProps({
|
|
rowTitle: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
});
|
|
|
|
const content = ref(null);
|
|
|
|
const isActive = computed(() => {
|
|
return props.rowTitle == store.activeSubMenu;
|
|
});
|
|
|
|
const storeActiveSubMenu = () => {
|
|
window.addEventListener("click", onWindowClick);
|
|
store.setActiveSubMenu(props.rowTitle);
|
|
};
|
|
|
|
// hides submenu when click is detected outside from it
|
|
const onWindowClick = (event) => {
|
|
const form = content.value;
|
|
if (form != null) {
|
|
if (!form.contains(event.target)) {
|
|
store.setActiveSubMenu("");
|
|
store.setMainMenu(false);
|
|
}
|
|
return;
|
|
}
|
|
};
|
|
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener("click", onWindowClick);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="menu-row">
|
|
<h2 :id="rowTitle" @click.stop="storeActiveSubMenu">
|
|
{{ rowTitle }}
|
|
</h2>
|
|
<div v-if="isActive" ref="content" class="menu-row-content">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</template>
|