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',
backgroundColor: 'background.default',
zIndex: 1,
transform: 'translateY(3px)'
transform: 'translateY(31px)'
}}>
<CustomTabs
tabs={tabs}

View File

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