4_2
This commit is contained in:
parent
03bda473ce
commit
c4aa7e1f92
@ -1,5 +1,9 @@
|
||||
.my-footer {
|
||||
background-color: #9c9c9c;
|
||||
height: 32px;
|
||||
color: #fff;
|
||||
height: 100px;
|
||||
background-color: #c03000;
|
||||
}
|
||||
|
||||
.logos {
|
||||
height: 100px;
|
||||
width: auto;
|
||||
}
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -35,7 +35,7 @@
|
||||
font-size: 25px;
|
||||
align-items: center;
|
||||
}
|
||||
.nav-link {
|
||||
.me-auto-link {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
@ -1,14 +1,19 @@
|
||||
import {
|
||||
Navbar, Container, Nav, Form, FormControl, Button,
|
||||
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';
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<Navbar expand='lg' bg='dark' variant='dark' className='my-navbar'>
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const Navigation = ({ routes }) => {
|
||||
const location = useLocation();
|
||||
const pages = routes.filter((route) => Object.prototype.hasOwnProperty.call(route, 'title'));
|
||||
|
||||
return (
|
||||
<Navbar expand='lg' bg='dark' variant='dark' className='my-navbar'>
|
||||
<Container fluid>
|
||||
<Navbar.Brand as={Link} to='/'>
|
||||
<img className='logo pb-2' src='src/assets/big-logo.png' alt='Логотип' />
|
||||
@ -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>
|
||||
@ -37,7 +47,11 @@ const Header = () => {
|
||||
</Navbar.Collapse>
|
||||
</Container>
|
||||
</Navbar>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
Navigation.propTypes = {
|
||||
routes: PropTypes.array,
|
||||
};
|
||||
|
||||
export default Navigation;
|
||||
|
@ -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',
|
||||
|
Loading…
x
Reference in New Issue
Block a user