enhancement_341_header_adaptive

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/images/header/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,6 +12,7 @@ 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'
@@ -33,6 +35,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 +72,48 @@ const HeaderAccount: FC<HeaderAccountProps> = ({ counter, total }) => {
           </Suspense>
         </Modal>
       )}
-      <ul className={styles['header__cart-wrapper']}>
+      <ul className={isScreenLg ? `${styles.header__cartWrapper}` : `${styles.header__cartWrapperMobile}`}>
+        {!isScreenLg && <SearchIcon />}
         <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.header__cart}` : `${styles.header__cartMobile}`}>
+            {isAuth ? <PersonAuthIcon /> : <PersonIcon />}
+          </Button>
         </li>
 
+        {isScreenLg && (
+          <li>
+            <Link to={Routes.COMPARE} className={styles.header__cart}>
+              <ScalesIcon />
+            </Link>
+          </li>
+        )}
+
+        {isScreenLg && (
+          <li>
+            <Link to={Routes.FAVORITES} className={styles.header__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.header__cart}` : `${styles.header__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['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>
+                <p className={styles['header__cart-total']}>{total}</p>
               </div>
-              <p className={styles['header__cart-total']}>{total}</p>
-            </div>
+            )}
           </Link>
         </li>
       </ul>

src/entities/HeaderAccount/headerAccount.module.scss

@@ -2,13 +2,12 @@
 
 .header {
   &__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;
   }
@@ -17,6 +16,15 @@
     border: 1px solid var.$white;
   }
 
+  &__cartMobile {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    cursor: pointer;
+    transition: 0.25s;
+  }
+
   &__cart-container {
     display: flex;
     flex-direction: column;
@@ -48,10 +56,17 @@
     color: var.$header-color;
   }
 
-  &__cart-wrapper {
+  &__cartWrapper {
+    grid-area: account;
     display: flex;
-    column-gap: 5px;
-    margin-left: 129px;
+    align-items: center;
+    gap: 5px;
+  }
+
+  &__cartWrapperMobile {
+    display: flex;
+    align-items: center;
+    gap: 24px;
   }
 
   &__counter-container {

src/entities/HeaderMenuSign/index.tsx

@@ -0,0 +1,2 @@
+import HeaderMenuSign from './ui/HeaderMenuSign'
+export default HeaderMenuSign

src/entities/HeaderMenuSign/ui/HeaderMenuSign.module.scss

@@ -0,0 +1,16 @@
+@use '@/shared/styles/utils/variables' as var;
+
+.headerMenuSign {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  width: 20px;
+  height: 16px;
+  cursor: pointer;
+
+  &__stripe {
+    width: 100%;
+    height: 2px;
+    background: var.$white;
+  }
+}

src/entities/HeaderMenuSign/ui/HeaderMenuSign.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import HeaderMenuSign from './HeaderMenuSign'
+
+const meta = {
+  title: 'entities/HeaderMenuSign',
+  component: HeaderMenuSign,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  args: {}
+} satisfies Meta<typeof HeaderMenuSign>
+
+export default meta
+
+type Story = StoryObj<typeof HeaderMenuSign>
+
+export const Default: Story = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '30px',
+        height: '30px',
+        background: '#ccc'
+      }}>
+      <HeaderMenuSign />
+    </div>
+  )
+}
+
+Default.args = {}

src/entities/HeaderMenuSign/ui/HeaderMenuSign.tsx

@@ -0,0 +1,15 @@
+import { FC } from 'react'
+
+import styles from './HeaderMenuSign.module.scss'
+
+const HeaderMenuSign: FC = () => {
+  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>
+  )
+}
+
+export default HeaderMenuSign

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 {

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

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}

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 {

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>
   )