From a7a0afd55aae8a9a8ad5adc22d257d9ab92ed80e Mon Sep 17 00:00:00 2001
From: Alex-XAG <109016896+Alex-XAG@users.noreply.github.com>
Date: Sat, 16 Sep 2023 21:19:22 +0300
Subject: [PATCH] Style(SCSS) Code style edits. Header

---
 src/components/Header/Header.jsx              | 16 +++---
 src/components/Header/Header.styled.jsx       | 26 ++++++++-
 .../MobileMenu/MobileMenu.styled.jsx          |  3 +
 src/components/UserMenu/UserMenu.jsx          | 56 +++++++++----------
 src/components/UserMenu/UserMenu.styled.jsx   |  5 +-
 5 files changed, 67 insertions(+), 39 deletions(-)

diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index 05fd571..83e7385 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom';
-import { HeaderContainer } from './Header.styled';
+import { HeaderContainer, LogoLink, UserContainer } from './Header.styled';
 import { UserMenu } from '../UserMenu/UserMenu';
 import MobileMenu from '../MobileMenu/MobileMenu';
 import { MobileMenuButton } from '../MobileMenuButton/MobileMenuButton';
@@ -7,19 +7,21 @@ import { useState } from 'react';
 
 export const Header = () => {
   const [isOpen, setIsOpen] = useState(false);
-  const handleClick = () => {
+  const onClickMenuBtn = () => {
     setIsOpen({ isOpen: !isOpen });
   };
   return (
     <HeaderContainer>
-      <Link to="/">
+      <LogoLink to="/">
         <svg width={152} height={17}>
           <use href="../../../src/images/sprite.svg#icon-logo"></use>
         </svg>
-      </Link>
-      <UserMenu />
-      <MobileMenuButton onClick={handleClick} />
-      <MobileMenu isOpen={isOpen} />
+      </LogoLink>
+      <UserContainer>
+        <UserMenu />
+        <MobileMenuButton onClick={onClickMenuBtn} />
+        <MobileMenu isOpen={isOpen} />
+      </UserContainer>
     </HeaderContainer>
   );
 };
diff --git a/src/components/Header/Header.styled.jsx b/src/components/Header/Header.styled.jsx
index b4599be..6da2b2c 100644
--- a/src/components/Header/Header.styled.jsx
+++ b/src/components/Header/Header.styled.jsx
@@ -1,12 +1,34 @@
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
 export const HeaderContainer = styled.div`
   max-width: 1440px;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
-  padding: 10px;
+  padding: 0 18px;
   margin: 0 auto;
 
+  background-color: var('--black-color');
+
+  @media screen and (min-width: 768px) {
+    padding: 0 32px;
+  }
+
+  @media screen and (min-width: 1439px) {
+    padding: 0 96px;
+  }
+`;
+
+export const LogoLink = styled(Link)`
+  margin-right: auto;
+`;
+
+export const UserContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
   background-color: black;
 `;
diff --git a/src/components/MobileMenu/MobileMenu.styled.jsx b/src/components/MobileMenu/MobileMenu.styled.jsx
index c206923..8d91272 100644
--- a/src/components/MobileMenu/MobileMenu.styled.jsx
+++ b/src/components/MobileMenu/MobileMenu.styled.jsx
@@ -46,6 +46,9 @@ export const MenuWrapper = styled.div`
       transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
       opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
   }
+  @media screen and (min-width: 1440px) {
+    display: none;
+  }
 `;
 
 export const CloseButton = styled.button`
diff --git a/src/components/UserMenu/UserMenu.jsx b/src/components/UserMenu/UserMenu.jsx
index 117523a..1df8305 100644
--- a/src/components/UserMenu/UserMenu.jsx
+++ b/src/components/UserMenu/UserMenu.jsx
@@ -8,36 +8,36 @@ import {
   UserContainer,
   UserData,
 } from './UserMenu.styled';
-import { Container } from '../../styles/container';
+// import { Container } from '../../styles/container';
 
 export const UserMenu = () => {
   return (
-    <Container>
-      <UserContainer>
-        <Navigation>
-          <StyledLink to="/diary">Diary</StyledLink>
-          <StyledLink to="/products">Products</StyledLink>
-          <StyledLink to="/exercises">Exercises</StyledLink>
-        </Navigation>
-        <UserData>
-          <NavLink to="/profile">
-            <ProfileIcon width="28" height="28">
-              <use href="../../../src/images/sprite.svg#icon-settings"></use>
-            </ProfileIcon>
-          </NavLink>
-          <ImgAvatar
-            src="../../../src/images/0-default.jpg"
-            width={46}
-            height={46}
-          />
-          <LogoutLink to="/">
-            <span>Logout</span>
-            <svg width="20" height="20">
-              <use href="../../../src/images/sprite.svg#icon-log-out"></use>
-            </svg>
-          </LogoutLink>
-        </UserData>
-      </UserContainer>
-    </Container>
+    // <Container>
+    <UserContainer>
+      <Navigation>
+        <StyledLink to="/diary">Diary</StyledLink>
+        <StyledLink to="/products">Products</StyledLink>
+        <StyledLink to="/exercises">Exercises</StyledLink>
+      </Navigation>
+      <UserData>
+        <NavLink to="/profile">
+          <ProfileIcon width="28" height="28">
+            <use href="../../../src/images/sprite.svg#icon-settings"></use>
+          </ProfileIcon>
+        </NavLink>
+        <ImgAvatar
+          src="../../../src/images/0-default.jpg"
+          width={46}
+          height={46}
+        />
+        <LogoutLink to="/">
+          <span>Logout</span>
+          <svg width="20" height="20">
+            <use href="../../../src/images/sprite.svg#icon-log-out"></use>
+          </svg>
+        </LogoutLink>
+      </UserData>
+    </UserContainer>
+    // </Container>
   );
 };
diff --git a/src/components/UserMenu/UserMenu.styled.jsx b/src/components/UserMenu/UserMenu.styled.jsx
index 6c2ba87..c0d7c19 100644
--- a/src/components/UserMenu/UserMenu.styled.jsx
+++ b/src/components/UserMenu/UserMenu.styled.jsx
@@ -7,6 +7,7 @@ export const UserContainer = styled.div`
   align-items: center;
   padding: 10px;
   gap: 8px;
+
   background-color: var(--black-color);
 `;
 
@@ -16,7 +17,7 @@ export const Navigation = styled.nav`
   align-items: center;
   gap: 8px;
 
-  @media screen and (max-width: 768px) {
+  @media screen and (max-width: 1439px) {
     display: none;
   }
 `;
@@ -57,7 +58,7 @@ export const LogoutLink = styled(Link)`
 
   color: rgba(239, 237, 232, 1);
 
-  @media screen and (max-width: 768px) {
+  @media screen and (max-width: 1439px) {
     display: none;
   }
 `;