js/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost synced 2025-03-28 21:13:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: toggle sidebar when users click outside the sidebar on mobile

Browse Source
This commit is contained in:
savvy-bit 2025-03-20 15:00:10 -07:00
parent 89b31b9ff8
commit fe0a80fae5
1 changed files with 18 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
apps/client/src/components/layouts/global/global-app-shell.tsx
View File

@ -14,6 +14,7 @@ import { AppHeader } from "@/components/layouts/global/app-header.tsx";
import Aside from "@/components/layouts/global/aside.tsx";
import classes from "./app-shell.module.css";
import { useTrialEndAction } from "@/ee/hooks/use-trial-end-action.tsx";
import { useToggleSidebar } from "./hooks/hooks/use-toggle-sidebar";
export default function GlobalAppShell({
children,
@ -22,12 +23,29 @@ export default function GlobalAppShell({
}) {
useTrialEndAction();
const [mobileOpened] = useAtom(mobileSidebarAtom);
const toggleMobile = useToggleSidebar(mobileSidebarAtom);
const [desktopOpened] = useAtom(desktopSidebarAtom);
const [{ isAsideOpen }] = useAtom(asideStateAtom);
const [sidebarWidth, setSidebarWidth] = useAtom(sidebarWidthAtom);
const [isResizing, setIsResizing] = useState(false);
const sidebarRef = useRef(null);
const handleOutSideClick = (event: MouseEvent) => {
if (mobileOpened && !sidebarRef.current.contains(event.target)) {
event.stopPropagation();
toggleMobile();
}
}
useEffect(() => {
document.addEventListener("mousedown", handleOutSideClick);
return () => {
document.removeEventListener("mousedown", handleOutSideClick);
};
}, [mobileOpened]);
const startResizing = React.useCallback((mouseDownEvent) => {
mouseDownEvent.preventDefault();
setIsResizing(true);