1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
import { FC, useEffect, useRef, useState } from 'react';
import { useDeckyState } from './DeckyState';
import PluginView from './PluginView';
import { QuickAccessVisibleState } from './QuickAccessVisibleState';
const DeckyDesktopSidebar: FC = () => {
const { desktopMenuOpen, setDesktopMenuOpen } = useDeckyState();
const [closed, setClosed] = useState<boolean>(!desktopMenuOpen);
const [openAnimStart, setOpenAnimStart] = useState<boolean>(desktopMenuOpen);
const closedInterval = useRef<number | null>(null);
useEffect(() => {
const anim = requestAnimationFrame(() => setOpenAnimStart(desktopMenuOpen));
return () => cancelAnimationFrame(anim);
}, [desktopMenuOpen]);
useEffect(() => {
closedInterval.current && clearTimeout(closedInterval.current);
if (desktopMenuOpen) {
setClosed(false);
} else {
closedInterval.current = setTimeout(() => setClosed(true), 500);
}
}, [desktopMenuOpen]);
return (
<>
<div
className="deckyDesktopSidebarDim"
style={{
position: 'absolute',
height: 'calc(100% - 78px - 50px)',
width: '100%',
top: '78px',
left: '0px',
zIndex: 998,
background: 'rgba(0, 0, 0, 0.7)',
opacity: openAnimStart ? 1 : 0,
display: desktopMenuOpen || !closed ? 'flex' : 'none',
transition: 'opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1)',
}}
onClick={() => setDesktopMenuOpen(false)}
/>
<div
className="deckyDesktopSidebar"
style={{
position: 'absolute',
height: 'calc(100% - 78px - 50px)',
width: '350px',
paddingLeft: '16px',
top: '78px',
right: '0px',
zIndex: 999,
transition: 'transform 0.4s cubic-bezier(0.65, 0, 0.35, 1)',
transform: openAnimStart ? 'translateX(0px)' : 'translateX(366px)',
overflowY: 'scroll',
// prevents chromium border jank
display: desktopMenuOpen || !closed ? 'flex' : 'none',
flexDirection: 'column',
background: '#171d25',
}}
>
<QuickAccessVisibleState.Provider value={desktopMenuOpen || !closed}>
<PluginView desktop={true} />
</QuickAccessVisibleState.Provider>
</div>
</>
);
};
export default DeckyDesktopSidebar;
|
