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 (