use-is-collapsed.tsx 788 B

1234567891011121314151617181920212223242526272829
  1. import { useEffect } from 'react'
  2. import useLocalStorage from './use-local-storage'
  3. export default function useIsCollapsed() {
  4. const [isCollapsed, setIsCollapsed] = useLocalStorage({
  5. key: 'collapsed-sidebar',
  6. defaultValue: false,
  7. })
  8. useEffect(() => {
  9. const handleResize = () => {
  10. // Update isCollapsed based on window.innerWidth
  11. setIsCollapsed(window.innerWidth < 768 ? false : isCollapsed)
  12. }
  13. // Initial setup
  14. handleResize()
  15. // Add event listener for window resize
  16. window.addEventListener('resize', handleResize)
  17. // Cleanup event listener on component unmount
  18. return () => {
  19. window.removeEventListener('resize', handleResize)
  20. }
  21. }, [isCollapsed, setIsCollapsed])
  22. return [isCollapsed, setIsCollapsed] as const
  23. }