From fee5d430075ab51022c7b9301dcc5c24f9b8ea02 Mon Sep 17 00:00:00 2001
From: b1ek <me@blek.codes>
Date: Mon, 8 May 2023 14:29:42 +1000
Subject: [PATCH] refactor Header.jsx

---
 .../src/components/Header/Header.jsx          | 36 +++++++++++++------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/pairent_frontend_react/src/components/Header/Header.jsx b/pairent_frontend_react/src/components/Header/Header.jsx
index 8fadde6..b4cceb3 100644
--- a/pairent_frontend_react/src/components/Header/Header.jsx
+++ b/pairent_frontend_react/src/components/Header/Header.jsx
@@ -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> 
     );
 }