reactjs - 制作带有自定义反应钩子的可折叠侧边栏图标

Question

import React, { useState } from 'react';

const useSideBar = () => {
const [sideBarSize, setSideBarSize] = useState("min");
const handleToggle = () => {
    if (window.innerWidth > 50) {
        setSideBarSize("max");
    } else window.innerWidth < 50;
    setSideBarSize("min");
};

return (
    <div className={sideBarSize ? "bo-sidebar active" : "bo-sidebar"}>
        <Sidebar />
        <button
            class="btn btn-primary"
            id="menu-toggle"
            onClick={() => handleToggle()}
        >
        Toggle Menu
      </button>
    </div>
)
}

export default useSideBar; 

我的任务是根据屏幕尺寸创建一个可折叠的侧边栏，从而单独显示侧边栏图标，因为正常宽度是 250 像素。到目前为止，这是我已经取得的成就，但我还没有得到它。而且我仍然需要在侧边栏组件中调用这个组件

请有人帮忙

标签： reactjsreact-hooks