import { onMounted, onUnmounted } from 'vue'
import { debounce } from 'lodash-es'
const breakpointMap: any = {
  xl: 1200
}
export default function(breakpoint: string, emit: any){
  const resize = debounce(() => {
    const width = document.body.clientWidth;
    if(width <= breakpointMap[breakpoint]){
      emit("toggleCollapsed", true, 'resize');
    }else{
      emit("toggleCollapsed", false, 'resize');
    }
  }, 10)
  onMounted(() => {
    // resize()
    window.addEventListener('resize', resize)
  })
  onUnmounted(() => {
    window.removeEventListener('resize', resize)
  })
}