fix-1 enhancement_341_header_adaptive

Studio-Yandex-Practicum · May 6, 2024 · 7bab90c · 7bab90c
1 parent 6c7eb7e
commit 7bab90c
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 55 deletions.
diff --git a/src/assets/icons/iconSearch.svg b/src/assets/icons/iconSearch.svg
diff --git a/src/assets/images/header/iconSearch.svg b/src/assets/images/header/iconSearch.svg
diff --git a/src/entities/HeaderAccount/HeaderAccount.tsx b/src/entities/HeaderAccount/HeaderAccount.tsx
@@ -1,7 +1,7 @@
 import { FC, lazy, useState, Suspense, useEffect } from 'react'
 import { useSelector } from 'react-redux'
 
-import SearchIcon from '@/assets/images/header/iconSearch.svg'
+import SearchIcon from '@/assets/icons/iconSearch.svg'
 import { getUserAuthStatus } from '@/features/login/model/selectors/getUserAuthStatus'
 import { logout } from '@/features/login/model/services/logout/logout'
 import { loginActions } from '@/features/login/model/slice/loginSlice'
@@ -16,6 +16,7 @@ import { useResize } from '@/shared/libs/hooks/useResize'
 import { Button } from '@/shared/ui/Button/Button'
 import Link from '@/shared/ui/Link/Link'
 import Modal from '@/shared/ui/Modal/Modal'
+import Paragraph from '@/shared/ui/Paragraph/Paragraph'
 import Spinner from '@/shared/ui/Spinner/Spinner'
 
 import styles from './headerAccount.module.scss'
@@ -72,29 +73,29 @@ const HeaderAccount: FC<HeaderAccountProps> = ({ counter, total }) => {
           </Suspense>
         </Modal>
       )}
-      <ul className={isScreenLg ? `${styles.header__cartWrapper}` : `${styles.header__cartWrapperMobile}`}>
-        {!isScreenLg && <SearchIcon />}
+      <ul className={isScreenLg ? `${styles.headerAccount}` : `${styles.headerAccount__mobile}`}>
+        {!isScreenLg && <SearchIcon className={styles.headerAccount__search} />}
         <li>
           {/* Временная реализация
           TODO заменить на дропдаун на ховер в контекстном меню добавить пункт-кнопку для разлогина пока висит на иконке */}
           <Button
             onClick={isAuth ? onLogout : handlePersonIconClick}
