DataGrid cell autocomplete

frontend_reactjs/src/layouts/DashboardLayout.tsx

@@ -11,13 +11,14 @@ import Divider from '@mui/material/Divider';
 import IconButton from '@mui/material/IconButton';
 import Container from '@mui/material/Container';
 import MenuIcon from '@mui/icons-material/Menu';
-import { Api, Assignment, Cloud, Factory, Home, People, Shield, Storage, } from '@mui/icons-material';
-import { ListItem, ListItemButton, ListItemIcon, ListItemText, } from '@mui/material';
+import { Api, Assignment, Cloud, Dashboard, Factory, Home, People, Shield, Storage, } from '@mui/icons-material';
+import { colors, ListItem, ListItemButton, ListItemIcon, ListItemText, } from '@mui/material';
 import { Outlet, useNavigate } from 'react-router-dom';
 import { UserData } from '../interfaces/auth';
 import { getUserData, useAuthStore } from '../store/auth';
 import { useTheme } from '@emotion/react';
 import AccountMenu from '../components/AccountMenu';
+import { pages } from '../App';
 
 const drawerWidth: number = 240;
 
@@ -69,49 +70,6 @@ const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open'
     }),
 );
 
-const pages = [
-    {
-        label: "Главная",
-        path: "/",
-        icon: <Home />
-    },
-    {
-        label: "Пользователи",
-        path: "/user",
-        icon: <People />
-    },
-    {
-        label: "Роли",
-        path: "/role",
-        icon: <Shield />
-    },
-    {
-        label: "Документы",
-        path: "/documents",
-        icon: <Storage />
-    },
-    {
-        label: "Отчеты",
-        path: "/reports",
-        icon: <Assignment />
-    },
-    {
-        label: "Серверы",
-        path: "/servers",
-        icon: <Cloud />
-    },
-    {
-        label: "Котельные",
-        path: "/boilers",
-        icon: <Factory />
-    },
-    {
-        label: "API Test",
-        path: "/api-test",
-        icon: <Api />
-    },
-]
-
 export default function DashboardLayout() {
     const theme = useTheme()
     const innerTheme = createTheme(theme)
@@ -186,17 +144,12 @@ export default function DashboardLayout() {
                                 <Typography variant="caption">{userData?.login}</Typography>
                             </Box>
 
-                            {/* <IconButton color="inherit">
-                                <Badge badgeContent={0} color="secondary">
-                                    <AccountCircle />
-                                </Badge>
-                            </IconButton> */}
-
                             <AccountMenu />
                         </Box>
 
                     </Toolbar>
                 </AppBar>
+
                 <Drawer variant="permanent" open={open}>
                     <Toolbar
                         sx={{
@@ -214,7 +167,7 @@ export default function DashboardLayout() {
                     <Divider />
 
                     <List component="nav">
-                        {pages.map((item, index) => (
+                        {pages.filter((page) => page.drawer).map((item, index) => (
                             <ListItem
                                 key={index}
                                 disablePadding
@@ -231,6 +184,7 @@ export default function DashboardLayout() {
                                     </ListItemIcon>
                                     <ListItemText
                                         primary={item.label}
+                                        sx={{ color: location.pathname === item.path ? colors.blue[700] : innerTheme.palette.text.primary }}
                                     />
                                 </ListItemButton>
                             </ListItem>
@@ -253,10 +207,7 @@ export default function DashboardLayout() {
                     <Toolbar />
                     <Container
                         maxWidth="lg"
-                        sx={{
-                            mt: 4,
-                            mb: 4
-                        }}
+                        sx={{ mt: 4, mb: 4 }}
                     >
                         <Outlet />
                     </Container>