added profile page and logout
test-org/trust-module-frontend/pipeline/pr-rc This commit looks good
Details
test-org/trust-module-frontend/pipeline/pr-rc This commit looks good
Details
parent
dabdda4afe
commit
cb030a01d2
|
|
@ -5,6 +5,7 @@ import LoginModal from "./Components/UI/LoginModal";
|
|||
import { lightTheme, darkTheme } from "./Style/theme";
|
||||
import Logo from './assets/images/logo.svg?react';
|
||||
import { checkAuth } from "./Components/UI/auth";
|
||||
import axios from "axios";
|
||||
|
||||
function App() {
|
||||
const [authState, setAuthState] = useState({
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@ import useSidebarResize from "../hooks/useSidebarResize";
|
|||
import TabContent from "../hooks/TabContent";
|
||||
import menuData from "../TreeChart/menuData.json";
|
||||
import SidebarMenuWrapper from "./SidebarMenuWrapper";
|
||||
import MetricTabContent from "./MetricTabContent"
|
||||
import MetricTabContent from "./MetricTabContent";
|
||||
import ProfileMenu from "../UI/ProfileMenu";
|
||||
|
||||
// Стилизованные компоненты
|
||||
const DashboardContainer = styled(Box)(({ theme }) => ({
|
||||
display: 'flex',
|
||||
height: '100vh',
|
||||
|
|
@ -37,7 +37,7 @@ const Content = styled(Box)(({ theme }) => ({
|
|||
color: theme.palette.custom.modalText,
|
||||
}));
|
||||
|
||||
const Dashboard = ({ isDarkMode, setIsDarkMode, user }) => {
|
||||
const Dashboard = ({ isDarkMode, setIsDarkMode, user, onLogout }) => {
|
||||
const { tabs, activeTab, handleOpenTab, handleCloseTab, setActiveTab } = useTabs("Главная");
|
||||
const [tabContent, setTabContent] = useState({});
|
||||
const [treeData1, setTreeData1] = useState(menuData);
|
||||
|
|
@ -133,6 +133,19 @@ const Dashboard = ({ isDarkMode, setIsDarkMode, user }) => {
|
|||
|
||||
return (
|
||||
<DashboardContainer>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
position: 'fixed',
|
||||
top: 12,
|
||||
right: 20,
|
||||
zIndex: (theme) => theme.zIndex.tooltip + 10,
|
||||
pointerEvents: 'auto'
|
||||
}}
|
||||
>
|
||||
<ProfileMenu user={user} onLogout={onLogout} />
|
||||
</Box>
|
||||
|
||||
{/* Сайдбар */}
|
||||
<SidebarMenuWrapper
|
||||
isDarkMode={isDarkMode}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,66 @@
|
|||
import React, { useState } from 'react';
|
||||
import {
|
||||
IconButton, Menu, MenuItem, Avatar, Tooltip, Typography
|
||||
} from '@mui/material';
|
||||
|
||||
const ProfileMenu = ({ user, onLogout }) => {
|
||||
const [anchorEl, setAnchorEl] = useState(null);
|
||||
const open = Boolean(anchorEl);
|
||||
|
||||
const handleOpen = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
const handleLogoutClick = () => {
|
||||
handleClose();
|
||||
onLogout();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tooltip title="Профиль">
|
||||
<IconButton onClick={handleOpen} size="small" sx={{ ml: 2 }}>
|
||||
<Avatar sx={{ bgcolor: 'primary.main' }}>
|
||||
{user?.login?.[0]?.toUpperCase() || '?'}
|
||||
</Avatar>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
onClick={handleClose}
|
||||
PaperProps={{
|
||||
elevation: 3,
|
||||
sx: {
|
||||
mt: 1.5,
|
||||
minWidth: 180,
|
||||
},
|
||||
}}
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
>
|
||||
<MenuItem disabled>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{user?.login || 'Неизвестный'}
|
||||
</Typography>
|
||||
</MenuItem>
|
||||
<MenuItem onClick={handleLogoutClick}>
|
||||
Выйти
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProfileMenu;
|
||||
Loading…
Reference in New Issue