Projekt

Obecné

Profil

Stáhnout (4.89 KB) Statistiky
| Větev: | Tag: | Revize:
1
import * as React from 'react'
2
import { styled, useTheme } from '@mui/material/styles'
3
import Box from '@mui/material/Box'
4
import Drawer from '@mui/material/Drawer'
5
import CssBaseline from '@mui/material/CssBaseline'
6
import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar'
7
import Toolbar from '@mui/material/Toolbar'
8
import Typography from '@mui/material/Typography'
9
import IconButton from '@mui/material/IconButton'
10
import MenuIcon from '@mui/icons-material/Menu'
11
import { Fragment, FunctionComponent } from 'react'
12
import NavigationMenu from './NavigationMenu'
13
import { Paper, Stack } from '@mui/material'
14
import { useDispatch, useSelector } from 'react-redux'
15
import { toggleTheme } from '../Theme/themeSlice'
16
import { RootState } from '../redux/store'
17

    
18
import DarkModeIcon from '@mui/icons-material/DarkMode'
19
import LightModeIcon from '@mui/icons-material/LightMode'
20

    
21
const drawerWidth = 240
22

    
23
const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{
24
    open?: boolean
25
}>(({ theme, open }) => ({
26
    flexGrow: 1,
27
    // padding: theme.spacing(3),
28
    transition: theme.transitions.create('margin', {
29
        easing: theme.transitions.easing.sharp,
30
        duration: theme.transitions.duration.leavingScreen,
31
    }),
32
    marginLeft: `-${drawerWidth}px`,
33
    ...(open && {
34
        transition: theme.transitions.create('margin', {
35
            easing: theme.transitions.easing.easeOut,
36
            duration: theme.transitions.duration.enteringScreen,
37
        }),
38
        marginLeft: 0,
39
    }),
40
}))
41

    
42
interface AppBarProps extends MuiAppBarProps {
43
    open?: boolean
44
}
45

    
46
const AppBar = styled(MuiAppBar, {
47
    shouldForwardProp: (prop) => prop !== 'open',
48
})<AppBarProps>(({ theme, open }) => ({
49
    transition: theme.transitions.create(['margin', 'width'], {
50
        easing: theme.transitions.easing.sharp,
51
        duration: theme.transitions.duration.leavingScreen,
52
    }),
53
    ...(open && {
54
        width: `calc(100% - ${drawerWidth}px)`,
55
        marginLeft: `${drawerWidth}px`,
56
        transition: theme.transitions.create(['margin', 'width'], {
57
            easing: theme.transitions.easing.easeOut,
58
            duration: theme.transitions.duration.enteringScreen,
59
        }),
60
    }),
61
}))
62

    
63
const DrawerHeader = styled('div')(({ theme }) => ({
64
    display: 'flex',
65
    alignItems: 'center',
66
    padding: theme.spacing(0, 1),
67
    // necessary for content to be below app bar
68
    ...theme.mixins.toolbar,
69
    justifyContent: 'flex-end',
70
}))
71

    
72
export interface DrawerProps {
73
    children: React.ReactNode
74
}
75

    
76
const PersistentDrawerLeft: FunctionComponent<DrawerProps> = ({ children }) => {
77
    const [open, setOpen] = React.useState(false)
78

    
79
    const onOpenDrawer = () => {
80
        setOpen(true)
81
    }
82

    
83
    const colorThemeMode = useSelector(
84
        (state: RootState) => state.theme.paletteMode
85
    )
86

    
87
    const dispatch = useDispatch()
88

    
89
    const onToggleTheme = () => {
90
        dispatch(toggleTheme())
91
    }
92

    
93
    return (
94
        <Fragment>
95
            <Paper style={{ minHeight: '100vh', borderRadius: 0 }}>
96
                <Box sx={{ display: 'flex' }}>
97
                    {/* <CssBaseline /> */}
98
                    <AppBar position="fixed" open={open}>
99
                        <Toolbar>
100
                            <IconButton
101
                                color="inherit"
102
                                aria-label="open drawer"
103
                                onClick={onOpenDrawer}
104
                                edge="start"
105
                                sx={{ ...(open && { display: 'none' }) }}
106
                            >
107
                                <MenuIcon />
108
                            </IconButton>
109
                                <Typography variant="h6" noWrap component="div">
110
                                    Assyrian Toponyms App Prototype
111
                                </Typography>
112
                                <Stack sx={{ml: 'auto'}} alignItems="flex-end">
113
                                {colorThemeMode === 'dark' ? (
114
                                    <IconButton onClick={onToggleTheme}>
115
                                        <LightModeIcon />
116
                                    </IconButton>
117
                                ) : (
118
                                    <IconButton onClick={onToggleTheme}>
119
                                        <DarkModeIcon />
120
                                    </IconButton>
121
                                )}
122
                                </Stack>
123
                        </Toolbar>
124
                    </AppBar>
125
                    <NavigationMenu
126
                        open={open}
127
                        drawerWidth={drawerWidth}
128
                        setOpen={setOpen}
129
                    />
130
                    <Main open={open} sx={{ mt: 2 }}>
131
                        <DrawerHeader />
132
                        {children}
133
                    </Main>
134
                </Box>
135
            </Paper>
136
        </Fragment>
137
    )
138
}
139

    
140
export default PersistentDrawerLeft
(1-1/3)