123123

7 months ago · 03d4e3a801
parent 3b956ab51d
commit 03d4e3a801
1 changed files with 107 additions and 0 deletions
--- a/ssss.txt
+++ b/ssss.txt
@ -0,0 +1,107 @@
+import {Sidebar, sidebarClasses} from 'react-pro-sidebar';
+import {Box, Typography,List, ListItemButton, ListItemIcon} from '@mui/material'
+import { useStores } from "../context/root-store-general-context";
+import { observer } from "mobx-react-lite";
+import theme from '../theme';
+import {HomeOutlined, PeopleOutlined,ListOutlined,MenuBookOutlined,SettingsApplicationsOutlined, HelpOutline} from '@mui/icons-material'
+import { BackgroundColor } from '../stories/Sidebar.stories';
+
+
+
+
+
+
+const MainMenu: React.FC = observer(() => {
+    const {SideBar} = useStores()
+
+    return(
+                    <Sidebar collapsed={SideBar.collapsed} style={{maxWidth:"200px", height:"100%"}}
+                        rootStyles={{
+                            [`.${sidebarClasses.container}`]:{
+                                backgroundColor: theme.palette.primary.main,
+                            },
+                        }}
+                    
+                    >
+						<Box sx={{display:"flex", flexDirection:"column",height:"100%", justifyContent:"space-between"}}>
+                            <Box textAlign={"center"} border={2} borderColor={theme.palette.primary.dark} borderRadius={2} marginTop={"8px"}>
+                                <Typography textAlign={"center"} variant='h3' color={"white"} fontWeight={"bold"}>Меню</Typography>
+                                <Box sx={{width:"100%"}} justifyContent={"center"}>
+                                    <List component={"nav"}>
+                                        <ListItemButton selected={SideBar.selectedIndex === 1} onClick={()=>SideBar.setSelectedIndexAction(1)} 
+                                            sx={{ 
+                                                '&.Mui-selected':{
+                                                    backgroundColor : theme.palette.primary.dark,
+                                                    borderRadius: "4px",
+                                                },
+                                            }}
+                                            >
+                                            <ListItemIcon sx={{paddingLeft:"6px"}}>
+                                                <HomeOutlined sx={{color:"white"}} fontSize='large'/>
+                                            </ListItemIcon>
+                                            <Typography fontWeight={"bold"} sx={{paddingLeft:"8px"}} variant='h5'>Домой</Typography>  
+                                        </ListItemButton>
+                                        <ListItemButton selected={SideBar.selectedIndex === 2} onClick={()=>SideBar.setSelectedIndexAction(2)}
+                                            sx={{ 
+                                                '&.Mui-selected':{
+                                                    backgroundColor : theme.palette.primary.dark,
+                                                    borderRadius: "4px",
+                                                },
+                                            }}
+                                            >
+                                            <ListItemIcon sx={{paddingLeft:"6px"}}>
+                                                <PeopleOutlined sx={{color:"white"}} fontSize='large'/>
+                                            </ListItemIcon>
+                                            <Typography fontWeight={"bold"} sx={{paddingLeft:"8px"}} variant='h5'>Кандидаты</Typography>   
+                                        </ListItemButton>
+                                        <ListItemButton selected={SideBar.selectedIndex === 3} onClick={()=>SideBar.setSelectedIndexAction(3)}
+                                            sx={{ 
+                                                '&.Mui-selected':{
+                                                    backgroundColor : theme.palette.primary.dark,
+                                                    borderRadius: "4px",
+                                                },
+                                            }}
+                                            >
+                                            <ListItemIcon sx={{paddingLeft:"6px"}}>
+                                                <ListOutlined sx={{color:"white"}} fontSize='large'/>
+                                            </ListItemIcon>
+                                            <Typography fontWeight={"bold"} sx={{paddingLeft:"8px"}} variant='h5'>Заявки</Typography>  
+                                        </ListItemButton>
+                                        <ListItemButton selected={SideBar.selectedIndex === 4} onClick={()=>SideBar.setSelectedIndexAction(4)}
+                                            sx={{ 
+                                                '&.Mui-selected':{
+                                                    backgroundColor : theme.palette.primary.dark,
+                                                    borderRadius: "4px",
+                                                },
+                                            }}
+                                            >
+                                            <ListItemIcon sx={{paddingLeft:"6px"}}>
+                                                <MenuBookOutlined sx={{color:"white"}} fontSize='large'/>
+                                            </ListItemIcon>
+                                            <Typography fontWeight={"bold"} sx={{paddingLeft:"8px"}} variant='h5'>Справочники</Typography>   
+                                        </ListItemButton>
+                                    </List>
+                                </Box>
+                            </Box>
+                            <Box textAlign={"center"} border={2} borderColor={theme.palette.primary.dark} borderRadius={2} marginBottom={"8px"}>
+                                <List component={"nav"}>
+                                    <ListItemButton>
+                                        <ListItemIcon sx={{paddingLeft:"6px"}}>
+                                            <SettingsApplicationsOutlined sx={{color:"white"}} fontSize='large'/>
+                                        </ListItemIcon>
+                                        <Typography fontWeight={"bold"} sx={{paddingLeft:"8px"}} variant='h5'>Настройки</Typography>  
+                                    </ListItemButton>
+                                    <ListItemButton>
+                                        <ListItemIcon sx={{paddingLeft:"6px"}}>
+                                            <HelpOutline sx={{color:"white"}} fontSize='large'/>
+                                        </ListItemIcon>
+                                        <Typography fontWeight={"bold"} sx={{paddingLeft:"8px"}} variant='h5'>Помощь</Typography> 
+                                    </ListItemButton>
+                                </List>
+                            </Box>
+                            
+                        </Box>
+                    </Sidebar>
+    )
+});
+export default MainMenu;