From d5aa312104296e1c53c8bb7b3a918dd169f3a422 Mon Sep 17 00:00:00 2001
From: DmitriyA <faleo1999@mail.ru>
Date: Wed, 23 Apr 2025 10:19:29 -0400
Subject: [PATCH] Added the logo to the side menu

---
 src/Components/Layout/SidebarMenu.jsx     | 45 +++++++++++++++++++++--
 src/assets/images/system_monitor_icon.svg | 11 ++++++
 2 files changed, 53 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/images/system_monitor_icon.svg

diff --git a/src/Components/Layout/SidebarMenu.jsx b/src/Components/Layout/SidebarMenu.jsx
index ca4fc59..f0ba272 100644
--- a/src/Components/Layout/SidebarMenu.jsx
+++ b/src/Components/Layout/SidebarMenu.jsx
@@ -1,4 +1,7 @@
 import React, { useState, useEffect, useRef } from "react";
+import FullLogo from '../../assets/images/logo.svg?react';
+import MiniLogo from '../../assets/images/system_monitor_icon.svg?react';
+
 import {
     Drawer,
     List,
@@ -91,15 +94,50 @@ const SidebarMenu = ({ data, onOpenTab, sidebarWidth, startResizing, collapsed,
                     },
                 }}
             >
-                {/* Кнопка сворачивания/разворачивания */}
+                {/* Верхняя часть с логотипом и кнопкой */}
                 <Box sx={{
                     display: 'flex',
-                    justifyContent: 'flex-end',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
                     p: 1,
                     borderBottom: '1px solid',
                     borderColor: 'divider',
                     backgroundColor: 'custom.sidebar'
                 }}>
+                    {/* Логотип - центрируется в доступном пространстве */}
+                    <Box sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        flexGrow: 1,
+                        overflow: 'hidden',
+                        transition: 'opacity 0.3s ease',
+                        opacity: collapsed ? 0 : 1,
+                        width: collapsed ? 0 : 'auto'
+                    }}>
+                        <FullLogo style={{
+                            height: '32px',
+                            width: 'auto',
+                            maxWidth: '100%'
+                        }} />
+                    </Box>
+
+                    {/* Мини-логотип (только в свернутом состоянии) */}
+                    {collapsed && (
+                        <Box sx={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            width: '100%'
+                        }}>
+                            <MiniLogo style={{
+                                height: '24px',
+                                width: '24px'
+                            }} />
+                        </Box>
+                    )}
+
+                    {/* Кнопка сворачивания/разворачивания */}
                     <Tooltip title={collapsed ? "Развернуть меню" : "Свернуть меню"}>
                         <IconButton
                             onClick={handleToggleCollapse}
@@ -108,7 +146,8 @@ const SidebarMenu = ({ data, onOpenTab, sidebarWidth, startResizing, collapsed,
                                 color: 'custom.sidebarText',
                                 '&:hover': {
                                     backgroundColor: 'custom.sidebarHover',
-                                }
+                                },
+                                ml: collapsed ? 'auto' : 0 // В свернутом состоянии кнопка центрируется
                             }}
                         >
                             {collapsed ? <ChevronRight /> : <ChevronLeft />}
diff --git a/src/assets/images/system_monitor_icon.svg b/src/assets/images/system_monitor_icon.svg
new file mode 100644
index 0000000..ba02f29
--- /dev/null
+++ b/src/assets/images/system_monitor_icon.svg
@@ -0,0 +1,11 @@
+<svg width="43" height="43" viewBox="0 0 43 43" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.4391 0.0295059V0H21.5049H21.4951H20.5609V0.0295059C9.76424 0.48193 1.02264 8.95014 0.0884977 19.6116C0.0294994 20.2312 0 20.8607 0 21.5C0 22.1295 0.0294994 22.7589 0.0884977 23.3884C1.04231 34.3646 10.2756 43 21.4951 43H22.4391V39.2331H21.4951C12.37 39.2331 4.8182 32.3484 3.87423 23.3884H6.43083H14.6513C14.4349 22.7097 14.3169 21.9819 14.3169 21.2246C14.3169 20.6738 14.3858 20.1329 14.5038 19.6215H11.4752C12.37 14.8808 16.5884 11.3008 21.5049 11.3008C24.9367 11.3008 28.1226 13.0416 29.9909 15.8545H34.2584C32.0656 10.8484 27.0016 7.53385 21.5049 7.53385C14.5038 7.53385 8.58427 12.7761 7.65996 19.6215H6.2145H3.87423C4.8182 10.6615 12.37 3.77676 21.4951 3.77676H21.5049C30.63 3.77676 38.1818 10.6615 39.1258 19.6215H28.4962C28.6142 20.1427 28.6831 20.6738 28.6831 21.2246C28.6831 21.9819 28.5651 22.7097 28.3487 23.3884H28.919H31.5248H35.34H37.3067H43V21.5C43 9.95334 33.8552 0.511436 22.4391 0.0295059Z" fill="#428AC9"/>
+<path d="M22.7045 32.25C22.3112 32.2992 21.9081 32.3287 21.5049 32.3287C17.2472 32.3287 13.5205 29.6436 12.016 25.8472H8.06311C9.70523 31.7681 15.1528 36.0956 21.5049 36.0956C21.9081 36.0956 22.3112 36.0759 22.7045 36.0366V32.25Z" fill="#428AC9"/>
+<path d="M25.2611 24.3817C23.383 26.457 20.1873 26.6242 18.1125 24.7457C16.0377 22.8769 15.8706 19.6706 17.7388 17.5954C19.617 15.5201 22.8127 15.3529 24.8875 17.2315C26.9623 19.1002 27.1294 22.3065 25.2611 24.3817Z" fill="url(#paint0_radial_2_3)"/>
+<defs>
+<radialGradient id="paint0_radial_2_3" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(19.8648 18.1752) scale(7.12571 7.12734)">
+<stop stop-color="#4A96D2"/>
+<stop offset="1" stop-color="#1F2466"/>
+</radialGradient>
+</defs>
+</svg>