Sonliv · Sonliv · Feb 16, 2024
diff --git a/market/public/arrow-down.png b/market/public/arrow-down.png
diff --git a/market/src/Base/Logo/Logo.jsx b/market/src/Base/Logo/Logo.jsx
@@ -3,7 +3,7 @@ import './Logo.scss'
 const Logo = () => {
     return (
         <a href="#" className='logo' > 
-        <span className='logotype' >&lt;/&gt;</span>
+        <span className='logotype-text' >&lt;/&gt;</span>
         {/* <img className='logo-img' src={LogoImg} alt="" /> */}
         <span>ИТ<br/>Маркет</span>
         </a>

diff --git a/market/src/Base/Logo/Logo.scss b/market/src/Base/Logo/Logo.scss
@@ -11,7 +11,7 @@
         background-color: #464545;
     }
 }
-.logotype{
+.logotype-text{
     color: #fff;
     background-color: #262626;
     font-size: 24px;

diff --git a/market/src/Components/Footer/Footer.jsx b/market/src/Components/Footer/Footer.jsx
@@ -1,29 +1,64 @@
 import Logo from '../../Base/Logo/Logo';
 import './Footer.scss'
+import ArrowDown from '/arrow-down.png'
+
+import React, {useState, useRef} from 'react';
+
+
+    //accordion
+
+    function FooterItem() {
+
+        // ref для arrow
+        const arrowImgRef = useRef(null);
+
+        //is open = переменная сосотояния аккордиона 
+        //setIsOpen для измненеия значения
+        const [isOpen, setIsOpen] = useState(false);
+
+        // Получение списка из  DOM
+        const listRef = useRef(null);
+
+        //togle (переключение, делает проитивоположное значние !isOpen)
+        const toggleAccordion = () => {
+            setIsOpen(!isOpen);
+
+       // Переключаем класс при открытии/закрытии аккордеона
+       arrowImgRef.current.classList.toggle('rotated');
+        }
+
+
+        // Если isOpen true то возвращается высота списка, иначе возвращается 0
+        const getHeight = () => {
+            return isOpen ? `${listRef.current.scrollHeight}px` : '0' ;
+        }
 
 
-function FooterItem() {
     return(
         <nav className="footer-menu">
-            <div className="footer-menu-title">Маркетплейс</div>
-            <ul className="footer-list">
-                <li className="footer-item"><a href="#">О компании</a></li>
-                <li className="footer-item"><a href="#">О компании</a></li>
-                <li className="footer-item"><a href="#">О компании</a></li>
+            <div className="footer-menu-title" onClick={toggleAccordion} >
+                <span>Маркетплейс</span>
+                <img ref={arrowImgRef} className={isOpen ? 'footer-menu-arrow rotated' : 'footer-menu-arrow rotated-back'} src={ArrowDown} alt="" />
+            </div>
+            <ul className="footer-list" ref={listRef} style={{maxHeight: getHeight()}}  >
                 <li className="footer-item"><a href="#">О компании</a></li>
+                <li className="footer-item"><a href="#">О продукте</a></li>
+                <li className="footer-item"><a href="#">Контакты</a></li>
+                <li className="footer-item"><a href="#">Помощь</a></li>
             </ul>
          </nav>      
     )
 }
 
+
 const Footer = () => {
     return (
         <footer className="footer">
             <div className="container">
                 <div className="footer-wrapper">
                     <div className="footer-logo">
                      <Logo/>
-                     <p className='footer-logo-desc'>Маркетплейс цифровых <br /> товаров.</p>
+                     <p className='footer-logo-desc'>Маркетплейс цифровых  товаров.</p>
                     </div>
                     <FooterItem/>
                     <FooterItem/>

diff --git a/market/src/Components/Footer/Footer.scss b/market/src/Components/Footer/Footer.scss
@@ -8,15 +8,71 @@
     }
     &-logo-desc{
         font-size: 15px;
+        max-width: 140px;
     }
     &-logo .logo{
         padding-bottom: 15px;
     }
     &-menu-title{
         margin-bottom: 20px;
         font-weight: 500;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
     }
     &-item{
         margin-bottom: 10px;
     }
-}
+    &-menu-arrow{
+        width: 25px;
+        display: none;
+        transform: rotate(180deg);
+    }
+}
+
+.rotated{
+    transform: rotate(360deg); 
+    transition: ease 0.3s ;
+}
+
+.rotated-back {
+    transform: rotate(180deg); 
+    transition: ease 0.3s;
+}
+
+
+@media (max-width: 920px) {
+
+    // стили
+    .footer{
+        padding: 20px 0 0 0;
+        &-wrapper{
+            gap: 20px;
+        }
+        &-logo{
+            border-bottom: 2px solid #464545;
+            padding-bottom: 20px;
+            width: 100%;
+        }
+        &-logo.logo{
+            max-width: auto;
+        }
+        &-logo-desc{
+            max-width: none;
+        }
+        &-menu-arrow{
+            width: 25px;
+            display: block;
+        }
+
+        //accordion
+        &-list{
+            overflow: hidden;
+            transition: max-height 0.3s ease;
+        }
+        &-menu{
+            width: 100%;
+             // position: relative;
+        }
+    }
+}
diff --git a/market/src/Components/Product/Product.jsx b/market/src/Components/Product/Product.jsx
@@ -3,11 +3,11 @@ import ProuctImg from '/productImg.png'
 
 function  ProductItem(){
     return(
-    <div className="product-item">
-        <img className='product-img' src={ProuctImg} alt="" />
-        <p className="product-item-title">Универсальные иконки 1000+</p>
-        <p className="product-item-cost">1700 ₽</p>
-    </div>
+        <div className="product-item">
+            <img className='product-img' src={ProuctImg} alt="" />
+            <p className="product-item-title">Универсальные иконки 1000+</p>
+            <p className="product-item-cost">1700 ₽</p>
+        </div>
     )
 }
 const Product = () => {

diff --git a/market/src/Components/Product/Product.scss b/market/src/Components/Product/Product.scss
@@ -5,7 +5,7 @@
     &-wrapper{
         display: flex;
         // justify-content: flex-start;
-        justify-content: space-around;
+        justify-content: space-between;
         flex-wrap: wrap;
         // gap: 30px;
         gap: 3%;
@@ -35,4 +35,34 @@
         margin-bottom: 20px;
         color: $title-color;
     }
-}
+}
+
+
+@media (max-width:768px){
+    .product{
+        &-item {
+            width: 19%;
+        }
+        &-wrapper{
+            gap: 30px 3%;
+        }
+    }
+}
+
+
+@media (max-width:640px){
+    .product{
+        &-item{
+            width: 39%;
+            display: flex;
+            flex-direction: column;
+        }
+        &-title{
+            text-align: center;
+        }
+        &-desc{
+            text-align: center;
+            margin-bottom: 30px;
+        }
+    }
+}
diff --git a/market/src/reset.scss b/market/src/reset.scss
@@ -34,6 +34,10 @@ input, button{
     font-family: 'Roboto', 'Mulish', serif;
 }
 
+button{
+    cursor: pointer;
+}
+
 a, li{
     color: inherit;
     text-decoration: none;