/
SideDrawer.jsx
120 lines (118 loc) · 3.2 KB
/
SideDrawer.jsx
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import { Box, Link } from '@mui/material'
import Divider from '@mui/material/Divider'
import Drawer from '@mui/material/Drawer'
import Typography from '@mui/material/Typography'
import React from 'react'
import Frames from './Frames'
const drawerWidth = 240
export default function SideDrawer({ rtl, open, mobile, onDrawerClose }) {
return (
<Drawer
sx={theme => ({
width: {
sm: drawerWidth,
md: open ? drawerWidth : 0,
},
'& .MuiPaper-root': {
width: {
sm: drawerWidth,
md: open ? drawerWidth : 0,
},
},
flexShrink: {
sm: 0,
md: null,
},
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration:
theme.transitions.duration[
open ? 'enteringScreen' : 'leavingScreen'
],
}),
overflow: open ? undefined : 'hidden',
})}
open={open}
variant={mobile ? 'temporary' : 'persistent'}
anchor={rtl ? 'right' : 'left'}
onClose={onDrawerClose}
>
<Box
sx={theme => ({
...theme.mixins.toolbar,
display: 'flex',
})}
>
<Box
sx={{
p: 1,
display: 'flex',
alignItems: 'baseline',
width: '100%',
justifyContent: 'space-around',
}}
>
<Link
href="http://github.com/paradoxxxzero/kalong/"
underline="hover"
>
<Typography
variant="h1"
sx={{
fontSize: '2.25em',
'&:hover span': {
display: 'inline-block',
'&.K': {
transform:
'rotate3d(0, 0, 1, -90deg) translate(-8.5px, 0px)',
textDecoration: 'none',
},
'&.o': {
transform: 'rotate3d(0, 1, 0, 180deg)',
textDecoration: 'underline',
},
transformOrigin: 'center',
},
}}
>
<Box
component="span"
className="K"
sx={{
transform: 'rotate3d(0, 1, 0, 0deg)',
transition: 'transform 500ms',
marginLeft: '-1px',
}}
>
K
</Box>
al
<Box
component="span"
className="o"
sx={{
transform: 'rotate3d(0, 1, 0, 0deg)',
transition: 'transform 500ms',
marginLeft: '-1px',
}}
>
o
</Box>
ng
</Typography>
</Link>
<Link
href="http://github.com/paradoxxxzero/kalong/releases"
underline="hover"
>
<Typography variant="subtitle1" sx={{ fontSize: '1.25em' }}>
v0.2.3
</Typography>
</Link>
</Box>
</Box>
<Divider />
<Frames />
</Drawer>
)
}