added react router (p4/8) done for lab

labs/lab7/src/components/Navbar.tsx

@@ -11,6 +11,7 @@ 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';
 
@@ -27,12 +28,12 @@ const StyledToolbar = styled(Toolbar)(({ theme }) => ({
 }));
 
 
-const StyledMenuItem =styled(MenuItem)(({}) => ({
+const StyledMenuItem = styled(MenuItem)(({ }) => ({
     '&.Mui-selected': {
         backgroundColor: '#1976d2',
         color: "white",
     },
-     '&.Mui-selected:hover': {
+    '&.Mui-selected:hover': {
         backgroundColor: '#11579c',
         color: "white",
     },
@@ -66,15 +67,20 @@ function NavBar({ active }: ComponentProps) {
                         Самые высокие здания и сооружения
                     </Typography>
                     <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
-                        <Button variant={active == '1' ? 'contained' : 'text'} color="info" size="medium">
-                            Главная
-                        </Button>
-                        <Button variant={active == '2' ? 'contained' : 'text'} color="info" size="medium">
-                            Список зданий
-                        </Button>
+                        <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>
                         <Button variant={active == '3' ? 'contained' : 'text'} color="info" size="medium">
                             Контакты
                         </Button>
+
                     </Box>
                     <Box sx={{ display: { xs: 'flex', md: 'none' } }}>
                         <IconButton aria-label="Menu button" onClick={toggleDrawer(true)}>
@@ -91,8 +97,12 @@ function NavBar({ active }: ComponentProps) {
                                 </IconButton>
                             </Box>
                             <MenuList>
-                                <StyledMenuItem selected={active == '1'}> Главная </StyledMenuItem>
-                                <StyledMenuItem selected={active == '2'}>Список зданий</StyledMenuItem>
+                                <Link to="/">
+                                    <StyledMenuItem selected={active == '1'}> Главная </StyledMenuItem>
+                                </Link>
+                                <Link to="/list">
+                                    <StyledMenuItem selected={active == '2'}>Список зданий</StyledMenuItem>
+                                </Link>
                                 <StyledMenuItem selected={active == '3'}>Контакты</StyledMenuItem>
                             </MenuList>
                         </Drawer>