some stuff i tried. but it cant detect autocollapse.

const AppSidebar = ({submitLogout}) => {
  const dispatch = useDispatch()
  const unfoldable = useSelector((state) => state.sidebarUnfoldable)
  const sidebarShow = useSelector((state) => state.sidebarShow)
  const [sidebarExpand, setSidebarExpand] = useState(true);


  useEffect(() => {
    console.log("sidebarExpand:" + sidebarExpand);
  }, [sidebarExpand]);

  useEffect(() => {
    console.log("sidebarShow:" + sidebarShow);
  }, [sidebarShow]);

  useEffect(() => {
    const checkSidebarStatus = () => {
      if (window.innerWidth < 992) {
        setSidebarExpand(false);
        console.log('sidebar collapsed');
      } else {
        setSidebarExpand(true);
        console.log('sidebar expanded');
      }
    };
  
    window.addEventListener('resize', checkSidebarStatus);
  
    // Clean-up function
    return () => {
      window.removeEventListener('resize', checkSidebarStatus);
    };
  }, []);  

  const handleLogout = () => {
    console.log("XXX handleLogout");
    submitLogout();
    //navigate("/logout");
  }

  return (
    <CSidebar
      className="border-end"
      colorScheme="dark"
      position="fixed"
      unfoldable={unfoldable}
      visible={sidebarShow}
      onVisibleChange={(visible) => {
        console.log("sidebar visible:" + visible);
        dispatch({ type: 'set', sidebarShow: visible })
      }}
    >
      <CSidebarHeader className="border-bottom d-flex align-items-center">
        <div>
        <img src={logo} alt="logo" height="40" width="40" /> HS-WIM
        <CCloseButton
          className="d-lg-none"
          dark
          onClick={() => {
            dispatch({ type: 'set', sidebarShow: false });
        }}
        />
        </div>
      </CSidebarHeader>
      <AppSidebarNav items={navigation()} />

      <CSidebarFooter style={{ cursor: 'pointer' }}>               

            <CIcon icon={cilAccountLogout} height={20} onClick={handleLogout}/>      
            <div onClick={handleLogout} style={{fontSize: 15 }}> Logout</div>  


        <CSidebarToggler
          onClick={() => {
            dispatch({ type: 'set', sidebarUnfoldable: !unfoldable });
            setSidebarExpand(!sidebarExpand);
          }}
        />        
      </CSidebarFooter>


    </CSidebar>
  )
}