79 lines
2.5 KiB
JavaScript
79 lines
2.5 KiB
JavaScript
import React from "react";
|
|
import { Brightness4, Brightness7 } from "@mui/icons-material";
|
|
import { IconButton, Tooltip } from "@mui/material";
|
|
import {
|
|
List,
|
|
ListItem,
|
|
ListItemText,
|
|
styled,
|
|
Switch,
|
|
Box
|
|
} from "@mui/material";
|
|
|
|
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 }) => {
|
|
return (
|
|
<FooterList>
|
|
{!collapsed && (
|
|
<FooterListItem button>
|
|
<ListItemText
|
|
primary="Помощь"
|
|
primaryTypographyProps={{
|
|
color: 'custom.sidebarText',
|
|
variant: 'body2'
|
|
}}
|
|
/>
|
|
</FooterListItem>
|
|
)}
|
|
<FooterListItem>
|
|
{!collapsed && (
|
|
<ListItemText
|
|
primary="Настройка"
|
|
primaryTypographyProps={{
|
|
color: 'custom.sidebarText',
|
|
variant: 'body2'
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
<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>
|
|
);
|
|
};
|
|
|
|
export default SidebarFooter;
|