Merge pull request #423 from Studio-Yandex-Practicum/422-breakpoints

#422-beakpoints

src/components/PageControls/PageControls.module.scss

@@ -1,10 +1,15 @@
-@use '../../shared/styles/utils/variables' as var;
+@use '@/shared/styles/utils/variables' as var;
+@use '@/shared/styles/utils/mixins' as media;
 
 .page-controls {
   width: 100%;
   display: flex;
   justify-content: space-between;
   gap: 10px;
+
+  @include media.respond-to('middle') {
+    flex-direction: column;
+  }
 }
 
 .dropdowns {
@@ -15,6 +20,10 @@
 .cards-controls {
   display: flex;
   gap: 10px;
+
+  @include media.respond-to('large') {
+    display: none
+  }
 }
 
 .cards-control {

src/components/PageControls/PageControls.tsx

@@ -4,6 +4,7 @@ import IconCompact from '@/assets/icons/IconCompact.svg'
 import IconGrid from '@/assets/icons/IconGrid.svg'
 import IconList from '@/assets/icons/IconList.svg'
 import { Dropdown } from '@/components/Dropdown/Dropdown'
+import { CategoryListMobilePopup } from '@/entities/CategoryListMobilePopup/CategoryListMobilePopup'
 import { ECardView } from '@/shared/model/types/common'
 
 import styles from './PageControls.module.scss'
@@ -47,6 +48,7 @@ export const PageControls: FC<TPageControls> = ({
 }) => {
   return (
     <div className={styles['page-controls']}>
+      <CategoryListMobilePopup />
       <div className={styles.dropdowns}>
         <Dropdown items={sortOptions} onSelect={handleSortChange} changeValue={changeValueToFilterProducts} />
         <Dropdown

src/components/PageControls/PageControlsSkeletons/PageControlsSkeletons.module.scss

@@ -1,23 +1,64 @@
-@use '../../../shared/styles/utils/variables' as var;
+@use '@/shared/styles/utils/variables' as var;
+@use '@/shared/styles/utils/mixins' as media;
 
 .sk-page-controls {
   width: 100%;
-  display: flex;
+  display: grid;
   justify-content: space-between;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(1, 1fr);
+
+  @include media.respond-to('middle') {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+  }
 
   &__dropdowns {
     display: flex;
+    justify-content: flex-start;
     gap: 12px;
+    grid-area: 1 / 1 / 2 / 1;
+
+    @include media.respond-to('large') {
+      grid-area: 1 / 3 / 1 / 3;
+    }
+
+    @include media.respond-to('middle') {
+      grid-area: 2 / 1 / 3 / 3;
+    }
   }
 
   &__dropdown {
    width: 150px;
    height: 36px;
   }
 
+  &__catalog{
+    display: none;
+    width: 150px;
+    height: 36px;
+
+    @include media.respond-to('large') {
+      display: grid;
+      grid-area: 1 / 2 / 2 / 1;
+    }
+
+    @include media.respond-to('middle') {
+      grid-area: 1 / 1 / 2 / 3;
+      width: 312px;
+      margin-bottom: 10px;
+    }
+  }
+
   &__cards-controls {
     display: flex;
     gap: 10px;
+    grid-area: 1 / 3 / 1 / 3;
+
+    @include media.respond-to('large') {
+      display: none;
+    }
+
   }
 
   &__cards-control {

src/components/PageControls/PageControlsSkeletons/PageControlsSkeletons.tsx

@@ -7,6 +7,7 @@ import styles from './PageControlsSkeletons.module.scss'
 export const PageControlsSkeletons: FC = () => {
   return (
     <div className={styles['sk-page-controls']}>
+      <Skeleton className={styles['sk-page-controls__catalog']} inline={true} />
       <div className={styles['sk-page-controls__dropdowns']}>
         <Skeleton className={styles['sk-page-controls__dropdown']} inline={true} />
         <Skeleton className={styles['sk-page-controls__dropdown']} inline={true} />

src/entities/CategoryListMobilePopup/CategoryListMobilePopup.module.scss

@@ -0,0 +1,56 @@
+@use '@/shared/styles/utils/mixins' as media;
+
+.category-list {
+  display: block;
+}
+
+.customButton {
+  display: none;
+  background-color: white;
+
+  svg {
+    width: 20px;
+    height: 20px;
+    padding-left: 10px;
+  }
+
+  @include media.respond-to('large') {
+    display: flex;
+    max-width: 310px;
+  }
+}
+
+.buttonClose{
+  background-color: white;
+  width: 100%;
+}
+
+.modalBlock {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: inherit;
+  height: inherit;
+  padding: 15%;
+
+  @include media.respond-to('middle') {
+    padding: 7%;
+  }
+
+  @include media.respond-to('small') {
+    padding: 3%;
+  }
+}
+
+.modal {
+  width: inherit;
+}
+
+.mobileVisible {
+  @include media.respond-to('large') {
+    display: block;
+    width: 100%;
+    max-height: 500px;
+  }
+}
+

src/entities/CategoryListMobilePopup/CategoryListMobilePopup.tsx

@@ -0,0 +1,46 @@
+import { type FC, useState } from 'react'
+
+import styles from '@/entities/CategoryListMobilePopup/CategoryListMobilePopup.module.scss'
+import MobileMenuIcon from '@/shared/icons/MobileMenuIcon.svg'
+import { Button, ButtonSize, ButtonTheme } from '@/shared/ui/Button/Button'
+import Modal from '@/shared/ui/Modal/Modal'
+import { CategoryList } from '@/widgets/CategoryList/CategoryList'
+
+export const CategoryListMobilePopup: FC = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [isModalClosing, setIsModalClosing] = useState(false)
+  const changeModalState = () => {
+    setIsModalOpen(!isModalOpen)
+  }
+  return (
+    <>
+      <Button
+        className={styles.customButton}
+        theme={ButtonTheme.OUTLINED}
+        size={ButtonSize.S}
+        onClick={changeModalState}>
+        Категории
+        <MobileMenuIcon className={styles.customButton} />
+      </Button>
+      {isModalOpen && (
+        <Modal
+          className={styles.modal}
+          isModalOpen={isModalOpen}
+          onClose={changeModalState}
+          isModalClosing={isModalClosing}
+          setIsModalClosing={setIsModalClosing}>
+          <div className={styles.modalBlock}>
+            <CategoryList className={styles.mobileVisible} />
+            <Button
+              className={styles.buttonClose}
+              theme={ButtonTheme.OUTLINED}
+              size={ButtonSize.S}
+              onClick={changeModalState}>
+              Закрыть
+            </Button>
+          </div>
+        </Modal>
+      )}
+    </>
+  )
+}

src/features/HeaderMenuModal/HeaderMenuModalCatalog/HeaderMenuModalCatalog.tsx

@@ -1,10 +1,14 @@
-import { FC } from 'react'
+import { type FC } from 'react'
+import { useDispatch } from 'react-redux'
 
+import { AppDispatch } from '@/app/providers/StoreProvider/config/store'
+import { setCategoryId } from '@/entities/Category/slice/categoryIdSlice'
+import { setCategorySlug } from '@/entities/Category/slice/categorySlugSlice'
 import { Routes } from '@/shared/config/routerConfig/routes'
 import Link from '@/shared/ui/Link/Link'
 
 import HeaderMenuModalHeading from '../HeaderMenuModalHeading/HeaderMenuModalHeading'
-import { ICategory } from '../model/types/types'
+import { type ICategory } from '../model/types/types'
 
 import styles from './HeaderMenuModalCatalog.module.scss'
 
@@ -29,6 +33,16 @@ const HeaderMenuModalCatalog: FC<IHeaderMenuModalCatalog> = ({
   handleCategory,
   handleClose
 }) => {
+  const dispatch = useDispatch<AppDispatch>()
+
+  const handleCloseAndDispatch = (id: number | undefined, slug: string | undefined) => {
+    if (handleClose) {
+      handleClose()
+      dispatch(setCategoryId(id))
+      dispatch(setCategorySlug(slug))
+    }
+  }
+
   return (
     <>
       {isCatalog && (
@@ -40,7 +54,7 @@ const HeaderMenuModalCatalog: FC<IHeaderMenuModalCatalog> = ({
               <li key={item.id}>
                 <Link
                   to={`${Routes.CATEGORIES}/${item.slug}?id=${item.id}`}
-                  onClick={handleClose}
+                  onClick={() => handleCloseAndDispatch(item.id, item.slug)}
                   className={styles.headerMenuModalCatalog__route}>
                   {item.name}
                 </Link>

src/pages/ProductsPage/ProductsPage.module.scss

@@ -1,4 +1,5 @@
-@use '../../shared/styles/utils/variables' as var;
+@use '@/shared/styles/utils/variables' as var;
+@use '@/shared/styles/utils/mixins' as media;
 
 .content-grid {
   width: 100%;
@@ -18,4 +19,18 @@
   display: flex;
   flex-wrap: wrap;
   gap: 30px;
+
+  @include media.respond-to('large') {
+    margin: auto;
+    justify-content: center;
+  }
+}
+
+.mobileInvisible {
+  height: fit-content;
+  max-width: 330px;
+
+  @include media.respond-to('large') {
+  display: none;
+  }
 }

src/pages/ProductsPage/ProductsPage.tsx

@@ -18,6 +18,7 @@ import { setCategoryId } from '@/entities/Category/slice/categoryIdSlice'
 import { getLoading, getProductsOfCategorySelector } from '@/pages/ProductsPage/selectors/selectors'
 import { getProducts } from '@/pages/ProductsPage/services/getProducts'
 import { ITEMS_PER_PAGE_OPTION, NUMBER_OF_PRODUCTS, SORT_OPTION } from '@/shared/constants/constants'
+import { scrollPageToTop } from '@/shared/libs/helpers/scrollPageToTop'
 import { totalPagesHandler } from '@/shared/libs/helpers/totalPagesHandler'
 import { useAppDispatch } from '@/shared/libs/hooks/store'
 import { useReplaceValueFromLocation } from '@/shared/libs/hooks/useReplaceValueFromLocation'
@@ -100,6 +101,7 @@ export const ProductsPage = () => {
   }
 
   useEffect(() => {
+    scrollPageToTop()
     dispatch(getProducts({ categoryId, filterProducts, filterQuantity, productsQuantityPerPage }))
   }, [productsQuantityPerPage, categorySlug, filterProducts, filterQuantity, idOfCategory])
 
@@ -148,7 +150,7 @@ export const ProductsPage = () => {
           <PageDescription count={categoriesProducts.count} heading={categoriesProducts.category_name} />
         )}
         <div className={styles['content-grid']}>
-          <CategoryList />
+          <CategoryList className={styles.mobileInvisible} />
           <div className={styles['content-main']}>
             <section className={styles['content-products']}>
               {isLoading ? (

src/widgets/CategoryList/CategoryList.module.scss

@@ -1,9 +1,8 @@
-@use '../../shared/styles/utils/variables' as var;
+@use '@/shared/styles/utils/variables' as var;
+@use '@/shared/styles/utils/mixins' as media;
 
 .category-list {
   padding: 30px;
-  max-width: 330px;
-  height: fit-content;
   background-color: var.$white;
   border-radius: 10px;
   width: inherit;

src/widgets/CategoryList/CategoryList.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames'
 import { type FC, useEffect } from 'react'
 import { useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
@@ -19,7 +20,11 @@ import styles from './CategoryList.module.scss'
  * Список категорий для страницы товаров.
  * Фиксированная высота настраивается классом .category-list__items
  */
-export const CategoryList: FC = () => {
+
+type TCategoryList = {
+  className?: string
+}
+export const CategoryList: FC<TCategoryList> = ({ className }) => {
   const dispatch = useAppDispatch()
   const getMainCategories = useSelector(getCategorySelector)
   const categorySlug = useSelector(selectCategorySlug)
@@ -34,7 +39,7 @@ export const CategoryList: FC = () => {
   }, [categorySlug, slug])
 
   return (
-    <div className={styles['category-list']}>
+    <div className={classNames(styles['category-list'], [className])}>
       <Heading type={HeadingType.NORMAL} className={styles['category-list__title']}>
         Категории
       </Heading>