YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: update responsible layout (#1306)

Browse Source 
* feat: update responsible layout

* chore: update
This commit is contained in:
boojack
2023-03-08 09:00:10 +08:00
committed by GitHub
parent 65850dfd03
commit 483c1d5782
16 changed files with 349 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
web/src/components/HomeSidebar.tsx
View File

@ -1,15 +1,44 @@
import { isUndefined } from "lodash-es";
import { useEffect } from "react";
import { resolution } from "../utils/layout";
import { useLayoutStore } from "../store/module";
import ShortcutList from "./ShortcutList";
import TagList from "./TagList";
import SearchBar from "./SearchBar";
import UsageHeatMap from "./UsageHeatMap";
import "../less/home-sidebar.less";
const HomeSidebar = () => {
const layoutStore = useLayoutStore();
const showHomeSidebar = layoutStore.state.showHomeSidebar;
useEffect(() => {
const handleWindowResize = () => {
if (window.innerWidth < resolution.sm) {
layoutStore.setHomeSidebarStatus(false);
} else {
layoutStore.setHomeSidebarStatus(true);
}
};
window.addEventListener("resize", handleWindowResize);
handleWindowResize();
}, []);
return (
<>
<div className="mask" onClick={() => toggleHomeSidebar(false)}></div>
<aside className="home-sidebar-wrapper">
<div
className={`fixed sm:sticky top-0 left-0 w-full sm:w-56 h-full flex-shrink-0 pointer-events-none sm:pointer-events-auto z-10 ${
showHomeSidebar && "pointer-events-auto"
}`}
>
<div
className={`fixed top-0 left-0 w-full h-full bg-black opacity-0 pointer-events-none transition-opacity duration-300 sm:!hidden ${
showHomeSidebar && "opacity-60 pointer-events-auto"
}`}
onClick={() => layoutStore.setHomeSidebarStatus(false)}
></div>
<aside
className={`absolute sm:relative top-0 right-0 w-56 pr-2 sm:w-full h-full max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4 z-30 bg-white dark:bg-zinc-800 sm:bg-transparent sm:shadow-none transition-all duration-300 translate-x-full sm:translate-x-0 ${
showHomeSidebar && "!translate-x-0 shadow-2xl"
}`}
>
<div className="pl-6 pr-4 mb-4 w-full">
<SearchBar />
</div>
@ -17,29 +46,8 @@ const HomeSidebar = () => {
<ShortcutList />
<TagList />
</aside>
</>
</div>
);
};
export const toggleHomeSidebar = (show?: boolean) => {
const sidebarEl = document.body.querySelector(".home-sidebar-wrapper") as HTMLDivElement;
const maskEl = sidebarEl.previousSibling as HTMLDivElement;
if (isUndefined(show)) {
show = !sidebarEl.classList.contains("show");
}
if (show) {
sidebarEl.classList.add("show");
maskEl.classList.add("show");
// auto focus search bar when sidebar is shown
const inputEl = sidebarEl.querySelector("#mobile-search-bar") as HTMLInputElement;
inputEl?.focus();
} else {
sidebarEl.classList.remove("show");
maskEl.classList.remove("show");
}
};
export default HomeSidebar;