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 { lightTheme, darkTheme } from "./Style/theme";
|
||||||
import Logo from './assets/images/logo.svg?react';
|
import Logo from './assets/images/logo.svg?react';
|
||||||
import { checkAuth } from "./Components/UI/auth";
|
import { checkAuth } from "./Components/UI/auth";
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [authState, setAuthState] = useState({
|
const [authState, setAuthState] = useState({
|
||||||
|
|
|
||||||
|
|
@ -8,9 +8,9 @@ import useSidebarResize from "../hooks/useSidebarResize";
|
||||||
import TabContent from "../hooks/TabContent";
|
import TabContent from "../hooks/TabContent";
|
||||||
import menuData from "../TreeChart/menuData.json";
|
import menuData from "../TreeChart/menuData.json";
|
||||||
import SidebarMenuWrapper from "./SidebarMenuWrapper";
|
import SidebarMenuWrapper from "./SidebarMenuWrapper";
|
||||||
import MetricTabContent from "./MetricTabContent"
|
import MetricTabContent from "./MetricTabContent";
|
||||||
|
import ProfileMenu from "../UI/ProfileMenu";
|
||||||
|
|
||||||
// Стилизованные компоненты
|
|
||||||
const DashboardContainer = styled(Box)(({ theme }) => ({
|
const DashboardContainer = styled(Box)(({ theme }) => ({
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
height: '100vh',
|
height: '100vh',
|
||||||
|
|
@ -37,7 +37,7 @@ const Content = styled(Box)(({ theme }) => ({
|
||||||
color: theme.palette.custom.modalText,
|
color: theme.palette.custom.modalText,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const Dashboard = ({ isDarkMode, setIsDarkMode, user }) => {
|
const Dashboard = ({ isDarkMode, setIsDarkMode, user, onLogout }) => {
|
||||||
const { tabs, activeTab, handleOpenTab, handleCloseTab, setActiveTab } = useTabs("Главная");
|
const { tabs, activeTab, handleOpenTab, handleCloseTab, setActiveTab } = useTabs("Главная");
|
||||||
const [tabContent, setTabContent] = useState({});
|
const [tabContent, setTabContent] = useState({});
|
||||||
const [treeData1, setTreeData1] = useState(menuData);
|
const [treeData1, setTreeData1] = useState(menuData);
|
||||||
|
|
@ -133,6 +133,19 @@ const Dashboard = ({ isDarkMode, setIsDarkMode, user }) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DashboardContainer>
|
<DashboardContainer>
|
||||||
|
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
position: 'fixed',
|
||||||
|
top: 12,
|
||||||
|
right: 20,
|
||||||
|
zIndex: (theme) => theme.zIndex.tooltip + 10,
|
||||||
|
pointerEvents: 'auto'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ProfileMenu user={user} onLogout={onLogout} />
|
||||||
|
</Box>
|
||||||
|
|
||||||
{/* Сайдбар */}
|
{/* Сайдбар */}
|
||||||
<SidebarMenuWrapper
|
<SidebarMenuWrapper
|
||||||
isDarkMode={isDarkMode}
|
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