improved the design

src/App.jsx

@@ -121,12 +121,11 @@ function App() {
                     overflow: "hidden",
                     bgcolor: "background.default"
                 }}>
-                    <Dashboard user={authState.user} onLogout={handleLogout} />
+                    <Dashboard
-                    
+                        user={authState.user}
-                    <Switch
+                        onLogout={handleLogout}
-                        checked={isDarkMode}
+                        isDarkMode={isDarkMode}
-                        onChange={() => setIsDarkMode(!isDarkMode)}
+                        setIsDarkMode={setIsDarkMode}
-                        sx={{ position: "absolute", top: 10, right: 10 }}
                     />
                 </Box>
             )}

src/Components/Layout/Dashboard.jsx

@@ -41,22 +41,20 @@ const MainContent = styled(Box)(({ theme }) => ({
   flexGrow: 1,
   display: 'flex',
   flexDirection: 'column',
-  padding: theme.spacing(2.5), // 20px
+  padding: theme.spacing(2.5),
   overflow: 'auto',
   backgroundColor: theme.palette.background.default,
 }));
 
 const Content = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.custom.modalBackground,
-  //padding: theme.spacing(2.5),
   borderRadius: '10px',
-  //boxShadow: theme.shadows[2],
   maxWidth: '100%',
   overflow: 'auto',
   color: theme.palette.custom.modalText,
 }));
 
