chore: update window resize listener (#1535)

This commit is contained in:
boojack 2023-04-16 10:00:49 +08:00 committed by GitHub
parent 7d6934d00c
commit 541fd9c044
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 9 deletions

View File

@ -1,27 +1,34 @@
import { useEffect } from "react"; import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { resolution } from "../utils/layout"; import { resolution } from "../utils/layout";
import { useLayoutStore } from "../store/module"; import { useLayoutStore, useUserStore } from "../store/module";
import ShortcutList from "./ShortcutList"; import ShortcutList from "./ShortcutList";
import TagList from "./TagList"; import TagList from "./TagList";
import SearchBar from "./SearchBar"; import SearchBar from "./SearchBar";
import UsageHeatMap from "./UsageHeatMap"; import UsageHeatMap from "./UsageHeatMap";
import { useLocation } from "react-router-dom";
const HomeSidebar = () => { const HomeSidebar = () => {
const location = useLocation(); const location = useLocation();
const layoutStore = useLayoutStore(); const layoutStore = useLayoutStore();
const userStore = useUserStore();
const showHomeSidebar = layoutStore.state.showHomeSidebar; const showHomeSidebar = layoutStore.state.showHomeSidebar;
useEffect(() => { useEffect(() => {
let lastStatus = layoutStore.state.showHomeSidebar;
const handleWindowResize = () => { const handleWindowResize = () => {
if (window.innerWidth < resolution.md) { const nextStatus = window.innerWidth < resolution.md;
layoutStore.setHomeSidebarStatus(false); if (lastStatus !== nextStatus) {
} else { layoutStore.setHomeSidebarStatus(nextStatus);
layoutStore.setHomeSidebarStatus(true); lastStatus = nextStatus;
} }
}; };
window.addEventListener("resize", handleWindowResize); window.addEventListener("resize", handleWindowResize);
handleWindowResize(); handleWindowResize();
return () => {
window.removeEventListener("resize", handleWindowResize);
};
}, [location]); }, [location]);
return ( return (
@ -45,8 +52,12 @@ const HomeSidebar = () => {
<SearchBar /> <SearchBar />
</div> </div>
<UsageHeatMap /> <UsageHeatMap />
<ShortcutList /> {!userStore.isVisitorMode() && (
<TagList /> <>
<ShortcutList />
<TagList />
</>
)}
</aside> </aside>
</div> </div>
); );

View File

@ -40,7 +40,7 @@ function Home() {
</div> </div>
<MemoList /> <MemoList />
</div> </div>
{!userStore.isVisitorMode() && <HomeSidebar />} <HomeSidebar />
</div> </div>
); );
} }