added new feature

package.json

@@ -23,6 +23,7 @@
     "redux-thunk": "^3.1.0"
   },
   "devDependencies": {
+    "@types/css-modules": "^1.0.5",
     "@types/node": "^20",
     "@types/react": "^18.2.64",
     "@types/react-dom": "^18.2.21",

src/components/authenticationButton/AuthenticationButton.component.tsx

@@ -1,12 +1,17 @@
 import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 
 import { SvgLoginIcon, SvgSignUpIcon } from '@/components/svgAuthentication/SvgAuthentication.component.tsx';
+import { setBurgerOpen } from '@/store/reducers/burger';
+import { openBurgerMenu } from '@/store/selector';
 
 import styles from './AuthenticationButton.module.css';
 
 export const Logout = () => {
     const navigate = useNavigate();
+    const dispatch = useDispatch();
+    const burgerOpen = useSelector(openBurgerMenu);
     const logout = () => {
         sessionStorage.removeItem('accessToken');
         sessionStorage.removeItem('refreshToken');
@@ -16,35 +21,57 @@ export const Logout = () => {
         }
     };
     return (
-        <button className={styles.logout} onClick={logout}>
-            <SvgLoginIcon />
+        <button
+            className={styles.logout}
+            onClick={() => {
+                dispatch(setBurgerOpen(!burgerOpen));
+                logout();
+            }}
+        >
+            {window.screen.width >= 680 && <SvgLoginIcon />}
             Log out
         </button>
     );
 };
 
 export const SignUpButton = () => {
     const navigate = useNavigate();
+    const dispatch = useDispatch();
+    const burgerOpen = useSelector(openBurgerMenu);
     return (
-        <button className={styles.signUp} onClick={() => navigate('signUp')}>
-            <SvgSignUpIcon />
+        <button
+            className={styles.signUp}
+            onClick={() => {
+                navigate('signUp');
+                dispatch(setBurgerOpen(!burgerOpen));
+            }}
+        >
+            {window.screen.width >= 680 && <SvgSignUpIcon />}
             Sign up
         </button>
     );
 };
 
 export const SignUpInActive = () => (
     <button className={styles.signUpInActive} disabled>
-        <SvgSignUpIcon />
+        {window.screen.width >= 680 && <SvgSignUpIcon />}
         Sign up
     </button>
 );
 
 export const LoginButton = () => {
     const navigate = useNavigate();
+    const dispatch = useDispatch();
+    const burgerOpen = useSelector(openBurgerMenu);
     return (
-        <button className={styles.loginIn} onClick={() => navigate('login')}>
-            <SvgLoginIcon />
+        <button
+            className={styles.loginIn}
+            onClick={() => {
+                navigate('login');
+                dispatch(setBurgerOpen(!burgerOpen));
+            }}
+        >
+            {window.screen.width >= 680 && <SvgLoginIcon />}
             Login
         </button>
     );

src/components/authenticationButton/AuthenticationButton.module.css

@@ -31,3 +31,19 @@
 .loginIn {
   background-color: var(--bg-secondary-dark);
 }
+
+@media (max-width: 680px) {
+
+  .logout, .loginIn, .signUp {
+    border: unset;
+    background-color: unset;
+    color: var(--txt-primary);
+    font-size: 22px;
+    font-weight: 400;
+    line-height: 32px;
+  }
+
+  .signUpInActive {
+    display: none;
+  }
+}

src/components/burgerMenu/BurgerMenu.component.tsx

@@ -0,0 +1,13 @@
+import { Navigation } from '@/components/navigation/Navigation.component.tsx';
+import { SwitcherTheme } from '@/components/switherTheme/SwitcherTheme.component.tsx';
+import { UserAuthorization } from '@/components/userAuthorization/UserAuthorization.component.tsx';
+
+import styles from './burgerMenu.module.css';
+
+export const BurgerMenu = () => (
+    <div className={styles.burgerMenu}>
+        <Navigation location={'burger'} />
+        <UserAuthorization location={'burger'} />
+        <SwitcherTheme location={'burger'} />
+    </div>
+);

src/components/burgerMenu/burgerMenu.module.css

@@ -0,0 +1,21 @@
+.burgerMenu {
+  display: none;
+}
+
+@media (max-width: 680px) {
+
+  .burgerMenu {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    background-color: var(--bg-primary);
+    width: 100%;
+    height: 100vh;
+    position: fixed;
+    top: 80px;
+    left: 0;
+    z-index: 2;
+    gap: 30px;
+    padding-top: 130px;
+  }
+}

src/components/cart/Cart.component.tsx

@@ -14,6 +14,7 @@ interface CartProps {
 
 export const Cart: React.FC<CartProps> = ({ isHeader }) => {
     const navigate = useNavigate();
+
     const [hasCount, setCount] = useState(false);
     const addCountCircle = () => {
         setCount(!hasCount);

src/components/cartPage/CartPage.component.tsx

@@ -1,6 +1,6 @@
 import styles from './cartPage.module.css';
 export const CartPage = () => (
     <div className={styles.cartPageContainer}>
-        <h2>Future cart page</h2>
+        <h2 className={styles.mainText}>Opps...Unfortunately, this page is not yet available, but we are working on it</h2>
     </div>
 );

src/components/cartPage/cartPage.module.css

@@ -1,3 +1,12 @@
 .cartPageContainer {
-  height: 100vh;
+  font-family: inherit;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.mainText {
+  height: 80vh;
+  margin: 100px 20px;
+  text-align: center;
 }

src/components/header/Header.component.tsx

@@ -1,94 +1,43 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { NavLink } from 'react-router-dom';
 
 import { clsx } from 'clsx';
 
 import logoMA from '@/assets/img/headerImg/logoMA.png';
-import { LoginButton, Logout, SignUpButton, SignUpInActive } from '@/components/authenticationButton/AuthenticationButton.component.tsx';
+import { BurgerMenu } from '@/components/burgerMenu/BurgerMenu.component.tsx';
 import { Cart } from '@/components/cart/Cart.component.tsx';
-import { SvgDarkThemeIcon, SvgLightThemeIcon } from '@/components/svgTheme/SvgTheme.component.tsx';
-import { setTheme } from '@/store/reducers/theme';
-import { selectedTheme } from '@/store/selector';
+import { Navigation } from '@/components/navigation/Navigation.component.tsx';
+import { SwitcherTheme } from '@/components/switherTheme/SwitcherTheme.component.tsx';
+import { UserAuthorization } from '@/components/userAuthorization/UserAuthorization.component.tsx';
+import { setBurgerOpen } from '@/store/reducers/burger';
+import { openBurgerMenu } from '@/store/selector';
 
 import styles from './header.module.css';
 
-export const HeaderComponent: React.FC = () => {
+export const HeaderComponent = () => {
     const dispatch = useDispatch();
-    const activeTheme = useSelector(selectedTheme);
-    const [isAuthorizedUser, setAuthorizedUser] = useState(false);
-
+    const burgerOpen = useSelector(openBurgerMenu);
     useEffect(() => {
-        const accessToken = sessionStorage.getItem('accessToken');
-        if (accessToken === null) {
-            setAuthorizedUser(false);
-        } else {
-            setAuthorizedUser(true);
-        }
-    }, [isAuthorizedUser]);
+        document.body.style.overflow = burgerOpen ? 'hidden' : 'auto';
 
-    const changeTheme = (theme: string) => {
-        dispatch(setTheme(theme));
-        localStorage.setItem('themeUser', theme);
-    };
+        return () => {
+            document.body.style.overflow = 'auto';
+        };
+    }, [burgerOpen]);
     return (
         <header className={styles.header}>
             <img className={styles.logoMA} src={logoMA} alt="Logo Masters academy" />
-            <div className={styles.switcherTheme}>
-                <button
-                    className={clsx(styles.themeDayBtn, { [styles.activeTheme]: activeTheme === 'light' })}
-                    onClick={() => {
-                        changeTheme('light');
-                        localStorage.setItem('themeUser', 'light');
-                    }}
-                >
-                    <SvgLightThemeIcon activeTheme={activeTheme} />
-                </button>
-                <div className={styles.vertLine}></div>
-                <button
-                    className={clsx(styles.themeNightBtn, { [styles.activeTheme]: activeTheme === 'dark' })}
-                    onClick={() => {
-                        changeTheme('dark');
-                        localStorage.setItem('themeUser', 'dark');
-                    }}
-                >
-                    <SvgDarkThemeIcon activeTheme={activeTheme} />
-                </button>
-            </div>
-            <nav>
-                <ul className={styles.navMenu}>
-                    <li className={styles.menuItem}>
-                        <NavLink className={({ isActive }) => clsx(styles.menuBtn, { [styles.activePage]: isActive })} to="/">
-                            About
-                        </NavLink>
-                    </li>
-                    <li className={styles.menuItem}>
-                        <NavLink className={({ isActive }) => clsx(styles.menuBtn, { [styles.activePage]: isActive })} to="/products">
-                            Products
-                        </NavLink>
-                    </li>
-                </ul>
-            </nav>
+            <SwitcherTheme location={'header'} />
+            <Navigation location={'header'} />
             <div className={styles.accountOptions}>
                 <Cart isHeader />
-                <div className={styles.userAuthorization}>
-                    {isAuthorizedUser ? (
-                        <>
-                            <Logout />
-                            <SignUpInActive />
-                        </>
-                    ) : (
-                        <>
-                            <LoginButton />
-                            <SignUpButton />
-                        </>
-                    )}
-                </div>
-                <div className={styles.burgerMenu}>
-                    <div className={styles.burgerLine} />
-                    <div className={styles.burgerLine} />
-                </div>
+                <UserAuthorization location={'header'} />
+                <button onClick={() => dispatch(setBurgerOpen(!burgerOpen))} className={styles.burgerMenu}>
+                    <div className={clsx(styles.burgerLineUp, { [styles.burgerLineUpActive]: burgerOpen === true })} />
+                    <div className={clsx(styles.burgerLineDown, { [styles.burgerLineDownActive]: burgerOpen === true })} />
+                </button>
             </div>
+            {burgerOpen && <BurgerMenu />}
         </header>
     );
 };