|
|
@@ -0,0 +1,189 @@
|
|
|
+import React, { useState } from 'react';
|
|
|
+import AppBar from '@mui/material/AppBar';
|
|
|
+import Box from '@mui/material/Box';
|
|
|
+import Toolbar from '@mui/material/Toolbar';
|
|
|
+import IconButton from '@mui/material/IconButton';
|
|
|
+import Typography from '@mui/material/Typography';
|
|
|
+import Menu from '@mui/material/Menu';
|
|
|
+import Container from '@mui/material/Container';
|
|
|
+import Avatar from '@mui/material/Avatar';
|
|
|
+import Tooltip from '@mui/material/Tooltip';
|
|
|
+import MenuItem from '@mui/material/MenuItem';
|
|
|
+import InstagramIcon from '@mui/icons-material/Instagram';
|
|
|
+import { connect } from 'react-redux';
|
|
|
+
|
|
|
+// отрисовываем логин
|
|
|
+const UserName = ({ login }) => <span>{login}</span>
|
|
|
+const CUserName = connect(state => ({ login: state.auth.payload?.sub?.login }))(UserName)
|
|
|
+
|
|
|
+function ResponsiveAppBar() {
|
|
|
+ const [anchorElUser, setAnchorElUser] = useState(null);
|
|
|
+
|
|
|
+ const handleOpenUserMenu = (event) => {
|
|
|
+ setAnchorElUser(event.currentTarget);
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleCloseUserMenu = () => {
|
|
|
+ setAnchorElUser(null);
|
|
|
+ };
|
|
|
+
|
|
|
+ // const consolling = () => {
|
|
|
+ // console.log('click')
|
|
|
+ // // < Redirect to = '/' />
|
|
|
+ // }
|
|
|
+
|
|
|
+ // return (
|
|
|
+ // <AppBar position="sticky" top='0' color='inherit'>
|
|
|
+ // <Container maxWidth="xl">
|
|
|
+ // <Toolbar disableGutters>
|
|
|
+
|
|
|
+ // <InstagramIcon sx={{ display: { xs: 'flex' }, mr: 1 }} />
|
|
|
+
|
|
|
+ // <Typography
|
|
|
+ // variant="h6"
|
|
|
+ // noWrap
|
|
|
+ // component="a"
|
|
|
+ // href="/"
|
|
|
+ // sx={{
|
|
|
+ // mr: 2,
|
|
|
+ // display: { xs: 'none', md: 'flex' },
|
|
|
+ // fontFamily: 'monospace',
|
|
|
+ // fontWeight: 700,
|
|
|
+ // letterSpacing: '.3rem',
|
|
|
+ // color: 'inherit',
|
|
|
+ // textDecoration: 'none',
|
|
|
+ // }}
|
|
|
+ // >
|
|
|
+ // Hipstagram
|
|
|
+
|
|
|
+ // {/* отрисовка логина */}
|
|
|
+ // {/* <CUserName /> */}
|
|
|
+
|
|
|
+ // </Typography>
|
|
|
+
|
|
|
+ // <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }} />
|
|
|
+
|
|
|
+ // <Box sx={{ flexGrow: 0 }}>
|
|
|
+ // <Tooltip >
|
|
|
+ // <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
|
|
|
+ // <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
|
|
|
+ // </IconButton>
|
|
|
+ // </Tooltip>
|
|
|
+ // <Menu
|
|
|
+ // sx={{ mt: '45px' }}
|
|
|
+ // id="menu-appbar"
|
|
|
+ // anchorEl={anchorElUser}
|
|
|
+ // anchorOrigin={{
|
|
|
+ // vertical: 'top',
|
|
|
+ // horizontal: 'right',
|
|
|
+ // }}
|
|
|
+ // keepMounted
|
|
|
+ // transformOrigin={{
|
|
|
+ // vertical: 'top',
|
|
|
+ // horizontal: 'right',
|
|
|
+ // }}
|
|
|
+ // open={Boolean(anchorElUser)}
|
|
|
+ // onClose={handleCloseUserMenu}
|
|
|
+ // >
|
|
|
+ // {/* {settings.map((setting) => (
|
|
|
+ // // <MenuItem key={setting} onClick={handleCloseUserMenu}>
|
|
|
+ // <MenuItem key={setting} onClick={handleCloseUserMenu}>
|
|
|
+ // <Typography textAlign="center">{setting}</Typography>
|
|
|
+ // </MenuItem>
|
|
|
+ // ))} */}
|
|
|
+ // <MenuItem key={1} onClick={() => console.log('click user')}>
|
|
|
+ // <Typography textAlign="center">
|
|
|
+ // <CUserName />
|
|
|
+ // </Typography>
|
|
|
+ // </MenuItem>
|
|
|
+ // <MenuItem key={2} onClick={() => console.log('click user')}>
|
|
|
+ // <Typography textAlign="center">
|
|
|
+ // Выйти
|
|
|
+ // </Typography>
|
|
|
+ // </MenuItem>
|
|
|
+
|
|
|
+ // </Menu>
|
|
|
+ // </Box>
|
|
|
+ // </Toolbar>
|
|
|
+ // </Container>
|
|
|
+ // </AppBar >
|
|
|
+ // );
|
|
|
+
|
|
|
+
|
|
|
+ return (
|
|
|
+ <AppBar position='sticky' color='inherit'>
|
|
|
+ <Container maxWidth="xl">
|
|
|
+ <Toolbar disableGutters>
|
|
|
+ <IconButton edge='start'>
|
|
|
+ <InstagramIcon sx={{
|
|
|
+ display: { xs: 'flex' },
|
|
|
+ mr: 1,
|
|
|
+ color: 'black'
|
|
|
+ }} />
|
|
|
+ </IconButton>
|
|
|
+ <Typography
|
|
|
+ variant="h6"
|
|
|
+ noWrap
|
|
|
+ component="a"
|
|
|
+ href="/"
|
|
|
+ sx={{
|
|
|
+ display: { xs: 'none', md: 'flex' },
|
|
|
+ fontFamily: 'monospace',
|
|
|
+ fontWeight: 700,
|
|
|
+ letterSpacing: '.3rem',
|
|
|
+ color: 'inherit',
|
|
|
+ textDecoration: 'none',
|
|
|
+ flexGrow: '1'
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ Hipstagram
|
|
|
+ </Typography>
|
|
|
+ <Box sx={{ flexGrow: 0 }}>
|
|
|
+ <Tooltip >
|
|
|
+ <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
|
|
|
+ <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
|
|
|
+ </IconButton>
|
|
|
+ </Tooltip>
|
|
|
+ <Menu
|
|
|
+ sx={{ mt: '45px' }}
|
|
|
+ id="menu-appbar"
|
|
|
+ anchorEl={anchorElUser}
|
|
|
+ anchorOrigin={{
|
|
|
+ vertical: 'top',
|
|
|
+ horizontal: 'right',
|
|
|
+ }}
|
|
|
+ keepMounted
|
|
|
+ transformOrigin={{
|
|
|
+ vertical: 'top',
|
|
|
+ horizontal: 'right',
|
|
|
+ }}
|
|
|
+ open={Boolean(anchorElUser)}
|
|
|
+ onClose={handleCloseUserMenu}
|
|
|
+ >
|
|
|
+ <MenuItem key={1} onClick={() => console.log('click user')}>
|
|
|
+ <Typography textAlign="center">
|
|
|
+ <CUserName />
|
|
|
+ </Typography>
|
|
|
+ </MenuItem>
|
|
|
+ <MenuItem key={2} onClick={() => console.log('click logout')}>
|
|
|
+ <Typography textAlign="center">
|
|
|
+ <span>Выйти</span>
|
|
|
+ </Typography>
|
|
|
+ </MenuItem>
|
|
|
+
|
|
|
+ </Menu>
|
|
|
+ </Box>
|
|
|
+ </Toolbar>
|
|
|
+ </Container>
|
|
|
+ </AppBar>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+export default ResponsiveAppBar;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
