import DesktopSidebar from './DesktopSidebar.jsx'
import MobileSidebar from './MobileSidebar'
import { useState, useEffect } from 'react'

function Sidebar() {
	const [minimized, setMinimized] = useState(window.innerWidth < 1300)
	const [isMobile, setIsMobile] = useState(window.innerWidth < 768)

	useEffect(() => {
		const handleResize = () => {
			setMinimized(window.innerWidth < 1300)
			setIsMobile(window.innerWidth < 768)
		}
		window.addEventListener('resize', handleResize)
		return () => window.removeEventListener('resize', handleResize)
	}, [])

	return (
		<>
			{isMobile ? (
				<MobileSidebar minimized={minimized} />
			) : (
				<DesktopSidebar minimized={minimized} />
			)}
		</>
	)
}

export default Sidebar