-const Dashboard = () => {
+const Dashboard = ({ isDarkMode, setIsDarkMode }) => {
   const { tabs, activeTab, handleOpenTab, handleCloseTab, setActiveTab } = useTabs("Главная");
   const { sidebarWidth, startResizing } = useSidebarResize(290);
   const [tabContent, setTabContent] = useState({});
@@ -112,31 +110,49 @@ const Dashboard = () => {
           startResizing={startResizing}
           collapsed={collapsed}
           setCollapsed={setCollapsed}
+          isDarkMode={isDarkMode}
+          setIsDarkMode={setIsDarkMode}
         />
         <SidebarResizer onMouseDown={startResizing} />
       </SidebarWrapper>
 
       {/* Основной контент */}
-      <MainContent>
+      <Box sx={{
-        {/* Вкладки */}
+        display: 'flex',
-        <CustomTabs
+        flexDirection: 'column',
-          tabs={tabs}
+        flexGrow: 1,
-          activeTab={activeTab}
+        overflow: 'hidden'
-          onTabClick={setActiveTab}
+      }}>
-          onCloseTab={handleCloseTab}
+        {/* Вкладки*/}
-        />
+        <Box sx={{
-
+          borderBottom: 1,
-        {/* Контент вкладки */}
+          borderColor: 'divider',
-        <Content>
+          backgroundColor: 'background.default',
-          <TabContent
+          zIndex: 1,
+          transform: 'translateY(3px)'
+        }}>
+          <CustomTabs
+            tabs={tabs}
             activeTab={activeTab}
-            statusHistories={statusHistories}
+            onTabClick={setActiveTab}
-            treeData1={treeData1}
+            onCloseTab={handleCloseTab}
-            tabContent={tabContent}
-            handleOpenTab={handleOpenTab}
           />
-        </Content>
+        </Box>
-      </MainContent>
+
+        {/* Остальной контент */}
+        <MainContent>
+          {/* Контент вкладки */}
+          <Content>
+            <TabContent
+              activeTab={activeTab}
+              statusHistories={statusHistories}
+              treeData1={treeData1}
+              tabContent={tabContent}
+              handleOpenTab={handleOpenTab}
+            />
+          </Content>
+        </MainContent>
+      </Box>
     </DashboardContainer>
   );
 };

src/Components/Layout/SidebarMenu.jsx

@@ -17,6 +17,7 @@ import MenuItem from "./SidebarMenuComponents/MenuItem";
 import SidebarFooter from "./SidebarMenuComponents/SidebarFooter";
 import { statusManager1 } from "../TreeChart/dataUtils";
 
+
 const SidebarResizer = styled('div')(({ theme }) => ({
     width: "5px",
     cursor: "ew-resize",
@@ -32,7 +33,7 @@ const SidebarResizer = styled('div')(({ theme }) => ({
     zIndex: 2
 }));
 
-const SidebarMenu = ({ data, onOpenTab, sidebarWidth, startResizing, collapsed, setCollapsed }) => {
+const SidebarMenu = ({ data, onOpenTab, sidebarWidth, startResizing, collapsed, setCollapsed, isDarkMode, setIsDarkMode }) => {
     const [hovered, setHovered] = useState(false);
     const [menuData, setMenuData] = useState(data);
     const contentCache = useRef({});
@@ -149,9 +150,13 @@ const SidebarMenu = ({ data, onOpenTab, sidebarWidth, startResizing, collapsed,
                     </List>
 
                     {/* Футер */}
-                    {!collapsed && (
+
-                        <SidebarFooter />
+                    <SidebarFooter
-                    )}
+                        collapsed={collapsed}
+                        isDarkMode={isDarkMode}
+                        setIsDarkMode={setIsDarkMode}
+                    />
+
                 </Box>
 
                 {/* Ресайзер */}

src/Components/Layout/SidebarMenuComponents/SidebarFooter.jsx

@@ -1,9 +1,13 @@
 import React from "react";
+import { Brightness4, Brightness7 } from "@mui/icons-material";
+import { IconButton, Tooltip } from "@mui/material";
 import {
     List,
     ListItem,
     ListItemText,
-    styled
+    styled,
+    Switch,
+    Box
 } from "@mui/material";
 
 const FooterList = styled(List)(({ theme }) => ({
@@ -18,28 +22,54 @@ const FooterListItem = styled(ListItem)(({ theme }) => ({
         backgroundColor: theme.palette.custom.sidebarHover,
     },
     padding: theme.spacing(1, 2),
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center'
 }));
 
-const SidebarFooter = () => {
+const SidebarFooter = ({ collapsed, isDarkMode, setIsDarkMode }) => {
     return (
         <FooterList>
-            <FooterListItem button>
+            {!collapsed && (
-                <ListItemText
+                <FooterListItem button>
-                    primary="Помощь"
+                    <ListItemText
-                    primaryTypographyProps={{
+                        primary="Помощь"
-                        color: 'custom.sidebarText',
+                        primaryTypographyProps={{
-                        variant: 'body2'
+                            color: 'custom.sidebarText',
-                    }}
+                            variant: 'body2'
-                />
+                        }}
-            </FooterListItem>
+                    />
-            <FooterListItem button>
+                </FooterListItem>
-                <ListItemText
+            )}
-                    primary="Настройка"
+            <FooterListItem>
-                    primaryTypographyProps={{
+                {!collapsed && (
-                        color: 'custom.sidebarText',
+                    <ListItemText
-                        variant: 'body2'
+                        primary="Настройка"
-                    }}
+                        primaryTypographyProps={{
-                />
+                            color: 'custom.sidebarText',
+                            variant: 'body2'
+                        }}
+                    />
+                )}
+
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <Tooltip title="Переключить тему">
+                        <IconButton
+                            size="small"
+                            onClick={() => setIsDarkMode(!isDarkMode)}
+                            sx={{ color: 'custom.sidebarText' }}
+                        >
+                            {isDarkMode ? <Brightness4 /> : <Brightness7 />}
+                        </IconButton>
+                    </Tooltip>
+                    {!collapsed && (
+                        <Switch
+                            checked={isDarkMode}
+                            onChange={() => setIsDarkMode(!isDarkMode)}
+                            size="small"
+                        />
+                    )}
+                </Box>
             </FooterListItem>
         </FooterList>
     );

src/Components/UI/MUItabs.jsx

@@ -16,7 +16,7 @@ const StyledTab = styled(Tab)(({ theme }) => ({
 
 const CustomTabs = ({ tabs, activeTab, onTabClick, onCloseTab }) => {
     const handleMouseDown = (e, id) => {
-        if (e.button === 1) { // Middle mouse button
+        if (e.button === 1) {
             e.preventDefault();
             onCloseTab(id);
         }

src/Components/hooks/TabContent.jsx

@@ -6,7 +6,7 @@ const TabContent = ({ activeTab, statusHistories, treeData1, tabContent, handleO
     if (activeTab === "Главная") {
         return (
             <div>
-                <h2>Общий мониторинг состояния системы</h2>
+                <h2 style={{ textAlign: 'center' }}>Общий мониторинг состояния системы</h2>
                 <div>
                     <div style={{ display: 'inline-block', width: '48%', marginRight: '2%' }}>
                         <label>Надежность системы</label>