Tochka
/
legacy
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor Header.jsx

This commit is contained in:
b1ek 2023-05-08 14:29:42 +10:00
parent 995d4349fc
commit fee5d43007
Signed by: blek
GPG Key ID: 14546221E3595D0C
1 changed files with 25 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
pairent_frontend_react/src/components/Header/Header.jsx
View File

@ -1,9 +1,9 @@
import React from 'react'; import React from 'react';
import {Link} from "react-router-dom"; import { Link } from "react-router-dom";
import styled from 'styled-components'; import styled from 'styled-components';
import SVGIcon from '../UI/Icon/SVGIcon'; import SVGIcon from '../UI/Icon/SVGIcon';
import './styles/Header.css'; // import './styles/Header.css';
const HeaderElement = styled.header` const HeaderElement = styled.header`
display: flex; display: flex;
@ -38,7 +38,21 @@ const LocationButton = styled.button`
const PairentLogo = styled.h1` const PairentLogo = styled.h1`
user-select: none; 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 () { const Header = function () {
return ( return (
@ -58,29 +72,29 @@ const Header = function () {
</LocationButton> </LocationButton>
</Link> </Link>
</LogoSection> </LogoSection>
<nav> <Navbar>
<div> <NavButton>
<Link to="/favorites"> <Link to="/favorites">
<SVGIcon src='/images/icons/heart.svg' width='16' height='14' /> <SVGIcon src='/images/icons/heart.svg' width='16' height='14' />
Избранное Избранное
</Link> </Link>
</div> </NavButton>
<div> <NavButton>
<Link to="/comparisons"> <Link to="/comparisons">
<SVGIcon src='/images/icons/stats.svg' width='16' height='14' /> <SVGIcon src='/images/icons/stats.svg' width='16' height='14' />
Сравнения Сравнения
</Link> </Link>
</div> </NavButton>
<div> <NavButton>
<Link to="/"> <Link to="/">
<SVGIcon src='/images/icons/chat-bubble.svg' width='16' height='14' /> <SVGIcon src='/images/icons/chat-bubble.svg' width='16' height='14' />
Чаты Чаты
</Link> </Link>
</div> </NavButton>
<Link to="/"> <Link to="/">
<SVGIcon src='/images/icons/user.svg' width='32' height='32' /> <SVGIcon src='/images/icons/user.svg' width='32' height='32' />
</Link> </Link>
</nav> </Navbar>
</HeaderElement> </HeaderElement>
); );
} }