Merge pull request #19 from 001elijah/header

fix
001elijah · Jun 22, 2023 · ff71cdf · ff71cdf
2 parents a9d6b21 + 294db82
commit ff71cdf
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 39 deletions.
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import clsx from 'clsx';
 import { Container } from 'components/Container';
@@ -8,6 +9,12 @@ import s from './Header.module.scss';
 import icons from '../../assets/icons/sprite.svg';
 
 export const Header = () => {
+  const [showSidebar, setShowSidebar] = useState(false);
+
+  const toggleSidebar = () => {
+    setShowSidebar(prev => !prev);
+  };
+
   const theme = useSelector(selectorTheme);
   const dispatch = useDispatch();
 
@@ -16,46 +23,49 @@ export const Header = () => {
   };
 
   return (
-    <header className={clsx(s.header, s[theme])}>
-      <Container>
-        <div className={s.pageHeader}>
-          <button onClick={() => {}} className={s.burgerMenu}>
-            <svg className={clsx(s.burgerIcon, s[theme])}>
-              <use href={`${icons}#icon-burger-menu`}></use>
-            </svg>
-          </button>
-
-          <div className={s.dropDown}>
-            <button className={clsx(s.dropBtn, s[theme])}>
-              Theme
-              <svg className={clsx(s.arrowIcon, s[theme])}>
-                <use href={`${icons}#icon-arrow-down`}></use>
+    <>
+      <header className={clsx(s.header, s[theme])}>
+        <Container>
+          <div className={s.pageHeader}>
+            <button onClick={toggleSidebar} className={s.burgerMenu}>
+              <svg className={clsx(s.burgerIcon, s[theme])}>
+                <use href={`${icons}#icon-burger-menu`}></use>
               </svg>
             </button>
-            <div className={clsx(s.dropDownContent, s[theme])}>
-              <div
-                className={clsx(s.dropDownItem, s[theme])}
-                onClick={() => changeTheme('light')}
-              >
-                Light
-              </div>
-              <div
-                className={clsx(s.dropDownItem, s[theme])}
-                onClick={() => changeTheme('dark')}
-              >
-                Dark
-              </div>
-              <div
-                className={clsx(s.dropDownItem, s[theme])}
-                onClick={() => changeTheme('colorful')}
-              >
-                Colorful
+
+            <div className={s.dropDown}>
+              <button className={clsx(s.dropBtn, s[theme])}>
+                Theme
+                <svg className={clsx(s.arrowIcon, s[theme])}>
+                  <use href={`${icons}#icon-arrow-down`}></use>
+                </svg>
+              </button>
+              <div className={clsx(s.dropDownContent, s[theme])}>
+                <div
+                  className={clsx(s.dropDownItem, s[theme])}
+                  onClick={() => changeTheme('light')}
+                >
+                  Light
+                </div>
+                <div
+                  className={clsx(s.dropDownItem, s[theme])}
+                  onClick={() => changeTheme('dark')}
+                >
+                  Dark
+                </div>
+                <div
+                  className={clsx(s.dropDownItem, s[theme])}
+                  onClick={() => changeTheme('colorful')}
+                >
+                  Colorful
+                </div>
               </div>
             </div>
+            <UserInfo />
           </div>
-          <UserInfo />
-        </div>
-      </Container>
-    </header>
+        </Container>
+      </header>
+      {showSidebar && <div> SIDEBAR </div>}
+    </>
   );
 };
diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
@@ -19,7 +19,8 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 14px 20px;
+    padding-top: 14px;
+    padding-bottom: 14px;
 
     .burgerMenu {
       width: 24px;
@@ -53,6 +54,7 @@
         display: flex;
         align-items: center;
         border: none;
+        cursor: pointer;
         background-color: inherit;
         column-gap: 8px;
         font-size: 14px;
@@ -170,7 +172,8 @@
 @include tablet {
   .header {
     .pageHeader {
-      padding: 18px 32px;
+      padding-top: 18px;
+      padding-bottom: 18px;
 
       .burgerMenu {
         width: 32px;
@@ -188,7 +191,6 @@
 @include desktop {
   .header {
     .pageHeader {
-      padding: 18px 24px;
       .burgerMenu {
         display: none;
       }