Merge pull request #203 from johnchoi96/bugfix/202-navbar-close

Fixed header logic and modal text
johnchoi96 · Jul 28, 2024 · 8ef828b · 8ef828b
2 parents c0d043a + 9b1878e
commit 8ef828b
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 4 deletions.
diff --git a/src/components/modals/WebServiceStatusDetailModal.jsx b/src/components/modals/WebServiceStatusDetailModal.jsx
@@ -104,9 +104,7 @@ export default function WebServiceStatusDetailModal({ setModalOpen }) {
                     {serviceStatus === '❌' ? (
                         <Typography id='modal-modal-description' sx={{ mt: 2 }}>
                             <p className={`${textColor}`}>
-                                Downed status could be because the web service
-                                has a self-signed cert and you will need to
-                                visit the API at least once to approve access.
+                                The web app had trouble connecting to the web server.
                             </p>
                             <a
                                 className={`${textColor}`}

diff --git a/src/components/navbars/header/Header.jsx b/src/components/navbars/header/Header.jsx
@@ -30,6 +30,36 @@ export default function Header({ setToastState }) {
             })
     }, [])
 
+    // For mobile only: close navbar when link tapped
+    useEffect(() => {
+        const navbarLinks = document.querySelectorAll('.navbar-nav .nav-link')
+
+        const handleCollapse = () => {
+            const navbarCollapse = document.getElementById('navbarSupportedContent')
+            if (navbarCollapse.classList.contains('show')) {
+                const bsCollapse = new window.bootstrap.Collapse(navbarCollapse)
+                bsCollapse.hide()
+            }
+        }
+
+        navbarLinks.forEach(link => {
+            link.addEventListener('click', handleCollapse)
+        })
+
+        return () => {
+            navbarLinks.forEach(link => {
+                link.removeEventListener('click', handleCollapse)
+            })
+        }
+    }, [])
+
+    const handleNavLinkClick = () => {
+        const navbarCollapse = document.getElementById('navbarSupportedContent');
+        if (navbarCollapse && navbarCollapse.classList.contains('show')) {
+            navbarCollapse.classList.remove('show');
+        }
+    }
+
     return (
         <div>
             {modalOpen ? (
@@ -53,7 +83,7 @@ export default function Header({ setToastState }) {
                 }`}
             >
                 <div className='navbar-height container-fluid'>
-                    <NavLink className='navbar-brand nav-link fw-bold' to='/'>
+                    <NavLink className='navbar-brand nav-link fw-bold' to='/' onClick={handleNavLinkClick}>
                         Home
                     </NavLink>
                     <button