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: remove mobile styles

Browse Source
This commit is contained in:
email
2022-03-11 05:07:04 +08:00
parent b597d40470
commit 8f7445c299
35 changed files with 9 additions and 490 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
web/src/components/Sidebar.tsx
View File

@ -1,7 +1,4 @@
import { useContext, useEffect, useMemo, useRef } from "react";
import appContext from "../stores/appContext";
import { SHOW_SIDERBAR_MOBILE_CLASSNAME } from "../helpers/consts";
import { globalStateService } from "../services";
import { useRef } from "react";
import UserBanner from "./UserBanner";
import ShortcutList from "./ShortcutList";
import TagList from "./TagList";
@ -11,57 +8,8 @@ import "../less/siderbar.less";
interface Props {}
const Sidebar: React.FC<Props> = () => {
const {
locationState,
globalState: { isMobileView, showSiderbarInMobileView },
} = useContext(appContext);
const wrapperElRef = useRef<HTMLElement>(null);
const handleClickOutsideOfWrapper = useMemo(() => {
return (event: MouseEvent) => {
const siderbarShown = globalStateService.getState().showSiderbarInMobileView;
if (!siderbarShown) {
window.removeEventListener("click", handleClickOutsideOfWrapper, {
capture: true,
});
return;
}
if (!wrapperElRef.current?.contains(event.target as Node)) {
if (wrapperElRef.current?.parentNode?.contains(event.target as Node)) {
if (siderbarShown) {
event.stopPropagation();
}
globalStateService.setShowSiderbarInMobileView(false);
window.removeEventListener("click", handleClickOutsideOfWrapper, {
capture: true,
});
}
}
};
}, []);
useEffect(() => {
globalStateService.setShowSiderbarInMobileView(false);
}, [locationState]);
useEffect(() => {
if (showSiderbarInMobileView) {
document.body.classList.add(SHOW_SIDERBAR_MOBILE_CLASSNAME);
} else {
document.body.classList.remove(SHOW_SIDERBAR_MOBILE_CLASSNAME);
}
}, [showSiderbarInMobileView]);
useEffect(() => {
if (isMobileView && showSiderbarInMobileView) {
window.addEventListener("click", handleClickOutsideOfWrapper, {
capture: true,
});
}
}, [isMobileView, showSiderbarInMobileView]);
return (
<aside className="sidebar-wrapper" ref={wrapperElRef}>
<UserBanner />