auto-close navbar when link is selected #1

dashboard/src/nav/Navbar.css

@@ -0,0 +1,51 @@
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 2rem;
+  background-color: #2c3e50;
+  color: white;
+}
+
+.navbar-logo {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.navbar-logo img {
+  width: 40px;
+  height: 40px;
+}
+
+.navbar-toggle {
+  display: none; /* Hidden by default */
+  background: none;
+  border: none;
+  color: white;
+  font-size: 1.5rem;
+  cursor: pointer;
+}
+
+/* Default Full-Width Navbar */
+.navbar-collapse {
+  display: flex;
+}
+
+.navbar-collapse ul {
+  list-style: none;
+  display: flex;
+  margin: 0;
+  padding: 0;
+}
+
+.navbar-collapse a {
+  color: white;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.navbar-collapse a:hover {
+  color: lightgray;
+}
+

dashboard/src/nav/Navbar.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { NavLink } from 'react-router-dom';
+import './Navbar.css'
 
 const Navbar = () => {
     const [isOpen, setIsOpen] = useState(false); // track if navbar is open / closed
@@ -16,36 +17,36 @@ const Navbar = () => {
                         <img src="./public/orc_favicon.svg" alt="ORC Logo" width="30" height="30" className="d-inline-block align-text-top"/>
                     {' '} NodeORC
                     </a>
-                    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" onClick={handleToggle}>
                         <span className="navbar-toggler-icon"></span>
                     </button>
-                    <div className="collapse navbar-collapse" id="navbarNav">
+                    <div className={`collapse navbar-collapse ${isOpen ? "open" : ""}`} id="navbarNav">
                         <ul className="navbar-nav">
                             <li className="nav-item">
                                 <NavLink
                                     className={({ isActive }) => isActive ? "nav-link active" : "nav-link"}
-                                    to="/">
+                                    to="/" onClick={handleClose}>
                                 Home
                                 </NavLink>
                             </li>
                             <li className="nav-item">
                                 <NavLink
                                     className={({ isActive }) => isActive ? "nav-link active" : "nav-link"}
-                                    to="/device">
+                                    to="/device" onClick={handleClose}>
                                     Device information
                                 </NavLink>
                             </li>
                             <li className="nav-item">
                                 <NavLink
                                     className={({ isActive }) => isActive ? "nav-link active" : "nav-link"}
-                                    to="/disk_management">
+                                    to="/disk_management" onClick={handleClose}>
                                     Disk management
                                 </NavLink>
                             </li>
                             <li className="nav-item">
                                 <NavLink
                                     className={({ isActive }) => isActive ? "nav-link active" : "nav-link"}
-                                    to="/camera_aim">
+                                    to="/camera_aim" onClick={handleClose}>
                                     Camera aiming
                                 </NavLink>
                             </li>

dashboard/src/views/home.jsx

@@ -6,41 +6,6 @@ import api from "../api"
 
 const Home = () => {
   const [count, setCount] = useState(0)
-  const [videoFeedUrl, setVideoFeedUrl] = useState("");
-  const [error, setError] = useState(null);
-  const [isLoading, setIsLoading] = useState(false);
-  // Dynamically generate the stream URL
-  useEffect(() => {
-    setIsLoading(true);
-    setError(null); // reset errors before doing a new check
-    const getVideoFeed = async () => {
-      try {
-        const feedUrl = `${api.defaults.baseURL}/video-feed`; // Dynamically get it from Axios
-        // test the feed by doing an API call
-        const response = await api.head('/video-feed');
-        console.log(response);
-        if (response.status === 200) {
-            setVideoFeedUrl(feedUrl); // Set the dynamically generated URL
-            console.log("Setting load status to false");
-            setIsLoading(false);
-
-        } else {
-            console.log("We have an error")
-            throw new Error(`Invalid video feed. Status Code: ${response.status}`);
-        }
-      } catch (error) {
-          setError('Failed to load video feed. Ensure the camera is connected and available.');
-          console.error("Error generating video feed URL:", error);
-      } finally {
-          console.log("Setting load status to false")
-          setIsLoading(false);
-      }
-
-    };
-
-    getVideoFeed();
-  }, []); // Empty dependency to run this once after the component is mounted
-
   return (
     <>
       <div>
@@ -52,19 +17,6 @@ const Home = () => {
         </a>
       </div>
       <h1>NodeORC configuration</h1>
-        {isLoading && <p>Loading video feed...</p>}
-
-        {error ? (
-            <p className="text-danger">{error}</p>
-        ) : (
-        videoFeedUrl && (
-          <img
-            src={videoFeedUrl} // Dynamically set the URL
-            alt="Live Video Stream"
-            style={{ maxWidth: "100%", height: "auto" }}
-          />
-        )
-   )}
 
       <div className="card">
         <button onClick={() => setCount((count) => count + 1)}>