41 lines
1.0 KiB
JavaScript
41 lines
1.0 KiB
JavaScript
import { useSize } from 'ahooks';
|
|
import { useEffect, useState } from 'react';
|
|
import { createContainer } from 'unstated-next';
|
|
|
|
const useGlobalStore = () => {
|
|
const bodySize = useSize(document.querySelector('body'));
|
|
const [isMobile, setIsMobile] = useState(false);
|
|
const [isMenu, setIsMenu] = useState(false);
|
|
const toggleMenu = () => {
|
|
setIsMenu(!isMenu);
|
|
};
|
|
const isScrollLock = isMenu && isMobile;
|
|
useEffect(() => {
|
|
const isMobile = (bodySize?.width || 1200) < 650;
|
|
setIsMobile(isMobile);
|
|
if (!isMobile) {
|
|
setIsMenu(false);
|
|
}
|
|
}, [bodySize]);
|
|
useEffect(() => {
|
|
const bodyDom = document.querySelector('body');
|
|
if (isScrollLock) {
|
|
bodyDom.style.height = '100vh';
|
|
bodyDom.style.overflow = 'hidden';
|
|
} else {
|
|
bodyDom.style.height = 'unset';
|
|
bodyDom.style.overflow = 'scroll';
|
|
}
|
|
}, [isScrollLock]);
|
|
return {
|
|
bodySize,
|
|
isMobile,
|
|
isMenu, toggleMenu, setIsMenu,
|
|
isScrollLock
|
|
};
|
|
};
|
|
|
|
const GlobalStore = createContainer(useGlobalStore);
|
|
|
|
export default GlobalStore;
|