mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-04 04:57:51 +00:00
9b6830a610
This PR fixes a few UI issues with the sidebar 1. `z-index` issues with sidebar dropdowns 2. Move the event listener to the root of the dropdown container, it allows more consistent behaviour of the trigger, earlier the click on the trigger when the dropdown was open would cause the container to re-render 3. Use `perserve-open` for the status switcher menu item in the profile menu. 4. Use `sessionStorage` instead of `localStorage` to preserve sidebar dropdown info. When opening the dashboard without directly going to a specific route, any previous known item would get expanded even if it's link was not active, this caused issues across tabs too, this fixes it. 5. Use `snakeCaseKeys` instead of `decamelize` we had two packages doing the same thing 6. Update `vueuse` the new version is vue3 only
31 lines
643 B
Vue
31 lines
643 B
Vue
<script setup>
|
|
import { useToggle } from '@vueuse/core';
|
|
import { vOnClickOutside } from '@vueuse/components';
|
|
import { provideDropdownContext } from './provider.js';
|
|
|
|
const emit = defineEmits(['close']);
|
|
const [isOpen, toggle] = useToggle(false);
|
|
|
|
const closeMenu = () => {
|
|
if (isOpen.value) {
|
|
emit('close');
|
|
toggle(false);
|
|
}
|
|
};
|
|
|
|
provideDropdownContext({
|
|
isOpen,
|
|
toggle,
|
|
closeMenu,
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div v-on-click-outside="closeMenu" class="relative space-y-2">
|
|
<slot name="trigger" :is-open :toggle="() => toggle()" />
|
|
<div v-if="isOpen" class="absolute">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</template>
|