add authorization

2026-06-28 15:00:57 +03:00 · 2023-05-13 23:10:59 +01:00
parent 8270707668
commit 05bd7bc793
9 changed files with 317 additions and 9 deletions
@@ -0,0 +1,6 @@
+.ps__rail-x {
+    display: none !important;
+}
+.ps__thumb-x {
+    display: none !important;
+}
@@ -0,0 +1,163 @@
+import { useState, useRef, useEffect } from 'react'
+
+import PropTypes from 'prop-types'
+
+import { useSelector } from 'react-redux'
+
+// material-ui
+import { useTheme } from '@mui/material/styles'
+import {
+    Box,
+    ButtonBase,
+    Avatar,
+    ClickAwayListener,
+    Divider,
+    List,
+    ListItemButton,
+    ListItemIcon,
+    ListItemText,
+    Paper,
+    Popper,
+    Typography
+} from '@mui/material'
+
+// third-party
+import PerfectScrollbar from 'react-perfect-scrollbar'
+
+// project imports
+import MainCard from 'ui-component/cards/MainCard'
+import Transitions from 'ui-component/extended/Transitions'
+
+// assets
+import { IconLogout, IconSettings } from '@tabler/icons'
+
+import './index.css'
+
+// ==============================|| PROFILE MENU ||============================== //
+
+const ProfileSection = ({ username, handleLogout }) => {
+    const theme = useTheme()
+
+    const customization = useSelector((state) => state.customization)
+
+    const [open, setOpen] = useState(false)
+
+    const anchorRef = useRef(null)
+
+    const handleClose = (event) => {
+        if (anchorRef.current && anchorRef.current.contains(event.target)) {
+            return
+        }
+        setOpen(false)
+    }
+
+    const handleToggle = () => {
+        setOpen((prevOpen) => !prevOpen)
+    }
+
+    const prevOpen = useRef(open)
+    useEffect(() => {
+        if (prevOpen.current === true && open === false) {
+            anchorRef.current.focus()
+        }
+
+        prevOpen.current = open
+    }, [open])
+
+    return (
+        <>
+            <ButtonBase ref={anchorRef} sx={{ borderRadius: '12px', overflow: 'hidden' }}>
+                <Avatar
+                    variant='rounded'
+                    sx={{
+                        ...theme.typography.commonAvatar,
+                        ...theme.typography.mediumAvatar,
+                        transition: 'all .2s ease-in-out',
+                        background: theme.palette.secondary.light,
+                        color: theme.palette.secondary.dark,
+                        '&:hover': {
+                            background: theme.palette.secondary.dark,
+                            color: theme.palette.secondary.light
+                        }
+                    }}
+                    onClick={handleToggle}
+                    color='inherit'
+                >
+                    <IconSettings stroke={1.5} size='1.3rem' />
+                </Avatar>
+            </ButtonBase>
+            <Popper
+                placement='bottom-end'
+                open={open}
+                anchorEl={anchorRef.current}
+                role={undefined}
+                transition
+                disablePortal
+                popperOptions={{
+                    modifiers: [
+                        {
+                            name: 'offset',
+                            options: {
+                                offset: [0, 14]
+                            }
+                        }
+                    ]
+                }}
+            >
+                {({ TransitionProps }) => (
+                    <Transitions in={open} {...TransitionProps}>
+                        <Paper>
+                            <ClickAwayListener onClickAway={handleClose}>
+                                <MainCard border={false} elevation={16} content={false} boxShadow shadow={theme.shadows[16]}>
+                                    <Box sx={{ p: 2 }}>
+                                        <Typography component='span' variant='h4'>
+                                            {username}
+                                        </Typography>
+                                    </Box>
+                                    <PerfectScrollbar style={{ height: '100%', maxHeight: 'calc(100vh - 250px)', overflowX: 'hidden' }}>
+                                        <Box sx={{ p: 2 }}>
+                                            <Divider />
+                                            <List
+                                                component='nav'
+                                                sx={{
+                                                    width: '100%',
+                                                    maxWidth: 250,
+                                                    minWidth: 200,
+                                                    backgroundColor: theme.palette.background.paper,
+                                                    borderRadius: '10px',
+                                                    [theme.breakpoints.down('md')]: {
+                                                        minWidth: '100%'
+                                                    },
+                                                    '& .MuiListItemButton-root': {
+                                                        mt: 0.5
+                                                    }
+                                                }}
+                                            >
+                                                <ListItemButton
+                                                    sx={{ borderRadius: `${customization.borderRadius}px` }}
+                                                    onClick={handleLogout}
+                                                >
+                                                    <ListItemIcon>
+                                                        <IconLogout stroke={1.5} size='1.3rem' />
+                                                    </ListItemIcon>
+                                                    <ListItemText primary={<Typography variant='body2'>Logout</Typography>} />
+                                                </ListItemButton>
+                                            </List>
+                                        </Box>
+                                    </PerfectScrollbar>
+                                </MainCard>
+                            </ClickAwayListener>
+                        </Paper>
+                    </Transitions>
+                )}
+            </Popper>
+        </>
+    )
+}
+
+ProfileSection.propTypes = {
+    username: PropTypes.string,
+    handleLogout: PropTypes.func
+}
+
+export default ProfileSection