Vyacheslav/internet-programming
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

стадия гнева

Browse Source
This commit is contained in:
Вячеслав Иванов 2023-11-14 21:31:43 +04:00
parent da6e065010
commit 231d8fea1f
5 changed files with 114 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
lab4/src/App.jsx
View File

@ -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;

14
lab4/src/components/navigation/Navigation.css
View File

@ -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;
}
}

57
lab4/src/components/navigation/Navigation.jsx
View File

@ -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 = {

32
lab4/src/main.jsx
View File

@ -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([

34
lab4/src/pages/index.jsx Normal file
View File

@ -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;