Merge pull request #18 from ViktorSvertoka/header-continue

Style(SCSS) Code style edits. Header
ViktorSvertoka · Sep 16, 2023 · 0ad366e · 0ad366e
2 parents a839bdc + a7a0afd
commit 0ad366e
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 39 deletions.
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
@@ -1,25 +1,27 @@
 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';
 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
@@ -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
@@ -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
@@ -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
@@ -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;
   }
 `;