From dd2a05210e549a5d546ef7758a9d9cd92718855f Mon Sep 17 00:00:00 2001 From: jsapro <77.3.77@mail.ru> Date: Tue, 9 Jan 2024 23:19:19 +0300 Subject: [PATCH 1/9] feat: add ScrollToAnchorHash component --- .../scroll-to-anchor-hash/index.tsx | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 src/components/scroll-to-anchor-hash/index.tsx diff --git a/src/components/scroll-to-anchor-hash/index.tsx b/src/components/scroll-to-anchor-hash/index.tsx new file mode 100644 index 00000000..cd6b0af0 --- /dev/null +++ b/src/components/scroll-to-anchor-hash/index.tsx @@ -0,0 +1,28 @@ +import { useEffect, useRef } from 'react'; +import { useLocation } from 'react-router-dom'; + +function ScrollToAnchorHash() { + const location = useLocation(); + const lastHash = useRef(''); + + // listen to location change using useEffect with location as dependency + // https://jasonwatmore.com/react-router-v6-listen-to-location-route-change-without-history-listen + useEffect(() => { + if (location.hash) { + lastHash.current = location.hash.slice(1); // safe hash for further use after navigation + } + + if (lastHash.current && document.getElementById(lastHash.current)) { + setTimeout(() => { + document + .getElementById(lastHash.current) + ?.scrollIntoView({ behavior: 'smooth', block: 'start' }); + lastHash.current = ''; + }, 100); + } + }, [location]); + + return null; +} + +export default ScrollToAnchorHash; From 610d4b73f8d65fb92e26f6e9cec6b144b40d52a8 Mon Sep 17 00:00:00 2001 From: jsapro <77.3.77@mail.ru> Date: Tue, 9 Jan 2024 23:20:57 +0300 Subject: [PATCH 2/9] feat: add id to top-selling section --- src/pages/home/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index 4721f3fe..76df54e8 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -8,10 +8,12 @@ import TopSellingThisWeek from '@components/top-selling-this-week'; import AboutCompany from '@components/about-company/index.tsx'; import OurBlock from '@components/our-block'; import CatalogPromo from '@components/catalog-promo'; +import ScrollToAnchorHash from '@components/scroll-to-anchor-hash'; const Home: React.FC = () => { return (
+
@@ -32,7 +34,7 @@ const Home: React.FC = () => {
-
+
From 8d95dade7644cce8f14ff50a27e3b8de96f12d81 Mon Sep 17 00:00:00 2001 From: jsapro <77.3.77@mail.ru> Date: Tue, 9 Jan 2024 23:25:14 +0300 Subject: [PATCH 3/9] feat: add function to close burger on links click --- src/components/navigation-bar/index.tsx | 46 +++++++++++++++++++++---- src/layouts/header/index.tsx | 2 +- 2 files changed, 40 insertions(+), 8 deletions(-) diff --git a/src/components/navigation-bar/index.tsx b/src/components/navigation-bar/index.tsx index 6e4719da..042c6891 100644 --- a/src/components/navigation-bar/index.tsx +++ b/src/components/navigation-bar/index.tsx @@ -1,36 +1,68 @@ import React from 'react'; -import styles from './navigation-bar.module.scss'; import CustomNavLink from '@components/custom-nav-link'; +import { usePopup } from '@hooks/use-popup'; +import { useAuth } from '@hooks/use-auth'; +import styles from './navigation-bar.module.scss'; interface NavigationBarProps { isOpen: boolean; + onClick: () => void; } -const NavigationBar: React.FC = ({ isOpen }) => { +const NavigationBar: React.FC = ({ isOpen, onClick }) => { + const { isLoggedIn } = useAuth(); + const { handleOpenPopup } = usePopup(); + + const handleClick = () => { + onClick(); + handleOpenPopup('openPopupLogin'); + }; + return (
); From 105c4a72c62c7784cdd0a6457c4217934666653f Mon Sep 17 00:00:00 2001 From: jsapro <77.3.77@mail.ru> Date: Tue, 9 Jan 2024 23:25:54 +0300 Subject: [PATCH 4/9] fix: styles on burger --- .../navigation-bar/navigation-bar.module.scss | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/components/navigation-bar/navigation-bar.module.scss b/src/components/navigation-bar/navigation-bar.module.scss index 13c519bf..7285e556 100644 --- a/src/components/navigation-bar/navigation-bar.module.scss +++ b/src/components/navigation-bar/navigation-bar.module.scss @@ -19,14 +19,14 @@ } } -.burger-icon { - background: none; - border: none; - font-size: 24px; - color: #fff; - cursor: pointer; - transition: color 0.7s; -} +// .burger-icon { +// background: none; +// border: none; +// font-size: 24px; +// color: #fff; +// cursor: pointer; +// transition: color 0.7s; +// } .navigation-bar__nav { display: flex; @@ -72,7 +72,7 @@ align-items: center; flex-direction: column; list-style: none; - margin: 26px 0; + margin: 26px 0 0; width: 100%; padding: 0 20px; box-sizing: border-box; @@ -111,6 +111,10 @@ background: var(--inactive, #b8b8b8); } +.navigation-bar__link:last-of-type::after { + width: 0; +} + .navigation-bar__link_active { color: $green-primary-700; background-color: rgb(108 108 108 / 25%); From 3948104de411c18b593bd8a8d441cc6253e97d44 Mon Sep 17 00:00:00 2001 From: jsapro <77.3.77@mail.ru> Date: Tue, 9 Jan 2024 23:28:01 +0300 Subject: [PATCH 5/9] refactor: delete comments --- src/components/navigation-bar/navigation-bar.module.scss | 9 --------- src/components/scroll-to-anchor-hash/index.tsx | 4 +--- 2 files changed, 1 insertion(+), 12 deletions(-) diff --git a/src/components/navigation-bar/navigation-bar.module.scss b/src/components/navigation-bar/navigation-bar.module.scss index 7285e556..15ec8966 100644 --- a/src/components/navigation-bar/navigation-bar.module.scss +++ b/src/components/navigation-bar/navigation-bar.module.scss @@ -19,15 +19,6 @@ } } -// .burger-icon { -// background: none; -// border: none; -// font-size: 24px; -// color: #fff; -// cursor: pointer; -// transition: color 0.7s; -// } - .navigation-bar__nav { display: flex; flex-direction: column; diff --git a/src/components/scroll-to-anchor-hash/index.tsx b/src/components/scroll-to-anchor-hash/index.tsx index cd6b0af0..8e9824ed 100644 --- a/src/components/scroll-to-anchor-hash/index.tsx +++ b/src/components/scroll-to-anchor-hash/index.tsx @@ -5,11 +5,9 @@ function ScrollToAnchorHash() { const location = useLocation(); const lastHash = useRef(''); - // listen to location change using useEffect with location as dependency - // https://jasonwatmore.com/react-router-v6-listen-to-location-route-change-without-history-listen useEffect(() => { if (location.hash) { - lastHash.current = location.hash.slice(1); // safe hash for further use after navigation + lastHash.current = location.hash.slice(1); } if (lastHash.current && document.getElementById(lastHash.current)) { From 4f537bcf12845541e72a403999d712a31e6435cd Mon Sep 17 00:00:00 2001 From: jsapro <77.3.77@mail.ru> Date: Wed, 10 Jan 2024 12:12:33 +0300 Subject: [PATCH 6/9] feat: make NavLink work with anchor id --- src/components/custom-nav-link/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/custom-nav-link/index.tsx b/src/components/custom-nav-link/index.tsx index a26ee13f..009c383c 100644 --- a/src/components/custom-nav-link/index.tsx +++ b/src/components/custom-nav-link/index.tsx @@ -17,7 +17,8 @@ const CustomNavLink: React.FC = ({ onClick, }) => { const location = useLocation(); - const isActive = location.pathname === to; + const pathnameWithHash = location.pathname.concat(location.hash); + const isActive = pathnameWithHash === to; return ( Date: Wed, 10 Jan 2024 12:13:35 +0300 Subject: [PATCH 7/9] fix: corrected styles --- src/components/navigation-bar/index.tsx | 4 ++++ .../navigation-bar/navigation-bar.module.scss | 19 +++++++------------ 2 files changed, 11 insertions(+), 12 deletions(-) diff --git a/src/components/navigation-bar/index.tsx b/src/components/navigation-bar/index.tsx index 042c6891..088d69e3 100644 --- a/src/components/navigation-bar/index.tsx +++ b/src/components/navigation-bar/index.tsx @@ -41,6 +41,7 @@ const NavigationBar: React.FC = ({ isOpen, onClick }) => { onClick={onClick} to={'/'} className={`${styles['navigation-bar__link']}`} + classNameActive={`${styles['navigation-bar__link_active']}`} > О нас @@ -48,6 +49,7 @@ const NavigationBar: React.FC = ({ isOpen, onClick }) => { onClick={onClick} to="/#topSelling" className={`${styles['navigation-bar__link']}`} + classNameActive={`${styles['navigation-bar__link_active']}`} > Товары недели @@ -55,6 +57,7 @@ const NavigationBar: React.FC = ({ isOpen, onClick }) => { onClick={onClick} to={'/recipes'} className={`${styles['navigation-bar__link']}`} + classNameActive={`${styles['navigation-bar__link_active']}`} > Рецепты @@ -62,6 +65,7 @@ const NavigationBar: React.FC = ({ isOpen, onClick }) => { onClick={onClick} to={'/contacts'} className={`${styles['navigation-bar__link']}`} + classNameActive={`${styles['navigation-bar__link_active']}`} > Контакты diff --git a/src/components/navigation-bar/navigation-bar.module.scss b/src/components/navigation-bar/navigation-bar.module.scss index 15ec8966..7c682eb6 100644 --- a/src/components/navigation-bar/navigation-bar.module.scss +++ b/src/components/navigation-bar/navigation-bar.module.scss @@ -26,10 +26,9 @@ width: 100%; overflow: hidden; max-height: 0; - transition: max-height 0.7s ease-out; + transition: max-height 0.4s ease-out; border-radius: 0 0 8px 8px; - background: #f0f0f0; - box-shadow: 0 1px 1px 0 rgb(97 99 96 / 30%); + box-shadow: 0 10px 10px 0 rgb(97 99 96 / 50%); } .navigation-bar__button { @@ -48,7 +47,7 @@ pointer-events: auto; transition: 0.3s; cursor: pointer; - margin-top: 28px; + margin: 20px 0 30px; font-size: 13px; font-weight: 400; line-height: 140%; @@ -63,7 +62,7 @@ align-items: center; flex-direction: column; list-style: none; - margin: 26px 0 0; + margin: 0; width: 100%; padding: 0 20px; box-sizing: border-box; @@ -73,11 +72,11 @@ position: relative; display: flex; justify-content: center; - align-items: flex-start; + align-items: center; text-decoration: none; padding: 10px; height: 48px; - transition: background-color 0.7s; + transition: background-color 0.4s; width: 100%; box-sizing: border-box; color: var(--active, #1a1a1a); @@ -86,10 +85,6 @@ font-style: normal; font-weight: 400; line-height: 140%; - - &:not(:first-child) { - margin-top: 10px; - } } .navigation-bar__link::after { @@ -108,5 +103,5 @@ .navigation-bar__link_active { color: $green-primary-700; - background-color: rgb(108 108 108 / 25%); + background-color: $background-color-input-field; } From c5f63142e972fce3d3be56f01962160a418efd06 Mon Sep 17 00:00:00 2001 From: jsapro <77.3.77@mail.ru> Date: Wed, 10 Jan 2024 12:18:36 +0300 Subject: [PATCH 8/9] feat: add link to cart in burger menu --- src/components/navigation-bar/index.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/navigation-bar/index.tsx b/src/components/navigation-bar/index.tsx index 088d69e3..073ccafe 100644 --- a/src/components/navigation-bar/index.tsx +++ b/src/components/navigation-bar/index.tsx @@ -37,6 +37,14 @@ const NavigationBar: React.FC = ({ isOpen, onClick }) => { > Каталог + + Корзина + Date: Wed, 10 Jan 2024 13:39:25 +0300 Subject: [PATCH 9/9] feat: closing burger by clicking outside or by Escape --- src/components/navigation-bar/index.tsx | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/src/components/navigation-bar/index.tsx b/src/components/navigation-bar/index.tsx index 073ccafe..23400bd6 100644 --- a/src/components/navigation-bar/index.tsx +++ b/src/components/navigation-bar/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useRef } from 'react'; import CustomNavLink from '@components/custom-nav-link'; import { usePopup } from '@hooks/use-popup'; import { useAuth } from '@hooks/use-auth'; @@ -12,14 +12,37 @@ interface NavigationBarProps { const NavigationBar: React.FC = ({ isOpen, onClick }) => { const { isLoggedIn } = useAuth(); const { handleOpenPopup } = usePopup(); + const burgerRef = useRef(null); const handleClick = () => { onClick(); handleOpenPopup('openPopupLogin'); }; + const closeBurger = (e: MouseEvent) => { + if (isOpen && !burgerRef.current?.contains(e.target as Node)) { + onClick(); + } + }; + const closeBurgerOnEsc = (e: KeyboardEvent) => { + console.log(e); + if (isOpen && e.key === 'Escape') { + onClick(); + } + }; + + useEffect(() => { + document.addEventListener('pointerdown', closeBurger); + document.addEventListener('keydown', closeBurgerOnEsc); + return () => { + document.removeEventListener('pointerdown', closeBurger); + document.removeEventListener('keydown', closeBurgerOnEsc); + }; + }); + return (