refactor Header.jsx
This commit is contained in:
parent
995d4349fc
commit
fee5d43007
|
@ -1,9 +1,9 @@
|
|||
import React from 'react';
|
||||
import {Link} from "react-router-dom";
|
||||
import { Link } from "react-router-dom";
|
||||
import styled from 'styled-components';
|
||||
import SVGIcon from '../UI/Icon/SVGIcon';
|
||||
|
||||
import './styles/Header.css';
|
||||
// import './styles/Header.css';
|
||||
|
||||
const HeaderElement = styled.header`
|
||||
display: flex;
|
||||
|
@ -38,7 +38,21 @@ const LocationButton = styled.button`
|
|||
|
||||
const PairentLogo = styled.h1`
|
||||
user-select: none;
|
||||
`
|
||||
`;
|
||||
|
||||
const NavButton = styled.div`
|
||||
& a:hover {
|
||||
color: #0050A1;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
`;
|
||||
const Navbar = styled.nav`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
& ${NavButton} {
|
||||
margin-right: 55px
|
||||
}
|
||||
`;
|
||||
|
||||
const Header = function () {
|
||||
return (
|
||||
|
@ -58,29 +72,29 @@ const Header = function () {
|
|||
</LocationButton>
|
||||
</Link>
|
||||
</LogoSection>
|
||||
<nav>
|
||||
<div>
|
||||
<Navbar>
|
||||
<NavButton>
|
||||
<Link to="/favorites">
|
||||
<SVGIcon src='/images/icons/heart.svg' width='16' height='14' />
|
||||
Избранное
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
</NavButton>
|
||||
<NavButton>
|
||||
<Link to="/comparisons">
|
||||
<SVGIcon src='/images/icons/stats.svg' width='16' height='14' />
|
||||
Сравнения
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
</NavButton>
|
||||
<NavButton>
|
||||
<Link to="/">
|
||||
<SVGIcon src='/images/icons/chat-bubble.svg' width='16' height='14' />
|
||||
Чаты
|
||||
</Link>
|
||||
</div>
|
||||
</NavButton>
|
||||
<Link to="/">
|
||||
<SVGIcon src='/images/icons/user.svg' width='32' height='32' />
|
||||
</Link>
|
||||
</nav>
|
||||
</Navbar>
|
||||
</HeaderElement>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue