style: close navbar when link is clicked in mobile

kossiitkgp · Nov 15, 2024 · e8fbc84 · e8fbc84
1 parent 8b66256
commit e8fbc84
Showing 1 changed file with 13 additions and 2 deletions.
diff --git 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>