126 lines
4.3 KiB
JavaScript
126 lines
4.3 KiB
JavaScript
import React, { useState } from "react";
|
|
import { Brightness4, Brightness7 } from "@mui/icons-material";
|
|
import { IconButton, Tooltip } from "@mui/material";
|
|
import {
|
|
List,
|
|
ListItem,
|
|
ListItemText,
|
|
styled,
|
|
Switch,
|
|
Box,
|
|
Button
|
|
} from "@mui/material";
|
|
import SettingsModal from "../SettingsModal";
|
|
import { RoleBasedRender } from "../../UI/RoleBasedRender";
|
|
|
|
const FooterList = styled(List)(({ theme }) => ({
|
|
backgroundColor: theme.palette.custom.sidebar,
|
|
padding: theme.spacing(1, 0),
|
|
borderTop: `1px solid ${theme.palette.divider}`,
|
|
marginTop: 'auto'
|
|
}));
|
|
|
|
const FooterListItem = styled(ListItem)(({ theme }) => ({
|
|
'&:hover': {
|
|
backgroundColor: theme.palette.custom.sidebarHover,
|
|
},
|
|
padding: theme.spacing(1, 2),
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center'
|
|
}));
|
|
|
|
const SidebarFooter = ({
|
|
collapsed,
|
|
isDarkMode,
|
|
setIsDarkMode,
|
|
forceRefreshMenu,
|
|
user
|
|
}) => {
|
|
const [settingsOpen, setSettingsOpen] = useState(false);
|
|
|
|
const handleSettingsOpen = () => {
|
|
setSettingsOpen(true);
|
|
};
|
|
|
|
const handleSettingsClose = () => {
|
|
setSettingsOpen(false);
|
|
};
|
|
console.log('SidebarFooter user with role:', {
|
|
...user,
|
|
hasRole: 'role' in user,
|
|
roleValue: user?.role
|
|
});
|
|
return (
|
|
<>
|
|
<FooterList>
|
|
{!collapsed && (
|
|
<FooterListItem button>
|
|
<ListItemText
|
|
primary="Помощь"
|
|
primaryTypographyProps={{
|
|
color: 'custom.sidebarText',
|
|
variant: 'body2'
|
|
}}
|
|
/>
|
|
</FooterListItem>
|
|
)}
|
|
<FooterListItem>
|
|
{/* кнопка настроек */}
|
|
<RoleBasedRender user={user} allowedRoles={['admin']}>
|
|
{!collapsed && (
|
|
<Button
|
|
onClick={handleSettingsOpen}
|
|
sx={{
|
|
color: 'custom.sidebarText',
|
|
textTransform: 'none',
|
|
minWidth: 0,
|
|
padding: 0,
|
|
marginRight: 'auto'
|
|
}}
|
|
>
|
|
<ListItemText
|
|
primary="Настройки"
|
|
primaryTypographyProps={{
|
|
color: 'custom.sidebarText',
|
|
variant: 'body2'
|
|
}}
|
|
/>
|
|
</Button>
|
|
)}
|
|
</RoleBasedRender>
|
|
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
<Tooltip title="Переключить тему">
|
|
<IconButton
|
|
size="small"
|
|
onClick={() => setIsDarkMode(!isDarkMode)}
|
|
sx={{ color: 'custom.sidebarText' }}
|
|
>
|
|
{isDarkMode ? <Brightness4 /> : <Brightness7 />}
|
|
</IconButton>
|
|
</Tooltip>
|
|
{!collapsed && (
|
|
<Switch
|
|
checked={isDarkMode}
|
|
onChange={() => setIsDarkMode(!isDarkMode)}
|
|
size="small"
|
|
/>
|
|
)}
|
|
</Box>
|
|
</FooterListItem>
|
|
</FooterList>
|
|
|
|
{/* Используем RoleBasedRender для модального окна */}
|
|
<RoleBasedRender user={user} allowedRoles={['admin']}>
|
|
<SettingsModal
|
|
open={settingsOpen}
|
|
onClose={handleSettingsClose}
|
|
onMenuUpdate={forceRefreshMenu}
|
|
/>
|
|
</RoleBasedRender>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default SidebarFooter; |