Merge pull request #4 from ViktorSvertoka/header

src/components/Header/Header.jsx

@@ -1,12 +1,12 @@
-import { HeaderContainer, Navigation, StyledLink } from './Header.styled';
+import { Link } from 'react-router-dom';
+import { HeaderContainer } from './Header.styled';
+import { UserMenu } from '../UserMenu/UserMenu';
 
 export const Header = () => {
   return (
     <HeaderContainer>
-      <Navigation>
-        <StyledLink to="/signup">SignUpPage</StyledLink>
-        <StyledLink to="/signin">SignInPage</StyledLink>
-      </Navigation>
+      <Link to="/">Logo</Link>
+      <UserMenu />
     </HeaderContainer>
   );
 };

src/components/Header/Header.styled.jsx

@@ -1,37 +1,12 @@
-import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
 export const HeaderContainer = styled.div`
-  padding: 10px;
-`;
-
-export const Navigation = styled.nav`
+  max-width: 1440px;
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
-`;
-
-export const StyledLink = styled(Link)`
-  padding: 8px 16px;
-  color: #ffffff; /* White text color */
-  text-shadow:
-    0 0 5px #00baff,
-    0 0 10px #00baff,
-    0 0 20px #00baff,
-    0 0 40px #00baff,
-    0 0 80px #00baff;
-  transition:
-    color 0.3s,
-    text-shadow 0.3s;
+  padding: 10px;
+  margin: 0 auto;
 
-  &:hover,
-  &:focus {
-    color: #00baff; /* Blue text color on hover/focus */
-    text-shadow:
-      0 0 5px #00baff,
-      0 0 10px #00baff,
-      0 0 20px #00baff,
-      0 0 40px #00baff,
-      0 0 80px #00baff;
-  }
+  background-color: black;
 `;

src/components/UserMenu/UserMenu.jsx

@@ -0,0 +1,27 @@
+import {
+  ImgAvatar,
+  Navigation,
+  StyledLink,
+  UserContainer,
+  UserData,
+} from './UserMenu.styled';
+
+export const UserMenu = () => {
+  return (
+    <UserContainer>
+      <Navigation>
+        <StyledLink to="/diary">Diary</StyledLink>
+        <StyledLink to="/products">Products</StyledLink>
+        <StyledLink to="/exercises">Exercises</StyledLink>
+      </Navigation>
+      <UserData>
+        <StyledLink to="/profile">Icon Settings</StyledLink>
+        <ImgAvatar src="/" width={46} height={46} />
+        <button type="button">
+          Log Out
+          {/* <svg /> */}
+        </button>
+      </UserData>
+    </UserContainer>
+  );
+};

src/components/UserMenu/UserMenu.styled.jsx

@@ -0,0 +1,45 @@
+import { NavLink } from 'react-router-dom';
+import styled from 'styled-components';
+
+export const UserContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+  gap: 8px;
+`;
+
+export const Navigation = styled.nav`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+`;
+
+export const StyledLink = styled(NavLink)`
+  padding: 10px 27px;
+  color: rgba(239, 237, 232, 1);
+
+  border: 1px solid rgba(239, 237, 232, 0.2);
+  border-radius: 12px;
+
+  &:hover,
+  :focus {
+    background-color: rgba(230, 83, 60, 1);
+  }
+`;
+
+export const ImgAvatar = styled.img`
+  display: inline-block;
+  border: 1px solid rgba(230, 83, 60, 1);
+  border-radius: 50%;
+`;
+
+export const UserData = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+
+  margin-left: 30px;
+`;