import useActive from './useActive'
import SidebarComponent from '../components/elements/Sidebar/Sidebar'
import { useEffect } from 'react'

const useSidebar = () => {
  const { active, activate, deactivate } = useActive()

  useEffect(() => {
    if (active) {
      document.querySelector('html, body').classList.add('overflow-hidden')
    } else {
      document.querySelector('html, body').classList.remove('overflow-hidden')
    }
  }, [active])

  return {
    open: activate,
    Sidebar: <SidebarComponent active={active} close={deactivate} />
  }
}

export default useSidebar