From c1abd36482c6acc95c0cb95158c05bde4fdc149a Mon Sep 17 00:00:00 2001 From: Taqi Tahmid Date: Fri, 11 Apr 2025 11:51:40 +0300 Subject: [PATCH] frontend: close navigation dropdown when clicked close the navigation dropdown if any click is registered anywhere in the DOM. Previously the dropdown was closed only when clicked --- README.md | 6 +++--- frontend/src/components/Navbar.tsx | 13 +++++++++++++ 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 75b6c2d..bc01655 100644 --- a/README.md +++ b/README.md @@ -26,9 +26,9 @@ This website is packaged as a container and deployed using nginx. ```bash source .env docker build -t my-portfolio-app . -docker tag my-portfolio-app:latest ${DOCKER_REGISTRY}/my-portfolio-app:latest -docker push ${DOCKER_REGISTRY}/my-portfolio-app:latest +docker tag my-portfolio-app:latest $DOCKER_REGISTRY/my-portfolio-app:latest +docker push $DOCKER_REGISTRY/my-portfolio-app:latest # Check the registry -curl -u user:pass https://${DOCKER_REGISTRY}/v2/_catalog +curl -u user:pass https://$DOCKER_REGISTRY/v2/_catalog ``` \ No newline at end of file diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx index 8a1f2f2..4faef76 100644 --- a/frontend/src/components/Navbar.tsx +++ b/frontend/src/components/Navbar.tsx @@ -26,6 +26,19 @@ const Navbar: React.FC = ({ toggleDarkMode, darkMode }) => { localStorage.setItem('DARK_MODE', String(darkMode)) }, [darkMode]) + useEffect(() => { + const handleClickoutside = (event: MouseEvent) => { + if (menuRef.current && !menuRef.current.contains(event.target as Node)) { + setIsMenuOpen(false) + } + } + + document.addEventListener('mousedown', handleClickoutside) + return () => { + document.removeEventListener('mousedown', handleClickoutside) + } + }) + const menuItem = [ { title: 'Home', href: '/' }, { title: 'Experience', href: '/experience' },