added logo
parent
08e2c24a63
commit
4088dacba4
|
|
@ -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}
|
||||||
|
|
|
||||||
|
|
@ -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 />}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue