Merge pull request #4 from 001elijah/header

Header

.eslintrc.json

@@ -11,6 +11,7 @@
   "plugins": ["react"],
   "rules": {
     // suppress errors for missing 'import React' in files
-    "react/react-in-jsx-scope": "off"
+    "react/react-in-jsx-scope": "off",
+    "no-unused-vars": ["warn"]
   }
 }

package.json

@@ -14,6 +14,7 @@
     "modern-normalize": "^2.0.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-redux": "^8.1.0",
     "react-responsive": "^9.0.2",
     "react-router-dom": "^6.13.0",
     "react-scripts": "5.0.1",

src/components/App.jsx

@@ -3,11 +3,12 @@ import { HomePage } from 'pages/HomePage';
 import { BoardPage } from 'pages/BoardPage';
 import { WelcomePage } from 'pages/WelcomePage/WelcomePage';
 import AuthPage from '../pages/AuthPage/AuthPage';
+import { SharedLayout } from './SharedLayout/SharedLayout';
 
 export const App = () => {
   return (
     <>
-      {/* <SharedLayout /> */}
+      <SharedLayout />
       <Routes>
         <Route path="/" element={<WelcomePage />} />
         <Route path="auth/:id" element={<AuthPage />} />

src/components/Header/Header.jsx

@@ -0,0 +1,36 @@
+import { Container } from 'components/Container';
+import { UserInfo } from 'components/UserInfo/UserInfo';
+import s from './Header.module.scss';
+
+import icons from '../../assets/icons/sprite.svg';
+
+export const Header = () => {
+  return (
+    <header className={s.header}>
+      <Container>
+        <div className={s.pageHeader}>
+          <button onClick={() => {}} className={s.burgerMenu}>
+            <svg className={s.burgerIcon}>
+              <use href={`${icons}#icon-burger-menu`} stroke="white"></use>
+            </svg>
+          </button>
+
+          <div className={s.dropDown}>
+            <button className={s.dropBtn}>
+              Theme
+              <svg width="16" height="16">
+                <use href={`${icons}#icon-arrow-down`} stroke="white"></use>
+              </svg>
+            </button>
+            <div className={s.dropDownContent}>
+              <div onClick={() => {}}>Light</div>
+              <div onClick={() => {}}>Dark</div>
+              <div onClick={() => {}}>Violet</div>
+            </div>
+          </div>
+          <UserInfo />
+        </div>
+      </Container>
+    </header>
+  );
+};

src/components/Header/Header.module.scss

@@ -0,0 +1,104 @@
+@import '../../assets/styles/vars';
+
+.header {
+  background-color: $black-text-color;
+  width: 100%;
+
+  .pageHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 14px 20px;
+
+    .burgerMenu {
+      width: 24px;
+      height: 24px;
+      background-color: inherit;
+      border: none;
+
+      .burgerIcon {
+        width: 24px;
+        height: 24px;
+      }
+    }
+    .dropDown {
+      position: relative;
+      display: inline-block;
+      margin-left: auto;
+      margin-right: 14px;
+
+      .dropBtn {
+        display: flex;
+        align-items: center;
+        border: none;
+        background-color: inherit;
+        column-gap: 8px;
+        font-size: 14px;
+        letter-spacing: -0.02em;
+        color: $white-text-color;
+        opacity: 0.8;
+      }
+
+      .dropDownContent {
+        display: none;
+        position: absolute;
+        padding: 16px;
+        border-radius: 8px;
+        min-width: 100px;
+        background-color: $black-text-color;
+        z-index: 1;
+
+        & div {
+          cursor: pointer;
+          text-decoration: none;
+          display: block;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 1.5;
+          margin: 2px;
+          letter-spacing: -0.02em;
+          background-color: $black-text-color;
+          color: #fff;
+          opacity: 0.5;
+        }
+
+        & div:hover {
+          color: #bedbb0;
+        }
+      }
+
+      &:hover .dropDownContent {
+        display: block;
+      }
+    }
+  }
+}
+
+@include tablet {
+  .header {
+    .pageHeader {
+      padding: 18px 32px;
+
+      .burgerMenu {
+        width: 32px;
+        height: 32px;
+
+        .burgerIcon {
+          width: 32px;
+          height: 32px;
+        }
+      }
+    }
+  }
+}
+
+@include desktop {
+  .header {
+    .pageHeader {
+      padding: 18px 24px;
+      .burgerMenu {
+        display: none;
+      }
+    }
+  }
+}

src/components/SharedLayout/SharedLayout.jsx

@@ -1,11 +1,15 @@
-import { Header } from 'components/Header/Header';
+// import { Header } from 'components/Header/Header';
+// import { useSelector } from "react-redux";
 // import { Loader } from "components/Loader/Loader";
 
 export const SharedLayout = () => {
+  // const token = useSelector(state => state.auth?.token);
+
   return (
     <>
       {/* <Loader/> */}
-      <Header />
+
+      {/* {token && <Header />} */}
     </>
   );
 };

src/components/UserInfo/UserInfo.jsx

@@ -0,0 +1,18 @@
+// import { useSelector } from 'react-redux';
+import s from './UserInfo.module.scss';
+
+export const UserInfo = () => {
+  // const userName = useSelector(state => state.auth?.user?.name);
+  // const userAvatar = useSelector(state => state.auth?.user?.avatar);
+
+  return (
+    <div className={s.userInfo}>
+      <div className={s.name}>{'Name'}</div>
+      <img
+        className={s.avatar}
+        src="https://cdn.pixabay.com/photo/2023/05/20/16/48/dog-8006839_960_720.jpg"
+        alt="avatar"
+      />
+    </div>
+  );
+};