Merge pull request #346 from Studio-Yandex-Practicum/enhancement_341_…

…header_adaptive enhancement_341_header_adaptive
Studio-Yandex-Practicum · May 8, 2024 · 378dd74 · 378dd74
2 parents bf1e343 + df93ad0
commit 378dd74
Show file tree

Hide file tree

Showing 12 changed files with 255 additions and 214 deletions.
diff --git a/src/assets/icons/iconMenu.svg b/src/assets/icons/iconMenu.svg
diff --git a/src/assets/icons/iconSearch.svg b/src/assets/icons/iconSearch.svg
diff --git a/src/entities/HeaderAccount/HeaderAccount.tsx b/src/entities/HeaderAccount/HeaderAccount.tsx
@@ -1,6 +1,7 @@
 import { FC, lazy, useState, Suspense, useEffect } from 'react'
 import { useSelector } from 'react-redux'
 
+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'
@@ -11,9 +12,11 @@ import PersonIcon from '@/shared/icons/person.svg'
 import PersonAuthIcon from '@/shared/icons/person_auth.svg'
 import ScalesIcon from '@/shared/icons/scales.svg'
 import { useAppDispatch } from '@/shared/libs/hooks/store'
+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'
@@ -33,6 +36,8 @@ const HeaderAccount: FC<HeaderAccountProps> = ({ counter, total }) => {
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [isModalClosing, setIsModalClosing] = useState(false)
 
+  const { isScreenLg } = useResize()
+
   const dispatch = useAppDispatch()
   const isAuth = useSelector(getUserAuthStatus)
 
@@ -68,41 +73,48 @@ const HeaderAccount: FC<HeaderAccountProps> = ({ counter, total }) => {
           </Suspense>
         </Modal>
       )}
-      <ul className={styles['header__cart-wrapper']}>
+      <ul className={isScreenLg ? `${styles.headerAccount}` : `${styles.headerAccount__mobile}`}>
+        {!isScreenLg && <SearchIcon className={styles.headerAccount__search} />}
         <li>
-          {isAuth ? (
-            // Временная реализация
-            // TODO заменить на дропдаун на ховер в контекстном меню добавить пункт-кнопку для разлогина пока висит на иконке
-            <Button onClick={onLogout} className={styles.header__cart}>
-              <PersonAuthIcon />
-            </Button>
-          ) : (
-            <Button onClick={handlePersonIconClick} className={styles.header__cart}>
-              <PersonIcon />
-            </Button>
-          )}
+          {/* Временная реализация
+          TODO заменить на дропдаун на ховер в контекстном меню добавить пункт-кнопку для разлогина пока висит на иконке */}
+          <Button
+            onClick={isAuth ? onLogout : handlePersonIconClick}
+            className={isScreenLg ? `${styles.headerAccount__cart}` : `${styles.headerAccount__cartMobile}`}>
+            {isAuth ? <PersonAuthIcon /> : <PersonIcon />}
+          </Button>
         </li>
 
+        {isScreenLg && (
+          <li>
+            <Link to={Routes.COMPARE} className={styles.headerAccount__cart}>
+              <ScalesIcon />
+            </Link>
+          </li>
+        )}
+
+        {isScreenLg && (
+          <li>
+            <Link to={Routes.FAVORITES} className={styles.headerAccount__cart}>
+              <HeartIcon />
+            </Link>
+          </li>
+        )}
+
         <li>
-          <Link to={Routes.COMPARE} className={styles.header__cart}>
-            <ScalesIcon />
-          </Link>
-        </li>
-        <li>
-          <Link to={Routes.FAVORITES} className={styles.header__cart}>
-            <HeartIcon />
-          </Link>
-        </li>
-        <li>
-          <Link to={Routes.CART} className={styles.header__cart}>
+          <Link
+            to={Routes.CART}
+            className={isScreenLg ? `${styles.headerAccount__cart}` : `${styles.headerAccount__cartMobile}`}>
             <CartIcon />
-            <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>
+            {isScreenLg && (
+              <div className={styles.headerAccount__cartContainer}>
+                <div className={styles.headerAccount__counterContainer}>
+                  <Paragraph className={styles.headerAccount__cartTotalText}>Корзина</Paragraph>
+                  <Paragraph className={styles.headerAccount__cartCounter}>{counter}</Paragraph>
+                </div>
+                <Paragraph className={styles.headerAccount__cartTotal}>{total}</Paragraph>
               </div>
-              <p className={styles['header__cart-total']}>{total}</p>
-            </div>
+            )}
           </Link>
         </li>
       </ul>

