4_2

Lab4/PrBookfill/src/components/footer/Footer.css

@@ -1,5 +1,9 @@
 .my-footer {
-    background-color: #9c9c9c;
-    height: 32px;
-    color: #fff;
+    height: 100px;
+    background-color: #c03000;
+}
+
+.logos {
+    height: 100px;
+    width: auto;
 }

Lab4/PrBookfill/src/components/footer/Footer.jsx

@@ -1,11 +1,11 @@
 import './Footer.css';
 
 const Footer = () => {
-    const year = new Date().getFullYear();
-
     return (
-        <footer className="my-footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
-            Автор, {year}
+        <footer className="my-footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center w-100">
+            <div className="container">
+            <img className="logos ml-0" src="src/assets/logo.png" alt="Логотип" />
+        </div>
         </footer>
     );
 };

Lab4/PrBookfill/src/components/navigation/Navigation.css

@@ -35,7 +35,7 @@
     font-size: 25px;
     align-items: center;
 }
-.nav-link {
+.me-auto-link {
     text-decoration: none;
     color: white;
 }

Lab4/PrBookfill/src/components/navigation/Navigation.jsx

@@ -1,12 +1,17 @@
 import {
   Navbar, Container, Nav, Form, FormControl, Button,
 } from 'react-bootstrap';
-import './Navigation.css';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { FaSearch } from 'react-icons/fa';
+import './Navigation.css';
+
+import PropTypes from 'prop-types';
+
+const Navigation = ({ routes }) => {
+    const location = useLocation();
+    const pages = routes.filter((route) => Object.prototype.hasOwnProperty.call(route, 'title'));
 
-const Header = () => {
     return (
       <Navbar expand='lg' bg='dark' variant='dark' className='my-navbar'>
       <Container fluid>
@@ -27,9 +32,14 @@ const Header = () => {
                 <FaSearch />
               </Button>
             </Form>
-            <Nav.Link as={Link} to='/favour.html'>Favourite</Nav.Link>
-            <Nav.Link as={Link} to='/audio.html'>Audio</Nav.Link>
-            <Nav.Link as={Link} to='/comics.html'>Comics</Nav.Link>
+            <Nav className='me-auto-link' activeKey={location.pathname}>
+              {
+                pages.map((page) =>
+                  <Nav.Link as={Link} key={page.path} eventKey={page.path} to={page.path ?? '/'}>
+                    {page.title}
+                  </Nav.Link>)
+              }
+            </Nav>
             <Nav.Link as={Link} to='/login.html'>
               <img id='profile' className='user-photo mt-1 ml-4 mr-3' />
             </Nav.Link>
@@ -40,4 +50,8 @@ const Header = () => {
     );
 };
 
-export default Header;
+Navigation.propTypes = {
+    routes: PropTypes.array,
+};
+
+export default Navigation;

Lab4/PrBookfill/src/main.jsx

@@ -16,22 +16,21 @@ const routes = [
     index: true,
     path: '/',
     element: <Page1 />,
-    title: 'Главная страница',
   },
   {
     path: '/page2',
     element: <Page2 />,
-    title: 'Вторая страница',
+    title: 'Favourite',
   },
   {
     path: '/page3',
     element: <Page3 />,
-    title: 'Третья страница',
+    title: 'Audio',
   },
   {
     path: '/page4',
     element: <Page4 />,
-    title: 'Четвертая страница',
+    title: 'Comics',
   },
   {
     path: '/page-edit',