119 lines
4.5 KiB
TypeScript
119 lines
4.5 KiB
TypeScript
import AppBar from '@mui/material/AppBar';
|
||
import Toolbar from '@mui/material/Toolbar';
|
||
import { styled } from '@mui/material/styles';
|
||
import Container from '@mui/material/Container';
|
||
import Typography from '@mui/material/Typography';
|
||
import Box from '@mui/material/Box';
|
||
import Button from '@mui/material/Button';
|
||
import IconButton from '@mui/material/IconButton';
|
||
import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
|
||
import MenuItem from '@mui/material/MenuItem';
|
||
import Drawer from '@mui/material/Drawer';
|
||
import MenuIcon from '@mui/icons-material/Menu';
|
||
import MenuList from '@mui/material/MenuList';
|
||
import { Link } from 'react-router-dom';
|
||
|
||
import { useState } from 'react';
|
||
|
||
|
||
const StyledToolbar = styled(Toolbar)(({ theme }) => ({
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
flexShrink: 0,
|
||
borderRadius: `calc(${theme.shape.borderRadius}px + 8px)`,
|
||
border: '1px solid',
|
||
borderColor: theme.palette.divider,
|
||
padding: '8px 12px',
|
||
}));
|
||
|
||
|
||
const StyledMenuItem = styled(MenuItem)(({ }) => ({
|
||
'&.Mui-selected': {
|
||
backgroundColor: '#1976d2',
|
||
color: "white",
|
||
},
|
||
'&.Mui-selected:hover': {
|
||
backgroundColor: '#11579c',
|
||
color: "white",
|
||
},
|
||
'&:hover': {
|
||
backgroundColor: 'rgba(69, 146, 223, 0.45)',
|
||
},
|
||
|
||
}));
|
||
interface ComponentProps {
|
||
active: string;
|
||
}
|
||
|
||
function NavBar({ active }: ComponentProps) {
|
||
const [open, setOpen] = useState(false);
|
||
|
||
const toggleDrawer = (newOpen: boolean) => () => {
|
||
setOpen(newOpen);
|
||
};
|
||
return (
|
||
<AppBar
|
||
position="static"
|
||
sx={{
|
||
boxShadow: 0,
|
||
bgcolor: 'transparent',
|
||
mt: '28px',
|
||
}}
|
||
>
|
||
<Container maxWidth="xl">
|
||
<StyledToolbar>
|
||
<Typography variant="h6" sx={{ color: '#5d8aa8' }}>
|
||
Самые высокие здания и сооружения
|
||
</Typography>
|
||
<Box sx={{ display: { xs: 'none', md: 'flex' } }}>
|
||
<Link to="/">
|
||
<Button variant={active == '1' ? 'contained' : 'text'} color="info" size="medium">
|
||
Главная
|
||
</Button>
|
||
</Link>
|
||
<Link to="/list">
|
||
<Button variant={active == '2' ? 'contained' : 'text'} color="info" size="medium">
|
||
Список зданий
|
||
</Button>
|
||
</Link>
|
||
<Link to="/chart">
|
||
<Button variant={active == '3' ? 'contained' : 'text'} color="info" size="medium">
|
||
Контакты
|
||
</Button>
|
||
</Link>
|
||
|
||
</Box>
|
||
<Box sx={{ display: { xs: 'flex', md: 'none' } }}>
|
||
<IconButton aria-label="Menu button" onClick={toggleDrawer(true)}>
|
||
<MenuIcon />
|
||
</IconButton>
|
||
<Drawer
|
||
anchor="top"
|
||
open={open}
|
||
onClose={toggleDrawer(false)}
|
||
>
|
||
<Box>
|
||
<IconButton onClick={toggleDrawer(false)}>
|
||
<CloseRoundedIcon />
|
||
</IconButton>
|
||
</Box>
|
||
<MenuList>
|
||
<Link style={{ textDecoration: 'none' }} to="/">
|
||
<StyledMenuItem selected={active == '1'}> Главная </StyledMenuItem>
|
||
</Link>
|
||
<Link style={{ textDecoration: 'none' }} to="/list">
|
||
<StyledMenuItem selected={active == '2'}>Список зданий</StyledMenuItem>
|
||
</Link>
|
||
<Link style={{ textDecoration: 'none' }} to="/chart">
|
||
<StyledMenuItem selected={active == '3'}>Диаграммы</StyledMenuItem>
|
||
</Link>
|
||
</MenuList>
|
||
</Drawer>
|
||
</Box>
|
||
</StyledToolbar>
|
||
</Container>
|
||
</AppBar>
|
||
);
|
||
}
|
||
export default NavBar; |