Fix/burger menu

src/components/custom-nav-link/index.tsx

@@ -17,7 +17,8 @@ const CustomNavLink: React.FC<CustomNavLink> = ({
 	onClick,
 }) => {
 	const location = useLocation();
-	const isActive = location.pathname === to;
+	const pathnameWithHash = location.pathname.concat(location.hash);
+	const isActive = pathnameWithHash === to;
 
 	return (
 		<NavLink

src/components/navigation-bar/index.tsx

@@ -1,36 +1,103 @@
-import React from 'react';
-import styles from './navigation-bar.module.scss';
+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';
+import styles from './navigation-bar.module.scss';
 
 interface NavigationBarProps {
 	isOpen: boolean;
+	onClick: () => void;
 }
 
-const NavigationBar: React.FC<NavigationBarProps> = ({ isOpen }) => {
+const NavigationBar: React.FC<NavigationBarProps> = ({ isOpen, onClick }) => {
+	const { isLoggedIn } = useAuth();
+	const { handleOpenPopup } = usePopup();
+	const burgerRef = useRef<HTMLDivElement>(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 (
 		<div
+			ref={burgerRef}
 			className={`${styles['navigation-bar']} ${isOpen ? styles.visible : styles.hidden}`}
 		>
 			<nav className={`${styles['navigation-bar__nav']}`}>
-				<button className={`${styles['navigation-bar__button']}`}>Войти</button>
+				{!isLoggedIn && (
+					<button onClick={handleClick} className={`${styles['navigation-bar__button']}`}>
+						Войти
+					</button>
+				)}
 				<ul className={`${styles['navigation-bar__list']}`}>
 					<CustomNavLink
+						onClick={onClick}
 						to={'/catalog'}
 						className={`${styles['navigation-bar__link']}`}
 						classNameActive={`${styles['navigation-bar__link_active']}`}
 					>
 						Каталог
 					</CustomNavLink>
-					<CustomNavLink to={'/'} className={`${styles['navigation-bar__link']}`}>
+					<CustomNavLink
+						onClick={onClick}
+						to={'/cart'}
+						className={`${styles['navigation-bar__link']}`}
+						classNameActive={`${styles['navigation-bar__link_active']}`}
+					>
+						Корзина
+					</CustomNavLink>
+					<CustomNavLink
+						onClick={onClick}
+						to={'/'}
+						className={`${styles['navigation-bar__link']}`}
+						classNameActive={`${styles['navigation-bar__link_active']}`}
+					>
 						О нас
 					</CustomNavLink>
-					<CustomNavLink to={'/'} className={`${styles['navigation-bar__link']}`}>
+					<CustomNavLink
+						onClick={onClick}
+						to="/#topSelling"
+						className={`${styles['navigation-bar__link']}`}
+						classNameActive={`${styles['navigation-bar__link_active']}`}
+					>
 						Товары недели
 					</CustomNavLink>
-					<CustomNavLink to={'/'} className={`${styles['navigation-bar__link']}`}>
+					<CustomNavLink
+						onClick={onClick}
+						to={'/recipes'}
+						className={`${styles['navigation-bar__link']}`}
+						classNameActive={`${styles['navigation-bar__link_active']}`}
+					>
 						Рецепты
 					</CustomNavLink>
-					<CustomNavLink to={'/'} className={`${styles['navigation-bar__link']}`}>
+					<CustomNavLink
+						onClick={onClick}
+						to={'/contacts'}
+						className={`${styles['navigation-bar__link']}`}
+						classNameActive={`${styles['navigation-bar__link_active']}`}
+					>
 						Контакты
 					</CustomNavLink>
 				</ul>

src/components/navigation-bar/navigation-bar.module.scss

@@ -19,26 +19,16 @@
 	}
 }
 
-.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;
 	align-items: center;
 	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 {
@@ -57,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%;
@@ -72,7 +62,7 @@
 	align-items: center;
 	flex-direction: column;
 	list-style: none;
-	margin: 26px 0;
+	margin: 0;
 	width: 100%;
 	padding: 0 20px;
 	box-sizing: border-box;
@@ -82,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);
@@ -95,10 +85,6 @@
 	font-style: normal;
 	font-weight: 400;
 	line-height: 140%;
-
-	&:not(:first-child) {
-		margin-top: 10px;
-	}
 }
 
 .navigation-bar__link::after {
@@ -111,7 +97,11 @@
 	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%);
+	background-color: $background-color-input-field;
 }

src/components/scroll-to-anchor-hash/index.tsx

@@ -0,0 +1,26 @@
+import { useEffect, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
+
+function ScrollToAnchorHash() {
+	const location = useLocation();
+	const lastHash = useRef('');
+
+	useEffect(() => {
+		if (location.hash) {
+			lastHash.current = location.hash.slice(1);
+		}
+
+		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;

src/layouts/header/index.tsx

@@ -37,7 +37,7 @@ const Header: React.FC = () => {
 				</Link>
 				<Navigation />
 				<NavigationIcons />
-				<NavigationBar isOpen={openBurger} />
+				<NavigationBar isOpen={openBurger} onClick={ClickOpen} />
 			</div>
 		</header>
 	);

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 (
 		<div>
+			<ScrollToAnchorHash />
 			<section className={styles.home__sliderSection}>
 				<SliderComponent />
 			</section>
@@ -32,7 +34,7 @@ const Home: React.FC = () => {
 			<section className={styles.home__catalogSection}>
 				<CatalogPromo />
 			</section>
-			<section className={styles.home__topSellingThisWeek}>
+			<section id="topSelling" className={styles.home__topSellingThisWeek}>
 				<TopSellingThisWeek />
 			</section>
 			<section id="aboutCompany" className={styles.home__aboutCompany}>