From 4088dacba45bfa2478df9affa2e48c77e3bd17f4 Mon Sep 17 00:00:00 2001
From: DmitriyA <faleo1999@mail.ru>
Date: Wed, 28 May 2025 01:36:11 -0400
Subject: [PATCH] added logo

---
 src/Components/Layout/Dashboard.jsx   |  2 +-
 src/Components/Layout/SidebarMenu.jsx | 45 +++++++++++++++++++++------
 2 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/src/Components/Layout/Dashboard.jsx b/src/Components/Layout/Dashboard.jsx
index 4c6d179..8841bc7 100755
--- a/src/Components/Layout/Dashboard.jsx
+++ b/src/Components/Layout/Dashboard.jsx
@@ -152,7 +152,7 @@ const Dashboard = ({ isDarkMode, setIsDarkMode }) => {
           borderColor: 'divider',
           backgroundColor: 'background.default',
           zIndex: 1,
-          transform: 'translateY(3px)'
+          transform: 'translateY(31px)'
         }}>
           <CustomTabs
             tabs={tabs}
diff --git a/src/Components/Layout/SidebarMenu.jsx b/src/Components/Layout/SidebarMenu.jsx
index 579ce0c..e37f326 100644
--- a/src/Components/Layout/SidebarMenu.jsx
+++ b/src/Components/Layout/SidebarMenu.jsx
@@ -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 />}