diff --git a/src/entities/HeaderAccount/headerAccount.module.scss b/src/entities/HeaderAccount/headerAccount.module.scss
@@ -1,60 +1,81 @@
 @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 {
-    height: 46px;
-    border: 1px solid var.$theme-secondary-color;
     display: flex;
     justify-content: center;
     align-items: center;
+    height: 46px;
+    border: 1px solid var.$theme-secondary-color;
     border-radius: 5px;
-    box-sizing: border-box;
     padding: 10px;
     transition: border 0.25s;
+
+    &:hover {
+      border: 1px solid var.$white;
+    }
   }
 
-  &__cart:hover {
-    border: 1px solid var.$white;
+  &__cartMobile {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    cursor: pointer;
+
+    &: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;
   }
 
-  &__cart-wrapper {
-    display: flex;
-    column-gap: 5px;
-    margin-left: 129px;
-  }
-
-  &__counter-container {
+  &__counterContainer {
     display: flex;
     column-gap: 5px;
   }

diff --git a/src/features/SearchProduct/ui/SearchProduct.module.scss b/src/features/SearchProduct/ui/SearchProduct.module.scss
@@ -1,14 +1,16 @@
 @use '@/shared/styles/utils/variables' as var;
 
 .form {
+  grid-area: search;
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   width: 100%;
+  max-width: 800px;
   height: 46px;
   background-color: var.$theme-secondary-color;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
   border-radius: 5px;
-  position: relative;
 }
 
 .button {

diff --git a/src/shared/ui/CatalogLink/ui/skeleton/CatalogLinkSkeleton.tsx b/src/shared/ui/CatalogLink/ui/skeleton/CatalogLinkSkeleton.tsx
@@ -3,24 +3,18 @@ import Skeleton from 'react-loading-skeleton'
 import 'react-loading-skeleton/dist/skeleton.css'
 
 interface ICatalogLinkSkeleton {
-  key: number
   width: number
   height: number
 }
 
 /**
  * Компонент CatalogLinkSkeleton - заставка, пока не загрузятся CatalogLink
- * @param {number} key - индекс списка
  * @param {number} width - ширина скелетона
  * @param {number} height  - высота скелетона
  */
 
-const CatalogLinkSkeleton: FC<ICatalogLinkSkeleton> = ({ key, width, height }) => {
-  return (
-    <li key={key}>
-      <Skeleton count={1} height={height} width={width} />
-    </li>
-  )
+const CatalogLinkSkeleton: FC<ICatalogLinkSkeleton> = ({ width, height }) => {
+  return <Skeleton count={1} height={height} width={width} />
 }
 
 export default CatalogLinkSkeleton
diff --git a/src/shared/ui/ContextMenuElement/ContextMenuElement.tsx b/src/shared/ui/ContextMenuElement/ContextMenuElement.tsx
@@ -61,6 +61,7 @@ const ContextMenuElement: FC<TContextMenuElement> = ({
 
   return (
     <div
+      tabIndex={0}
       ref={ref}
       className={`${className} ${styles['context-body']} `}
       onMouseEnter={handleMouseEnter}

diff --git a/src/shared/ui/ContextMenuElement/contextMenuElement.module.scss b/src/shared/ui/ContextMenuElement/contextMenuElement.module.scss
@@ -2,11 +2,11 @@
 
 .context-menu {
   position: absolute;
+  display: none;
   background-color: var.$white;
   box-shadow: 0 0 20px rgb(170 189 206 / 25%);
   border-radius: 5px;
   z-index: 1;
-  display: none;
 }
 
 .context-body {

diff --git a/src/shared/ui/logo/Logo.tsx b/src/shared/ui/logo/Logo.tsx
@@ -3,7 +3,6 @@ import { type FC } from 'react'
 import { Routes } from '@/shared/config/routerConfig/routes'
 import Link from '@/shared/ui/Link/Link'
 
-import styles from './logo.module.scss'
 import { TLogoProps } from './model/types/types'
 
 /**
@@ -14,7 +13,7 @@ import { TLogoProps } from './model/types/types'
 
 const Logo: FC<TLogoProps> = ({ image, width, height }) => {
   return (
-    <Link to={Routes.HOME} className={styles.link}>
+    <Link to={Routes.HOME}>
       <img src={image} alt="Logo" style={{ width, height }} />
     </Link>
   )

diff --git a/src/shared/ui/logo/logo.module.scss b/src/shared/ui/logo/logo.module.scss