From e8fbc84d81ac0ac03b726c6968a82bb41ab474b6 Mon Sep 17 00:00:00 2001
From: "prem12937@gmail.com" <prem12937@gmail.com>
Date: Fri, 15 Nov 2024 19:37:43 +0530
Subject: [PATCH] style: close navbar when link is clicked in mobile

---
 src/components/Navbar.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 8888eee2..0c3fcc67 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -72,6 +72,17 @@ const Navbar = () => {
     );
   }, [location.pathname]);
 
+  function closeNavbar() {
+    const element = document.getElementById('linkList');
+
+    if (element) { 
+      element.addEventListener('click', () => {
+        element.classList.remove('open');
+      });
+    }
+    setIsOpen(false);
+  }
+
   return (
     <div className='navbar'>
       <div className='light-logo'>
@@ -91,10 +102,10 @@ const Navbar = () => {
           <div className="dots dot6"></div>
         </div>
       </div>
-      <ul className={`link-container ${isOpen ? 'open' : ''}`}>
+      <ul id="linkList" className={`link-container ${isOpen ? 'open' : ''}`}>
         {LINKS.map((link) => (
           <li key={link.name}>
-            <Link to={link.link} className={link.isActive ? `link nav-glow` : `link`}>
+            <Link to={link.link} className={link.isActive ? `link nav-glow` : `link`} onClick={() => { closeNavbar() }}>
               {link.name}
             </Link>
           </li>