import {
  onActivated,
  onMounted,
  onDeactivated,
  onBeforeUnmount,
  ref
} from 'vue'
import { onBeforeRouteLeave } from 'vue-router'

export const useActive = () => {
  const active = ref(true)

  onMounted(() => (active.value = true))
  onActivated(() => (active.value = true))
  onBeforeRouteLeave(() => {
    active.value = false
  })
  onDeactivated(() => (active.value = false))
  onBeforeUnmount(() => (active.value = false))

  return active
}
