You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
7.0 KiB
107 lines
7.0 KiB
5 months ago
|
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;
|