mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-07 20:31:06 -05:00
32 lines
1 KiB
TypeScript
32 lines
1 KiB
TypeScript
|
import { memo, useEffect, useRef, useState } from 'react'
|
||
|
|
import { useLayoutContext } from '../../../shared/context/layout-context'
|
||
|
|
import useScopeValue from '../../../shared/hooks/use-scope-value'
|
||
|
|
|
||
|
|
export default memo(function LeftMenuMask() {
|
||
|
|
const { setLeftMenuShown } = useLayoutContext()
|
||
|
|
const [editorTheme] = useScopeValue('settings.editorTheme')
|
||
|
|
const [overallTheme] = useScopeValue('settings.overallTheme')
|
||
|
|
const [original] = useState({ editorTheme, overallTheme })
|
||
|
|
const maskRef = useRef<HTMLDivElement | null>(null)
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (maskRef.current) {
|
||
|
|
if (
|
||
|
|
editorTheme !== original.editorTheme ||
|
||
|
|
overallTheme !== original.overallTheme
|
||
|
|
) {
|
||
|
|
maskRef.current.style.opacity = '0'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, [editorTheme, overallTheme, original])
|
||
|
|
|
||
|
|
return (
|
||
|
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
|
||
|
|
<div
|
||
|
|
id="left-menu-mask"
|
||
|
|
ref={maskRef}
|
||
|
|
onClick={() => setLeftMenuShown(false)}
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
})
|