-            className={isScreenLg ? `${styles.header__cart}` : `${styles.header__cartMobile}`}>
+            className={isScreenLg ? `${styles.headerAccount__cart}` : `${styles.headerAccount__cartMobile}`}>
             {isAuth ? <PersonAuthIcon /> : <PersonIcon />}
           </Button>
         </li>
 
         {isScreenLg && (
           <li>
-            <Link to={Routes.COMPARE} className={styles.header__cart}>
+            <Link to={Routes.COMPARE} className={styles.headerAccount__cart}>
               <ScalesIcon />
             </Link>
           </li>
         )}
 
         {isScreenLg && (
           <li>
-            <Link to={Routes.FAVORITES} className={styles.header__cart}>
+            <Link to={Routes.FAVORITES} className={styles.headerAccount__cart}>
               <HeartIcon />
             </Link>
           </li>
@@ -103,15 +104,15 @@ const HeaderAccount: FC<HeaderAccountProps> = ({ counter, total }) => {
         <li>
           <Link
             to={Routes.CART}
-            className={isScreenLg ? `${styles.header__cart}` : `${styles.header__cartMobile}`}>
+            className={isScreenLg ? `${styles.headerAccount__cart}` : `${styles.headerAccount__cartMobile}`}>
             <CartIcon />
             {isScreenLg && (
-              <div className={styles['header__cart-container']}>
-                <div className={styles['header__counter-container']}>
-                  <p className={styles['header__cart-total-text']}>Корзина</p>
-                  <p className={styles['header__cart-counter']}>{counter}</p>
+              <div className={styles.headerAccount__cartContainer}>
+                <div className={styles.headerAccount__counterContainer}>
+                  <Paragraph className={styles.headerAccount__cartTotalText}>Корзина</Paragraph>
+                  <Paragraph className={styles.headerAccount__cartCounter}>{counter}</Paragraph>
                 </div>
-                <p className={styles['header__cart-total']}>{total}</p>
+                <Paragraph className={styles.headerAccount__cartTotal}>{total}</Paragraph>
               </div>
             )}
           </Link>

diff --git a/src/entities/HeaderAccount/headerAccount.module.scss b/src/entities/HeaderAccount/headerAccount.module.scss
@@ -1,6 +1,25 @@
 @use '../../shared/styles/utils/variables' as var;
 
-.header {
+.headerAccount {
+  grid-area: account;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+
+  &__mobile {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+  }
+
+  &__search {
+    cursor: pointer;
+
+    &:active {
+      transform: scale(0.9);
+    }
+  }
+
   &__cart {
     display: flex;
     justify-content: center;
@@ -10,10 +29,10 @@
     border-radius: 5px;
     padding: 10px;
     transition: border 0.25s;
-  }
 
-  &__cart:hover {
-    border: 1px solid var.$white;
+    &:hover {
+      border: 1px solid var.$white;
+    }
   }
 
   &__cartMobile {
@@ -22,54 +41,41 @@
     align-items: center;
     padding: 0;
     cursor: pointer;
-    transition: 0.25s;
+
+    &:active {
+      transform: scale(0.9);
+    }
   }
 
-  &__cart-container {
+  &__cartContainer {
     display: flex;
     flex-direction: column;
     margin-left: 10px;
     row-gap: 5px;
   }
 
-  &__cart-counter {
-    margin: 0;
-    padding: 0;
-    font-weight: 600;
+  &__cartCounter {
+    line-height: 14px;
     font-size: 14px;
+    font-weight: 600;
     color: var.$header-color;
   }
 
-  &__cart-total {
-    margin: 0;
-    padding: 0;
-    font-weight: 600;
+  &__cartTotal {
+    line-height: 13px;
     font-size: 13px;
+    font-weight: 600;
     color: var.$white;
   }
 
-  &__cart-total-text {
-    margin: 0;
-    padding: 0;
+  &__cartTotalText {
+    line-height: 13px;
+    font-size: 13px;
     font-weight: 600;
-    font-size: 14px;
     color: var.$header-color;
   }
 
-  &__cartWrapper {
-    grid-area: account;
-    display: flex;
-    align-items: center;
-    gap: 5px;
-  }
-
-  &__cartWrapperMobile {
-    display: flex;
-    align-items: center;
-    gap: 24px;
-  }
-
-  &__counter-container {
+  &__counterContainer {
     display: flex;
     column-gap: 5px;
   }

diff --git a/src/entities/HeaderMenuSign/ui/HeaderMenuSign.module.scss b/src/entities/HeaderMenuSign/ui/HeaderMenuSign.module.scss
@@ -8,6 +8,10 @@
   height: 16px;
   cursor: pointer;
 
+  &:active {
+    transform: scale(0.9);
+  }
+
   &__stripe {
     width: 100%;
     height: 2px;

diff --git a/src/entities/HeaderMenuSign/ui/HeaderMenuSign.tsx b/src/entities/HeaderMenuSign/ui/HeaderMenuSign.tsx
@@ -2,12 +2,23 @@ import { FC } from 'react'
 
 import styles from './HeaderMenuSign.module.scss'
 
-const HeaderMenuSign: FC = () => {
+export interface IHeaderMenuSign {
+  onClick?: () => void
+}
+
+/**
+ * Кнопка "меню" из трех белых полосочек, появляется в мобильной версии Header
+ * @param {function} onClick - функция открытия модального окна
+ */
+
+const HeaderMenuSign: FC<IHeaderMenuSign> = ({ onClick }) => {
   return (
-    <ul tabIndex={0} className={styles.headerMenuSign}>
-      <li className={styles.headerMenuSign__stripe}></li>
-      <li className={styles.headerMenuSign__stripe}></li>
-      <li className={styles.headerMenuSign__stripe}></li>
+    <ul tabIndex={0} onClick={onClick} className={styles.headerMenuSign}>
+      {Array(3)
+        .fill(0)
+        .map((_, i) => (
+          <li key={i} className={styles.headerMenuSign__stripe}></li>
+        ))}
     </ul>
   )
 }