стадия гнева

lab4/src/App.jsx

@@ -1,19 +1,24 @@
-import { Container } from 'react-bootstrap'
+import PropTypes from 'prop-types';
-import './App.css'
+import { Container } from 'react-bootstrap';
-import Navigation from './components/navigation/Navigation'
+import { Outlet } from 'react-router-dom';
-import { Outlet } from 'react-router-dom'
+import './App.css';
-import Footer from './components/footer/Footer'
+import Footer from './components/footer/Footer.jsx';
+import Navigation from './components/navigation/Navigation.jsx';
 
-function App() {
+const App = ({ routes }) => {
   return (
     <>
-      <Navigation></Navigation>
+      <Navigation routes={routes}></Navigation>
       <Container className='p-2' as="main" fluid>
         <Outlet />
       </Container>
       <Footer />
     </>
-  )
+  );
-}
+};
 
-export default App
+App.propTypes = {
+  routes: PropTypes.array,
+};
+
+export default App;

lab4/src/components/navigation/Navigation.css

@@ -1,37 +1,37 @@
-header .navbar {
+.my-navbar {
     background-color: #D9D9D9;
 }
 
 @media (min-width: 768px) {
-    header .navbar {
+    .my-navbar {
         height: 100px;
     }
 }
 
-header .nav-link:hover {
+.my-navbar {
     text-decoration: underline;
 }
 
 @media (max-width: 576px) {
-    header .navbar-brand img {
+    .my-navbar img {
         margin-left: 25px;
     }
 }
 
 @media (min-width: 577px) and (max-width: 992px) {
-    header .navbar-brand img {
+    .my-navbar img {
         margin-left: 25px;
     }
 }
 
 @media (min-width: 993px) and (max-width: 1200px) {
-    header .navbar-brand img {
+    .my-navbar img {
         margin-left: 150px;
     }
 }
 
 @media (min-width: 1201px) {
-    header .navbar-brand img {
+    .my-navbar img {
         margin-left: 235px;
     }
 }

lab4/src/components/navigation/Navigation.jsx

@@ -1,32 +1,39 @@
 import PropTypes from 'prop-types';
 import { Container, Nav, Navbar, Button } from 'react-bootstrap';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import './Navigation.css';
 
-const Navigation = () => {
+const Navigation = ({ routes }) => {
-    return (
+  const location = useLocation();
-        <header>
+  const indexPageLink = routes.filter((route) => route.index === false).shift();
-          <Navbar expand="md">
+  const pages = routes.filter((route) => Object.prototype.hasOwnProperty.call(route, 'title'));
-            <Container fluid>
+
-              <Navbar.Brand as={Link} to="/">
+  return (
-                <img src="./Images/logo.png" alt="logo" width="128" />
+    <header>
-              </Navbar.Brand>
+      <Navbar expand='md' bg='dark' data-bs-theme='dark' className='my-navbar'>
-              <Navbar.Toggle aria-controls="navbarNav" />
+        <Container fluid>
-              <Navbar.Collapse id="navbarNav">
+        <Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'}>
-                <Nav className="mr-auto">
+            <img src="./Images/logo.png" alt="logo" width="128" />
-                  <Nav.Link as={Link} to="index.html">Каталог</Nav.Link>
+        </Navbar.Brand>
-                  <Nav.Link as={Link} to="stock.html">Акции</Nav.Link>
+          <Navbar.Toggle aria-controls='main-navbar' />
-                  <Nav.Link as={Link} to="contacts.html">Контакты</Nav.Link>
+          <Navbar.Collapse id='main-navbar'>
-                </Nav>
+            <Nav className='me-auto link' activeKey={location.pathname}>
-                <Nav>
+            {
-                  <Button className="custom-btn" as={Link} to="personalAccountLogin.html">Войти</Button>
+                pages.map((page) =>
-                  <Button variant="warning" as={Link} to="basket.html">Корзина</Button>
+                    <Nav.Link as={Link} key={page.path} eventKey={page.path} to={page.path ?? '/'}>
-                </Nav>
+                        {page.title}
-              </Navbar.Collapse>
+                    </Nav.Link>)
-            </Container>
+            }
-          </Navbar>
+            </Nav>
-        </header>
+            <Nav>
-      );
+              <Button className="custom-btn" as={Link} to="personalAccountLogin.html">Войти</Button>
+              <Button variant="warning" as={Link} to="basket.html">Корзина</Button>
+            </Nav>
+          </Navbar.Collapse>
+        </Container>
+      </Navbar>
+    </header>
+  );
 };
 
 Navigation.propTypes = {

lab4/src/main.jsx

@@ -1,18 +1,38 @@
-import React from 'react'
+import 'bootstrap/dist/css/bootstrap.min.css';
-import ReactDOM from 'react-dom/client'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
-import App from './App.jsx'
+import App from './App.jsx';
-import './index.css'
+import './index.css';
-import Navigation from './components/navigation/Navigation.jsx';
 import ErrorPage from './pages/ErrorPage.jsx';
+import Index from './pages/index.jsx';
 
 const routes = [
   {
     index: true,
     path: '/',
-    element: <Navigation />,
+    element: <Index />,
     title: 'Главная страница',
   },
+  {
+    path: '/page2',
+    element: <Index />,
+    title: 'Вторая страница',
+  },
+  {
+    path: '/page3',
+    element: <Index />,
+    title: 'Третья страница',
+  },
+  {
+    path: '/page4',
+    element: <Index />,
+    title: 'Четвертая страница',
+  },
+  {
+    path: '/page-edit',
+    element: <Index />,
+  },
 ];
 
 const router = createBrowserRouter([

lab4/src/pages/index.jsx

@@ -0,0 +1,34 @@
+import { Link } from 'react-router-dom';
+
+const Index = () => {
+    return (
+        <>
+            <>
+                <h1>Пример web-страницы.</h1>
+                <h2>1. Структурные элементы</h2>
+                <p><b>Полужирное начертание <i>курсив</i></b></p>
+                <p>Абзац 2 <Link to="/Index">Ссылка</Link></p>
+                <h3>1.1. Списки</h3>
+                <p>
+                    Список маркированный:
+                </p>
+                <ul>
+                    <li><a href="/Index" target="_blank">
+                        Элемент списка 1</a></li>
+                    <li>Элемент списка 2</li>
+                    <li>...</li>
+                </ul>
+                <p>
+                    Список нумерованный:
+                </p>
+                <ol>
+                    <li>Элемент списка 1</li>
+                    <li>Элемент списка 2</li>
+                    <li>...</li>
+                </ol>
+            </>
+        </>
+    );
+};
+
+export default Index;