From 09a5f4accb39f32bc82352beed30f8fe2913ab89 Mon Sep 17 00:00:00 2001
From: jsapro <77.3.77@mail.ru>
Date: Wed, 10 Jan 2024 13:39:25 +0300
Subject: [PATCH] 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<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']}`}>