From 6c7eb7ed9212b6f5baad35fca8d7cc43ae4e28bf Mon Sep 17 00:00:00 2001 From: Alexander Morugin Date: Sun, 5 May 2024 15:37:20 +0300 Subject: [PATCH 1/3] enhancement_341_header_adaptive --- src/assets/icons/iconSearch.svg | 4 + src/assets/images/header/iconSearch.svg | 4 + src/entities/HeaderAccount/HeaderAccount.tsx | 69 +++--- .../HeaderAccount/headerAccount.module.scss | 27 ++- src/entities/HeaderMenuSign/index.tsx | 2 + .../ui/HeaderMenuSign.module.scss | 16 ++ .../ui/HeaderMenuSign.stories.tsx | 35 +++ .../HeaderMenuSign/ui/HeaderMenuSign.tsx | 15 ++ .../ui/SearchProduct.module.scss | 10 +- .../ui/skeleton/CatalogLinkSkeleton.tsx | 10 +- .../ContextMenuElement/ContextMenuElement.tsx | 1 + .../contextMenuElement.module.scss | 2 +- src/shared/ui/logo/Logo.tsx | 3 +- src/shared/ui/logo/logo.module.scss | 4 - src/widgets/Header/Header.tsx | 82 ++++--- src/widgets/Header/header.module.scss | 200 +++++++++--------- 16 files changed, 291 insertions(+), 193 deletions(-) create mode 100644 src/assets/icons/iconSearch.svg create mode 100644 src/assets/images/header/iconSearch.svg create mode 100644 src/entities/HeaderMenuSign/index.tsx create mode 100644 src/entities/HeaderMenuSign/ui/HeaderMenuSign.module.scss create mode 100644 src/entities/HeaderMenuSign/ui/HeaderMenuSign.stories.tsx create mode 100644 src/entities/HeaderMenuSign/ui/HeaderMenuSign.tsx delete mode 100644 src/shared/ui/logo/logo.module.scss diff --git a/src/assets/icons/iconSearch.svg b/src/assets/icons/iconSearch.svg new file mode 100644 index 00000000..faeee762 --- /dev/null +++ b/src/assets/icons/iconSearch.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/images/header/iconSearch.svg b/src/assets/images/header/iconSearch.svg new file mode 100644 index 00000000..ac0c10a9 --- /dev/null +++ b/src/assets/images/header/iconSearch.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/entities/HeaderAccount/HeaderAccount.tsx b/src/entities/HeaderAccount/HeaderAccount.tsx index a491de62..b77ab487 100644 --- 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/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 = ({ 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 = ({ counter, total }) => { )} -
    +
      + {!isScreenLg && }
    • - {isAuth ? ( - // Временная реализация - // TODO заменить на дропдаун на ховер в контекстном меню добавить пункт-кнопку для разлогина пока висит на иконке - - ) : ( - - )} + {/* Временная реализация + TODO заменить на дропдаун на ховер в контекстном меню добавить пункт-кнопку для разлогина пока висит на иконке */} +
      • + {isScreenLg && ( +
    • + + + +
      • + )} + + {isScreenLg && ( +
    • + + + +
      • + )} +
    • - - - -
      • -
    • - - - -
      • -
    • - + -
      -
      -

      Корзина

      -

      {counter}

      + {isScreenLg && ( +
      +
      +

      Корзина

      +

      {counter}

      +
      +

      {total}

      -

      {total}

      -
      + )}
    diff --git a/src/entities/HeaderAccount/headerAccount.module.scss b/src/entities/HeaderAccount/headerAccount.module.scss index 8544af19..848ecde3 100644 --- a/src/entities/HeaderAccount/headerAccount.module.scss +++ b/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 { diff --git a/src/entities/HeaderMenuSign/index.tsx b/src/entities/HeaderMenuSign/index.tsx new file mode 100644 index 00000000..e084d6a9 --- /dev/null +++ b/src/entities/HeaderMenuSign/index.tsx @@ -0,0 +1,2 @@ +import HeaderMenuSign from './ui/HeaderMenuSign' +export default HeaderMenuSign diff --git a/src/entities/HeaderMenuSign/ui/HeaderMenuSign.module.scss b/src/entities/HeaderMenuSign/ui/HeaderMenuSign.module.scss new file mode 100644 index 00000000..d31ae110 --- /dev/null +++ b/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; + } +} diff --git a/src/entities/HeaderMenuSign/ui/HeaderMenuSign.stories.tsx b/src/entities/HeaderMenuSign/ui/HeaderMenuSign.stories.tsx new file mode 100644 index 00000000..8a52cdf7 --- /dev/null +++ b/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 + +export default meta + +type Story = StoryObj + +export const Default: Story = () => { + return ( +
    + +
    + ) +} + +Default.args = {} diff --git a/src/entities/HeaderMenuSign/ui/HeaderMenuSign.tsx b/src/entities/HeaderMenuSign/ui/HeaderMenuSign.tsx new file mode 100644 index 00000000..3a3b8318 --- /dev/null +++ b/src/entities/HeaderMenuSign/ui/HeaderMenuSign.tsx @@ -0,0 +1,15 @@ +import { FC } from 'react' + +import styles from './HeaderMenuSign.module.scss' + +const HeaderMenuSign: FC = () => { + return ( +
      +
    • +
    • +
    • +
    + ) +} + +export default HeaderMenuSign diff --git a/src/features/SearchProduct/ui/SearchProduct.module.scss b/src/features/SearchProduct/ui/SearchProduct.module.scss index b2279efd..31a51ff2 100644 --- 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 index 014d2a44..ddb7eb09 100644 --- 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 = ({ key, width, height }) => { - return ( -
  • - -
    • - ) +const CatalogLinkSkeleton: FC = ({ width, height }) => { + return } export default CatalogLinkSkeleton diff --git a/src/shared/ui/ContextMenuElement/ContextMenuElement.tsx b/src/shared/ui/ContextMenuElement/ContextMenuElement.tsx index 16b419ef..283d98aa 100644 --- a/src/shared/ui/ContextMenuElement/ContextMenuElement.tsx +++ b/src/shared/ui/ContextMenuElement/ContextMenuElement.tsx @@ -61,6 +61,7 @@ const ContextMenuElement: FC = ({ return (
    = ({ image, width, height }) => { return ( - + Logo ) diff --git a/src/shared/ui/logo/logo.module.scss b/src/shared/ui/logo/logo.module.scss deleted file mode 100644 index 5b014c2f..00000000 --- a/src/shared/ui/logo/logo.module.scss +++ /dev/null @@ -1,4 +0,0 @@ -.link { - display: flex; - margin-right: 92px; -} diff --git a/src/widgets/Header/Header.tsx b/src/widgets/Header/Header.tsx index 7b8ba612..70e0ff63 100644 --- a/src/widgets/Header/Header.tsx +++ b/src/widgets/Header/Header.tsx @@ -10,11 +10,13 @@ import { } from '@/entities/Category/selectors/categorySelectors' import { fetchCategories } from '@/entities/Category/slice/categorySlice' import HeaderAccount from '@/entities/HeaderAccount/HeaderAccount' +import HeaderMenuSign from '@/entities/HeaderMenuSign' import CallBack from '@/features/CallBack' import SearchProduct from '@/features/SearchProduct' import { Routes } from '@/shared/config/routerConfig/routes' import ArrowIcon from '@/shared/icons/arrow.svg' import IconCategories from '@/shared/icons/IconCategories.svg' +import { useResize } from '@/shared/libs/hooks/useResize' import { linkItems } from '@/shared/mockData/catalogListData' import { headerAccountData } from '@/shared/mockData/headerAccountData' import CatalogLink from '@/shared/ui/CatalogLink/CatalogLink' @@ -44,16 +46,17 @@ function Header() { const [isModalClosing, setIsModalClosing] = useState(false) const phoneNumber = coreBaseData.header.support.phone_number const logo = coreBaseData.header.main_logo.image - const isCategoriesLoading = useSelector(getLoading) + const { isScreenLg } = useResize() + const changeModalState = () => { setIsModalOpen(!isModalOpen) } const aboutUsNode = useMemo( () => ( -
      +
        О нас Политика безопасности Обзоры @@ -65,7 +68,7 @@ function Header() { const contactNode = useMemo( () => ( -
          +
            {phoneNumber} Обратный звонок
          @@ -75,20 +78,19 @@ function Header() { const supportNode = useMemo( () => ( -
            -
          • - +
              +
            • + Информация о доставке
              • - -
            • - +
            • + Возвраты
              • -
            • - +
            • + Подарочные сертификаты
              • @@ -99,7 +101,7 @@ function Header() { const catalogNode = useMemo( () => ( -
                +
                  {categories.map(category => ( ))} @@ -128,60 +130,72 @@ function Header() { )}
                  -
                  -
                  +
                  + {isScreenLg && ( -
                  + )} -
                  +
                  + {!isScreenLg && } {!logo ? ( ) : ( )} - -
                  -
                  - - -
                  - - Все категории + {isScreenLg && } + + + + {isScreenLg && ( + + +
                  + + Все категории
                  + )} -
                  + {isScreenLg && ( +
                  {isCategoriesLoading ? (
                    {Array(4) .fill(0) .map((_, i) => ( - +
                  • + +
                    • ))}
                  ) : ( @@ -196,7 +210,7 @@ function Header() { )) )}
                  -
                  + )}
                  diff --git a/src/widgets/Header/header.module.scss b/src/widgets/Header/header.module.scss index 68ea857d..3e821af2 100644 --- a/src/widgets/Header/header.module.scss +++ b/src/widgets/Header/header.module.scss @@ -1,154 +1,148 @@ @use '../../shared/styles/utils/variables' as var; .header { - background-color: var.$theme-primary-color; - width: 100%; display: flex; justify-content: center; + width: 100%; + background: var.$theme-primary-color; + padding: 5px 24px 10px; - &__svg { - margin-right: 8px; - transition: fill 0.25s; - fill: var.$white; - } - - &__catalog-link_main:hover { - background-color: var.$white; - color: var.$black; - } - - &__catalog-link_main:hover &__svg { - fill: var.$black; + &__container { + display: grid; + grid-template-columns: clamp(0px, 13%, 300px) 1fr auto; + grid-template-areas: + '.. nav ..' + 'logo search account' + 'catalog tags tags'; + gap: 5px; + width: 100%; + max-width: 1422px; } - &__catalog-wrapper { + &__containerMobile { display: flex; + justify-content: space-between; align-items: center; - } - - &__catalog-text { - color: var.$white; - font-size: 13px; - font-weight: 700; - letter-spacing: 0.1px; - text-transform: uppercase; - transition: color 0.25s; - } - - &__catalog-link_main:hover &__catalog-text { - color: var.$black; - } - - &__container { - padding: 0 10px; - display: flex; width: 100%; - max-width: 1420px; - flex-direction: column; - box-sizing: border-box; + min-height: 75px; } - &__item { - margin: 0; - padding: 0; - font-weight: 600; - font-size: 13px; - color: var.$white; + &__nav { + grid-area: nav; display: flex; + justify-content: space-between; align-items: center; - } - - &__item-icon { - width: 20px; - height: 20px; - object-fit: contain; - margin-right: 5px; - } - - &__link { - color: var.$white; - text-decoration: none; + width: 100%; + max-width: 800px; } &__list { - margin: 0; - padding: 0; display: flex; - list-style-type: none; align-items: center; - column-gap: 25px; - } - - &__logo-link { - display: flex; - width: 138px; - height: 46px; - margin-right: 92px; + gap: 25px; + list-style-type: none; } - &__nav { + &__item { display: flex; align-items: center; - width: 800px; - justify-content: space-between; - margin-left: 230px; + font-size: 13px; + font-weight: 600; + color: var.$white; } &__icon { - object-fit: contain; display: flex; justify-content: center; + object-fit: contain; margin-right: 8px; - &.phone_icon { + &_phone { width: 12px; height: 12px; transform: rotate(90deg); } - &.help_icon { + &_help { width: 12px; height: 15px; } } - &__phone-wrapper { + &__phoneWrapper { display: flex; - column-gap: 5px; align-items: center; + gap: 5px; } - &__row-one { - display: flex; - margin-bottom: 10px; - margin-top: 10px; + &__text { + font-size: 13px; + font-weight: 600; + color: var.$header-color; } - &__row-three { + &__logo { + grid-area: logo; + width: 100%; + } + + &__logoMobile { display: flex; - margin-bottom: 10px; + align-items: center; + gap: 20px; + width: fit-content; + } + + &__catalog { + grid-area: catalog; + max-width: 150px; + } + + &__catalogLinkMain:hover { + background: var.$white; + color: var.$black; } - &__row-two { + &__catalogWrapper { display: flex; - margin-bottom: 10px; + align-items: center; + } + + &__svg { + margin-right: 8px; + transition: fill 0.25s; + fill: var.$white; + } + + &__catalogText { + font-size: 13px; + font-weight: 700; + letter-spacing: 0.1px; + text-transform: uppercase; + color: var.$white; + transition: color 0.25s; + } + + &__catalogLinkMain:hover &__svg { + fill: var.$black; + } + + &__catalogLinkMain:hover &__catalogText { + color: var.$black; } &__tags { + grid-area: tags; display: flex; column-gap: 10px; - margin-left: 77px; } - &__text { - margin: 0; - padding: 0; - font-weight: 600; - font-size: 13px; - color: #aaa3f8; + &__catalogLinkSkeleton { + display: flex; + gap: 10px; } - &__context-menu-link { + &__contextMenuLink { color: var.$body-color; text-decoration: none; white-space: nowrap; @@ -158,26 +152,22 @@ } } - &__context-menu-list { - margin: 0; + &__contextMenuList { display: flex; flex-direction: column; - list-style-type: none; - padding: 20px 40px 20px 20px; - row-gap: 15px; + gap: 15px; max-height: 320px; - overflow-y: scroll; + padding: 20px 40px 20px 20px; + + &_catalog { + overflow-y: scroll; + } } - &__context-menu-item { - margin: 0; - padding: 0; - font-weight: 400; + &__contextMenuItem { font-size: 13px; + font-weight: 400; } - &__catalogLinkSkeleton { - display: flex; - gap: 10px; - } + } From 7bab90c0926b4fe87a1a68fb569268e271384e6e Mon Sep 17 00:00:00 2001 From: Alexander Morugin Date: Mon, 6 May 2024 14:52:46 +0300 Subject: [PATCH 2/3] fix-1 enhancement_341_header_adaptive --- src/assets/icons/iconSearch.svg | 4 +- src/assets/images/header/iconSearch.svg | 4 -- src/entities/HeaderAccount/HeaderAccount.tsx | 25 +++---- .../HeaderAccount/headerAccount.module.scss | 70 ++++++++++--------- .../ui/HeaderMenuSign.module.scss | 4 ++ .../HeaderMenuSign/ui/HeaderMenuSign.tsx | 21 ++++-- 6 files changed, 73 insertions(+), 55 deletions(-) delete mode 100644 src/assets/images/header/iconSearch.svg diff --git a/src/assets/icons/iconSearch.svg b/src/assets/icons/iconSearch.svg index faeee762..ac0c10a9 100644 --- a/src/assets/icons/iconSearch.svg +++ b/src/assets/icons/iconSearch.svg @@ -1,4 +1,4 @@ - - + + diff --git a/src/assets/images/header/iconSearch.svg b/src/assets/images/header/iconSearch.svg deleted file mode 100644 index ac0c10a9..00000000 --- a/src/assets/images/header/iconSearch.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/entities/HeaderAccount/HeaderAccount.tsx b/src/entities/HeaderAccount/HeaderAccount.tsx index b77ab487..d09938cb 100644 --- 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,21 +73,21 @@ const HeaderAccount: FC = ({ counter, total }) => { )} -
                    - {!isScreenLg && } +
                      + {!isScreenLg && }
                    • {/* Временная реализация TODO заменить на дропдаун на ховер в контекстном меню добавить пункт-кнопку для разлогина пока висит на иконке */}
                      • {isScreenLg && (
                    • - +
                      • @@ -94,7 +95,7 @@ const HeaderAccount: FC = ({ counter, total }) => { {isScreenLg && (
                    • - +
                      • @@ -103,15 +104,15 @@ const HeaderAccount: FC = ({ counter, total }) => {
                    • + className={isScreenLg ? `${styles.headerAccount__cart}` : `${styles.headerAccount__cartMobile}`}> {isScreenLg && ( -
                      -
                      -

                      Корзина

                      -

                      {counter}

                      +
                      +
                      + Корзина + {counter}
                      -

                      {total}

                      + {total}
                      )} diff --git a/src/entities/HeaderAccount/headerAccount.module.scss b/src/entities/HeaderAccount/headerAccount.module.scss index 848ecde3..cc479828 100644 --- 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 index d31ae110..46a57600 100644 --- 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 index 3a3b8318..5eb16efd 100644 --- 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 = ({ onClick }) => { return ( -
                        -
                      • -
                      • -
                      • +
                          + {Array(3) + .fill(0) + .map((_, i) => ( +
                        • + ))}
                        ) } From df93ad0d4a9f4927d353885921da2949b2914129 Mon Sep 17 00:00:00 2001 From: Alexander Morugin Date: Mon, 6 May 2024 19:43:13 +0300 Subject: [PATCH 3/3] fix-2 enhancement_341_header_adaptive --- src/assets/icons/iconMenu.svg | 6 ++++ src/entities/HeaderMenuSign/index.tsx | 2 -- .../ui/HeaderMenuSign.module.scss | 20 ----------- .../ui/HeaderMenuSign.stories.tsx | 35 ------------------- .../HeaderMenuSign/ui/HeaderMenuSign.tsx | 26 -------------- src/widgets/Header/Header.tsx | 4 +-- src/widgets/Header/header.module.scss | 6 ++-- 7 files changed, 12 insertions(+), 87 deletions(-) create mode 100644 src/assets/icons/iconMenu.svg delete mode 100644 src/entities/HeaderMenuSign/index.tsx delete mode 100644 src/entities/HeaderMenuSign/ui/HeaderMenuSign.module.scss delete mode 100644 src/entities/HeaderMenuSign/ui/HeaderMenuSign.stories.tsx delete mode 100644 src/entities/HeaderMenuSign/ui/HeaderMenuSign.tsx diff --git a/src/assets/icons/iconMenu.svg b/src/assets/icons/iconMenu.svg new file mode 100644 index 00000000..c1fc5fb6 --- /dev/null +++ b/src/assets/icons/iconMenu.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/entities/HeaderMenuSign/index.tsx b/src/entities/HeaderMenuSign/index.tsx deleted file mode 100644 index e084d6a9..00000000 --- a/src/entities/HeaderMenuSign/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -import HeaderMenuSign from './ui/HeaderMenuSign' -export default HeaderMenuSign diff --git a/src/entities/HeaderMenuSign/ui/HeaderMenuSign.module.scss b/src/entities/HeaderMenuSign/ui/HeaderMenuSign.module.scss deleted file mode 100644 index 46a57600..00000000 --- a/src/entities/HeaderMenuSign/ui/HeaderMenuSign.module.scss +++ /dev/null @@ -1,20 +0,0 @@ -@use '@/shared/styles/utils/variables' as var; - -.headerMenuSign { - display: flex; - flex-direction: column; - gap: 5px; - width: 20px; - height: 16px; - cursor: pointer; - - &:active { - transform: scale(0.9); - } - - &__stripe { - width: 100%; - height: 2px; - background: var.$white; - } -} diff --git a/src/entities/HeaderMenuSign/ui/HeaderMenuSign.stories.tsx b/src/entities/HeaderMenuSign/ui/HeaderMenuSign.stories.tsx deleted file mode 100644 index 8a52cdf7..00000000 --- a/src/entities/HeaderMenuSign/ui/HeaderMenuSign.stories.tsx +++ /dev/null @@ -1,35 +0,0 @@ -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 - -export default meta - -type Story = StoryObj - -export const Default: Story = () => { - return ( -
                        - -
                        - ) -} - -Default.args = {} diff --git a/src/entities/HeaderMenuSign/ui/HeaderMenuSign.tsx b/src/entities/HeaderMenuSign/ui/HeaderMenuSign.tsx deleted file mode 100644 index 5eb16efd..00000000 --- a/src/entities/HeaderMenuSign/ui/HeaderMenuSign.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { FC } from 'react' - -import styles from './HeaderMenuSign.module.scss' - -export interface IHeaderMenuSign { - onClick?: () => void -} - -/** - * Кнопка "меню" из трех белых полосочек, появляется в мобильной версии Header - * @param {function} onClick - функция открытия модального окна - */ - -const HeaderMenuSign: FC = ({ onClick }) => { - return ( -
                          - {Array(3) - .fill(0) - .map((_, i) => ( -
                        • - ))} -
                        - ) -} - -export default HeaderMenuSign diff --git a/src/widgets/Header/Header.tsx b/src/widgets/Header/Header.tsx index 70e0ff63..f3b6cb66 100644 --- a/src/widgets/Header/Header.tsx +++ b/src/widgets/Header/Header.tsx @@ -3,6 +3,7 @@ import { useEffect, useMemo, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import { AppDispatch } from '@/app/providers/StoreProvider/config/store' +import MenuIcon from '@/assets/icons/iconMenu.svg' import { getLoading, selectCategories, @@ -10,7 +11,6 @@ import { } from '@/entities/Category/selectors/categorySelectors' import { fetchCategories } from '@/entities/Category/slice/categorySlice' import HeaderAccount from '@/entities/HeaderAccount/HeaderAccount' -import HeaderMenuSign from '@/entities/HeaderMenuSign' import CallBack from '@/features/CallBack' import SearchProduct from '@/features/SearchProduct' import { Routes } from '@/shared/config/routerConfig/routes' @@ -163,7 +163,7 @@ function Header() { )}
                        - {!isScreenLg && } + {!isScreenLg && } {!logo ? ( ) : ( diff --git a/src/widgets/Header/header.module.scss b/src/widgets/Header/header.module.scss index 3e821af2..678f5aa2 100644 --- a/src/widgets/Header/header.module.scss +++ b/src/widgets/Header/header.module.scss @@ -81,6 +81,10 @@ color: var.$header-color; } + &__menuIcon { + cursor: pointer; + } + &__logo { grid-area: logo; width: 100%; @@ -168,6 +172,4 @@ font-size: 13px; font-weight: 400; } - - }