added logo

pull/40/head
DmitriyA 2025-05-28 01:36:11 -04:00
parent 08e2c24a63
commit 4088dacba4
2 changed files with 37 additions and 10 deletions

View File

@ -152,7 +152,7 @@ const Dashboard = ({ isDarkMode, setIsDarkMode }) => {
borderColor: 'divider', borderColor: 'divider',
backgroundColor: 'background.default', backgroundColor: 'background.default',
zIndex: 1, zIndex: 1,
transform: 'translateY(3px)' transform: 'translateY(31px)'
}}> }}>
<CustomTabs <CustomTabs
tabs={tabs} tabs={tabs}

View File

@ -20,6 +20,8 @@ import SidebarFooter from "./SidebarMenuComponents/SidebarFooter";
import useSidebarResize from "../hooks/useSidebarResize"; import useSidebarResize from "../hooks/useSidebarResize";
import ChevronLeft from '@mui/icons-material/ChevronLeft'; import ChevronLeft from '@mui/icons-material/ChevronLeft';
import ChevronRight from '@mui/icons-material/ChevronRight'; import ChevronRight from '@mui/icons-material/ChevronRight';
import LogoFull from '../../assets/images/logo.svg?react';
import LogoSmall from '../../assets/images/system_monitor_icon.svg?react';
const SidebarMenu = ({ const SidebarMenu = ({
data, data,
@ -82,22 +84,44 @@ const SidebarMenu = ({
}, },
}} }}
> >
{/* Заголовок и кнопка сворачивания */} {/* Заголовок с логотипом */}
<Box sx={{ <Box sx={{
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'center', // Центрируем содержимое
p: 1, p: 1,
borderBottom: '1px solid', borderBottom: '1px solid',
borderColor: 'divider', borderColor: 'divider',
backgroundColor: 'custom.sidebar' backgroundColor: 'custom.sidebar',
height: 80, // Фиксированная высота
position: 'relative' // Для позиционирования кнопки
}}> }}>
{!collapsed && ( {/* Логотип (занимает все пространство) */}
<Typography variant="h6" sx={{ flexGrow: 1, textAlign: 'center' }}> <Box sx={{
Меню display: 'flex',
</Typography> alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '100%',
'& svg': {
width: '100%',
height: '100%',
padding: collapsed ? '8px' : '12px',
objectFit: 'contain'
}
}}>
{collapsed ? (
<LogoSmall style={{
color: 'inherit' // Наследует цвет темы
}} />
) : (
<LogoFull style={{
color: 'inherit' // Наследует цвет темы
}} />
)} )}
</Box>
{/* Кнопка сворачивания (абсолютное позиционирование) */}
<Tooltip title={collapsed ? "Развернуть меню" : "Свернуть меню"}> <Tooltip title={collapsed ? "Развернуть меню" : "Свернуть меню"}>
<IconButton <IconButton
onClick={handleToggleCollapse} onClick={handleToggleCollapse}
@ -105,7 +129,10 @@ const SidebarMenu = ({
sx={{ sx={{
color: 'custom.sidebarText', color: 'custom.sidebarText',
'&:hover': { backgroundColor: 'custom.sidebarHover' }, '&:hover': { backgroundColor: 'custom.sidebarHover' },
ml: collapsed ? 'auto' : 0 position: 'absolute',
right: 8,
top: '50%',
transform: 'translateY(-50%)'
}} }}
> >
{collapsed ? <ChevronRight /> : <ChevronLeft />} {collapsed ? <ChevronRight /> : <ChevronLeft />}