From 231d8fea1fae337d9f809095b3db9b536c8934b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=92=D1=8F=D1=87=D0=B5=D1=81=D0=BB=D0=B0=D0=B2=20=D0=98?=
 =?UTF-8?q?=D0=B2=D0=B0=D0=BD=D0=BE=D0=B2?= <Vyacheslavivanov1234@mail.ru>
Date: Tue, 14 Nov 2023 21:31:43 +0400
Subject: [PATCH] =?UTF-8?q?=D1=81=D1=82=D0=B0=D0=B4=D0=B8=D1=8F=20=D0=B3?=
 =?UTF-8?q?=D0=BD=D0=B5=D0=B2=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lab4/src/App.jsx                              | 25 ++++----
 lab4/src/components/navigation/Navigation.css | 14 ++---
 lab4/src/components/navigation/Navigation.jsx | 57 +++++++++++--------
 lab4/src/main.jsx                             | 32 +++++++++--
 lab4/src/pages/index.jsx                      | 34 +++++++++++
 5 files changed, 114 insertions(+), 48 deletions(-)
 create mode 100644 lab4/src/pages/index.jsx

diff --git a/lab4/src/App.jsx b/lab4/src/App.jsx
index 7c7b6c4..63089b5 100644
--- a/lab4/src/App.jsx
+++ b/lab4/src/App.jsx
@@ -1,19 +1,24 @@
-import { Container } from 'react-bootstrap'
-import './App.css'
-import Navigation from './components/navigation/Navigation'
-import { Outlet } from 'react-router-dom'
-import Footer from './components/footer/Footer'
+import PropTypes from 'prop-types';
+import { Container } from 'react-bootstrap';
+import { Outlet } from 'react-router-dom';
+import './App.css';
+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;
diff --git a/lab4/src/components/navigation/Navigation.css b/lab4/src/components/navigation/Navigation.css
index 127039a..4c156b0 100644
--- a/lab4/src/components/navigation/Navigation.css
+++ b/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;
     }
 }
\ No newline at end of file
diff --git a/lab4/src/components/navigation/Navigation.jsx b/lab4/src/components/navigation/Navigation.jsx
index 0fa8815..bcd71cd 100644
--- a/lab4/src/components/navigation/Navigation.jsx
+++ b/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 = () => {
-    return (
-        <header>
-          <Navbar expand="md">
-            <Container fluid>
-              <Navbar.Brand as={Link} to="/">
-                <img src="./Images/logo.png" alt="logo" width="128" />
-              </Navbar.Brand>
-              <Navbar.Toggle aria-controls="navbarNav" />
-              <Navbar.Collapse id="navbarNav">
-                <Nav className="mr-auto">
-                  <Nav.Link as={Link} to="index.html">Каталог</Nav.Link>
-                  <Nav.Link as={Link} to="stock.html">Акции</Nav.Link>
-                  <Nav.Link as={Link} to="contacts.html">Контакты</Nav.Link>
-                </Nav>
-                <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>
-      );
+const Navigation = ({ routes }) => {
+  const location = useLocation();
+  const indexPageLink = routes.filter((route) => route.index === false).shift();
+  const pages = routes.filter((route) => Object.prototype.hasOwnProperty.call(route, 'title'));
+
+  return (
+    <header>
+      <Navbar expand='md' bg='dark' data-bs-theme='dark' className='my-navbar'>
+        <Container fluid>
+        <Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'}>
+            <img src="./Images/logo.png" alt="logo" width="128" />
+        </Navbar.Brand>
+          <Navbar.Toggle aria-controls='main-navbar' />
+          <Navbar.Collapse id='main-navbar'>
+            <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>
+              <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 = {
diff --git a/lab4/src/main.jsx b/lab4/src/main.jsx
index d557097..75e6a39 100644
--- a/lab4/src/main.jsx
+++ b/lab4/src/main.jsx
@@ -1,18 +1,38 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
+import 'bootstrap/dist/css/bootstrap.min.css';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
-import App from './App.jsx'
-import './index.css'
-import Navigation from './components/navigation/Navigation.jsx';
+import App from './App.jsx';
+import './index.css';
 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([
diff --git a/lab4/src/pages/index.jsx b/lab4/src/pages/index.jsx
new file mode 100644
index 0000000..ee678ca
--- /dev/null
+++ b/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;