From 27400002698c5fcfbaa0753d3f49034ca6e1de8f Mon Sep 17 00:00:00 2001 From: dmitrynairov Date: Fri, 16 Feb 2024 12:28:01 +0300 Subject: [PATCH] main test --- market/public/arrow-down.png | Bin 0 -> 268 bytes market/src/Base/Logo/Logo.jsx | 2 +- market/src/Base/Logo/Logo.scss | 2 +- market/src/Components/Footer/Footer.jsx | 49 ++++++++++++++--- market/src/Components/Footer/Footer.scss | 58 ++++++++++++++++++++- market/src/Components/Product/Product.jsx | 10 ++-- market/src/Components/Product/Product.scss | 34 +++++++++++- market/src/reset.scss | 4 ++ 8 files changed, 142 insertions(+), 17 deletions(-) create mode 100644 market/public/arrow-down.png diff --git a/market/public/arrow-down.png b/market/public/arrow-down.png new file mode 100644 index 0000000000000000000000000000000000000000..9e1307f3fce34dbbae14d27bd10c161a1c631778 GIT binary patch literal 268 zcmeAS@N?(olHy`uVBq!ia0vp^Mj*_=1|;R|J2nC-&H|6fVg?3oVGw3ym^DWND7eql z#WAE}&fALzxta|GS{^QJPr6^$zb~ABn}52Xh}VH-S(|2F{h63=dB&Y#>69QZ&8Ihc z)o)a=e_*-LY|i|F>B9-dV?V2cj#%8U=AG{cv|YvuAeSs%cZdB>$ws}>>dTvfK4I{5 L^>bP0l+XkKcD7_o literal 0 HcmV?d00001 diff --git a/market/src/Base/Logo/Logo.jsx b/market/src/Base/Logo/Logo.jsx index 4191590..8fa9874 100644 --- a/market/src/Base/Logo/Logo.jsx +++ b/market/src/Base/Logo/Logo.jsx @@ -3,7 +3,7 @@ import './Logo.scss' const Logo = () => { return ( - </> + </> {/* */} ИТ
Маркет diff --git a/market/src/Base/Logo/Logo.scss b/market/src/Base/Logo/Logo.scss index 8fc7871..5b39c50 100644 --- 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 index c279d3a..5df7c73 100644 --- a/market/src/Components/Footer/Footer.jsx +++ b/market/src/Components/Footer/Footer.jsx @@ -1,21 +1,56 @@ 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( ) } + const Footer = () => { return (