improved front end look/feel for menu behaviour

localdevices · Jan 22, 2025 · 9000c19 · 9000c19
1 parent 3468c6d
commit 9000c19
Show file tree

Hide file tree

Showing 6 changed files with 192 additions and 44 deletions.
diff --git a/dashboard/README.md b/dashboard/README.md
@@ -18,6 +18,7 @@ npm install
 npm install axios  # for API connection
 npm install react-router-dom  # for organizing the router
 npm install dotenv  # for setting environment variables
+npm install react-icons
 
 # Start dev server, ensuring the API url is added as environment variable
 VITE_API_BASE_URL="http://<name-of-server>:<port-of-server>" npm run dev

diff --git a/dashboard/package-lock.json b/dashboard/package-lock.json
diff --git a/dashboard/package.json b/dashboard/package.json
@@ -15,6 +15,7 @@
     "dotenv": "^16.4.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.4.0",
     "react-router-dom": "^7.1.1",
     "webpack-dev-server": "^5.2.0"
   },

diff --git a/dashboard/src/App.css b/dashboard/src/App.css
@@ -1,5 +1,4 @@
 #root {
-  max-width: 1280px;
   margin: 0 auto;
   padding: 0 auto;
   // text-align: center;

diff --git a/dashboard/src/nav/Navbar.css b/dashboard/src/nav/Navbar.css
@@ -2,11 +2,18 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 1rem 2rem;
-  background-color: #2c3e50;
+  padding: 10px 20px;
+  background-color: #007bff;
   color: white;
 }
 
+.navbar-toggler {
+    cursor: pointer;
+    border: none;
+    background: none;
+    color: white;
+}
+
 .navbar-logo {
   display: flex;
   align-items: center;
@@ -49,3 +56,115 @@
   color: lightgray;
 }
 
+/* Navbar Styles */
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+    background-color: #007bff;
+    color: white;
+}
+
+.navbar-toggler {
+    cursor: pointer;
+    border: none;
+    background: none;
+    color: white;
+}
+
+.navbar-brand {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.navbar-right {
+    position: relative;
+}
+
+.wifi-button {
+    font-size: 22px;
+    color: white;
+    cursor: pointer;
+    transition: color 0.2s ease-in-out;
+}
+
+.wifi-button:hover {
+    color: #e0e0e0;
+}
+
+/* Sidebar Styles */
+.sidebar {
+    position: fixed;
+    top: 0;
+    left: -250px; /* Start hidden */
+    width: 250px;
+    height: 100%;
+    background-color: #343a40;
+    color: white;
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: start;
+    padding: 20px;
+    overflow-y: auto;
+    transition: left 0.3s ease;
+    z-index: 1050;
+}
+
+.sidebar.open {
+    left: 0; /* Slide in */
+}
+
+.sidebar-nav {
+    list-style: none;
+    padding: 0;
+    width: 100%;
+}
+
+.sidebar-nav li {
+    margin-bottom: 10px;
+}
+
+.sidebar-link {
+    text-decoration: none;
+    color: white;
+    font-size: 18px;
+    display: block;
+    padding: 10px 15px;
+    border-radius: 5px;
+    transition: background-color 0.2s ease;
+}
+
+.sidebar-link:hover {
+    background-color: #495057;
+}
+
+.sidebar-link.active {
+    background-color: #007bff;
+}
+
+/* Sidebar Close Button */
+.close-sidebar {
+    align-self: flex-end;
+    font-size: 24px;
+    font-weight: bold;
+    color: white;
+    background: none;
+    border: none;
+    cursor: pointer;
+    margin-bottom: 20px;
+}
+
+/* Overlay for the Sidebar */
+.sidebar-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1040;
+    cursor: pointer;
+}
diff --git a/dashboard/src/nav/Navbar.jsx b/dashboard/src/nav/Navbar.jsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { FaWifi } from 'react-icons/fa'; // Import WiFi icon
 import { NavLink } from 'react-router-dom';
 import './Navbar.css'
 
@@ -10,58 +11,75 @@ const Navbar = () => {
     const handleClose = () => {
       setIsOpen(false); // Closes the navbar when called
     };
+    const handleWiFiButtonClick = () => {
+        // Add your WiFi connection logic here
+        alert('Connect to WiFi functionality to be implemented.');
+    };
+
     return (
+        <>
             <nav className='navbar navbar-dark bg-primary'>
                 <div className='container-fluid'>
+                    <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>
                     <a className='navbar-brand' href="#">
                         <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" onClick={handleToggle}>
-                        <span className="navbar-toggler-icon"></span>
-                    </button>
-                    <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="/" onClick={handleClose}>
-                                Home
-                                </NavLink>
-                            </li>
-                            <li className="nav-item">
-                                <NavLink
-                                    className={({ isActive }) => isActive ? "nav-link active" : "nav-link"}
-                                    to="/device" onClick={handleClose}>
-                                    Device information
-                                </NavLink>
-                            </li>
-                            <li className="nav-item">
-                                <NavLink
-                                    className={({ isActive }) => isActive ? "nav-link active" : "nav-link"}
-                                    to="/disk_management" onClick={handleClose}>
-                                    Disk management settings
-                                </NavLink>
-                            </li>
-                            <li className="nav-item">
-                                <NavLink
-                                    className={({ isActive }) => isActive ? "nav-link active" : "nav-link"}
-                                    to="/water_level" onClick={handleClose}>
-                                    Water level settings
-                                </NavLink>
-                            </li>
-                            <li className="nav-item">
-                                <NavLink
-                                    className={({ isActive }) => isActive ? "nav-link active" : "nav-link"}
-                                    to="/camera_aim" onClick={handleClose}>
-                                    Aim your camera in the field
-                                </NavLink>
-                            </li>
-                        </ul>
+                    <div className="navbar-right">
+                        <FaWifi className="wifi-button" onClick={handleWiFiButtonClick}
+                        />
                     </div>
 
                 </div>
             </nav>
+            <div className={`sidebar ${isOpen ? 'open' : ''}`}>
+                <button className="close-sidebar" onClick={handleToggle}>
+                    &times;
+                </button>
+
+                <ul className="sidebar-nav">
+                    <li>
+                        <NavLink
+                            className={({ isActive }) => isActive ? "sidebar-link active" : "sidebar-link"}
+                            to="/" onClick={handleClose}>
+                        Home
+                        </NavLink>
+                    </li>
+                    <li>
+                        <NavLink
+                            className={({ isActive }) => isActive ? "sidebar-link active" : "sidebar-link"}
+                            to="/device" onClick={handleClose}>
+                            Device information
+                        </NavLink>
+                    </li>
+                    <li>
+                        <NavLink
+                            className={({ isActive }) => isActive ? "sidebar-link active" : "sidebar-link"}
+                            to="/disk_management" onClick={handleClose}>
+                            Disk management settings
+                        </NavLink>
+                    </li>
+                    <li>
+                        <NavLink
+                            className={({ isActive }) => isActive ? "sidebar-link active" : "sidebar-link"}
+                            to="/water_level" onClick={handleClose}>
+                            Water level settings
+                        </NavLink>
+                    </li>
+                    <li>
+                        <NavLink
+                            className={({ isActive }) => isActive ? "sidebar-link active" : "sidebar-link"}
+                            to="/camera_aim" onClick={handleClose}>
+                            Aim your camera in the field
+                        </NavLink>
+                    </li>
+                </ul>
+            </div>
+            {isOpen && <div className="sidebar-overlay" onClick={handleToggle}></div>}
+
+        </>
 
     );
 };