Added dropdown #368

vimistify · Oct 7, 2024 · f59c74f · f59c74f
1 parent dac8ade
commit f59c74f
Show file tree

Hide file tree

Showing 7 changed files with 335 additions and 133 deletions.
diff --git a/ambtracker.html b/ambtracker.html
@@ -84,9 +84,23 @@ <h2 style="display: flex;">ambu<p style="color: #3DBDEC;">Flow</p></h2>
             <li><a href="ambtracker.html">Manage Ambulance</a></li>
             <li id="logout"><a href="#" onclick="logout()"><i class="fa-solid fa-right-from-bracket"></i></a></li>
         </ul>
+        <div class="resp">
+            <button id="dropdown"><i class="fa-solid fa-bars"></i></button>
+            <li id="logout"><a href="#" onclick="logout()"><i class="fa-solid fa-right-from-bracket" style="color: white;"></i></a></li>
+        </div>
     </nav>
 </header>
 
+<!-- Dropdown -->
+<div class="dropdown-menu">
+    <ul class="navbar-links2">
+        <li><a href="hospital.html">Dashboard</a></li>
+        <li><a href="manage.html">Manage Status</a></li>
+        <li><a href="driver.html">Manage Driver</a></li>
+        <li><a href="ambtracker.html">Manage Ambulance</a></li>
+    </ul>
+ </div>
+
   <!-- Map container -->
   <div id="map"></div>
 
@@ -130,6 +144,19 @@ <h2 style="display: flex;">ambu<p style="color: #3DBDEC;">Flow</p></h2>
     // Initialize the map when the window loads
     window.onload = initMap;
 
+    // Dropdown
+    let flag = false
+    document.getElementById('dropdown').addEventListener('click', () => {
+      const dropdown = document.querySelector('.dropdown-menu');
+      if (flag) {
+        dropdown.style.display = 'none';
+        flag = false;
+      } else {
+          dropdown.style.display = 'block';
+          flag = true;
+      }
+    });
+
     function logout() {
       const confirmLogout = confirm('Are you sure you want to logout?');
         if (confirmLogout) {

diff --git a/driver.html b/driver.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Driver Dashboard</title>
     <link rel="stylesheet" href="src/css/driver.css">
+    <link rel="stylesheet" href="src/css/manage.css">
     <link rel="shortcut icon" href="ambulance.png" type="image/x-icon">
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKR3agIMLtauzDhz4fCu3heww0BV_81H4" async defer></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
@@ -17,7 +18,6 @@
         }
 
         #driverImage {
-            width: 100%;
             height: 320px;
             margin-bottom: 20px;
         }
@@ -47,8 +47,24 @@ <h2 style="display: flex;">ambu<p style="color: #3DBDEC;">Flow</p></h2>
                 <li><a href="ambtracker.html">Manage Ambulance</a></li>
                 <li id="logout"><a href="#" onclick="logout()"><i class="fa-solid fa-right-from-bracket"></i></a></li>
             </ul>
+            <div class="resp" style="margin-right: 50px;">
+                <button id="dropdown"><i class="fa-solid fa-bars"></i></button>
+                <li id="logout"><a href="#" onclick="logout()"><i class="fa-solid fa-right-from-bracket" style="color: white;"></i></a></li>
+            </div>
         </nav>
     </header>
+
+    <!-- Dropdown -->
+    <div class="dropdown-menu">
+        <ul class="navbar-links2">
+            <li><a href="hospital.html">Dashboard</a></li>
+            <li><a href="manage.html">Manage Status</a></li>
+            <li><a href="driver.html">Manage Driver</a></li>
+            <li><a href="ambtracker.html">Manage Ambulance</a></li>
+        </ul>
+     </div>
+
+
     <div class="dashboard-container">
         <h1>Welcome, <span id="driverName">Driver ___</span></h1>
         <p id="status">You are currently: <strong id="availability">OFF DUTY</strong></p>
@@ -142,6 +158,19 @@ <h1>Welcome, <span id="driverName">Driver ___</span></h1>
                 alert("Logged out successfully!");
             }
         }  
+
+        // Dropdown
+        let flag = false
+        document.getElementById('dropdown').addEventListener('click', () => {
+            const dropdown = document.querySelector('.dropdown-menu');
+            if (flag) {
+                dropdown.style.display = 'none';
+                flag = false;
+            } else {
+                dropdown.style.display = 'block';
+                flag = true;
+            }
+        });
     </script>
 </body>
 </html>
diff --git a/hospital.html b/hospital.html
@@ -24,8 +24,23 @@ <h2 style="display: flex;">ambu<p style="color: #3DBDEC;">Flow</p></h2>
                 <li><a href="ambtracker.html">Manage Ambulance</a></li>
                 <li id="logout"><a href="#" onclick="logout()"><i class="fa-solid fa-right-from-bracket"></i></a></li>
             </ul>
+            <div class="resp">
+                <button id="dropdown"><i class="fa-solid fa-bars"></i></button>
+                <li id="logout"><a href="#" onclick="logout()"><i class="fa-solid fa-right-from-bracket" style="color: white;"></i></a></li>
+            </div>
         </nav>
     </header>
+
+    <!-- Dropdown -->
+     <div class="dropdown-menu">
+        <ul class="navbar-links2">
+            <li><a href="hospital.html">Dashboard</a></li>
+            <li><a href="manage.html">Manage Status</a></li>
+            <li><a href="driver.html">Manage Driver</a></li>
+            <li><a href="ambtracker.html">Manage Ambulance</a></li>
+        </ul>
+     </div>
+
     <div class="dashboard-container">
         <img src="images/Ambulance Tracker.png" alt="Bobble-AI Logo" style="width: 250px; height: auto; margin-bottom: 10px; margin-left: 30px;";>
 
@@ -39,6 +54,18 @@ <h2 style="font-family: 'Arial', sans-serif; font-size: 17px; color: #666; margi
                 alert('Manage Drivers button clicked!');
                 // Example: window.location.href = 'manage-drivers.html';
             }
+
+            let flag = false
+            document.getElementById('dropdown').addEventListener('click', () => {
+                const dropdown = document.querySelector('.dropdown-menu');
+                if (flag) {
+                    dropdown.style.display = 'none';
+                    flag = false;
+                } else {
+                    dropdown.style.display = 'block';
+                    flag = true;
+                }
+            });
 
             function manageAmbulances() {
                 // Action to manage ambulances, such as opening a page or modal

diff --git a/manage.html b/manage.html
@@ -22,11 +22,25 @@ <h2 style="display: flex;">ambu<p style="color: #3DBDEC;">Flow</p></h2>
                 <li><a href="manage.html">Manage Status</a></li>
                 <li><a href="driver.html">Manage Driver</a></li>
                 <li><a href="ambtracker.html">Manage Ambulance</a></li>
-                <li id="logout"><a href="#" onclick="logout()"><i class="fa-solid fa-right-from-bracket"></i></a></li>
+                <li id="logout"><a href="#"><i class="fa-solid fa-right-from-bracket"></i></a></li>
             </ul>
+            <div class="resp">
+                <button id="dropdown"><i class="fa-solid fa-bars"></i></button>
+                <li id="logout" onclick="logout1()"><a href="#"><i class="fa-solid fa-right-from-bracket" style="color: white;"></i></a></li>
+            </div>
         </nav>
     </header>
 
+    <!-- Dropdown -->
+    <div class="dropdown-menu">
+        <ul class="navbar-links2">
+            <li><a href="hospital.html">Dashboard</a></li>
+            <li><a href="manage.html">Manage Status</a></li>
+            <li><a href="driver.html">Manage Driver</a></li>
+            <li><a href="ambtracker.html">Manage Ambulance</a></li>
+        </ul>
+     </div>
+
     <main>
         <div class="manage-container">
             <h1>Manage Status</h1>
@@ -123,6 +137,19 @@ <h2 id="ambulanceFormTitle" style="margin-bottom: 20px;">Add Ambulance</h2>
             section.classList.add('active');
         }
 
+        // Dropdown
+        let flag = false
+        document.getElementById('dropdown').addEventListener('click', () => {
+            const dropdown = document.querySelector('.dropdown-menu');
+            if (flag) {
+                dropdown.style.display = 'none';
+                flag = false;
+            } else {
+                dropdown.style.display = 'block';
+                flag = true;
+            }
+        });
+
         // Function to hide a section
         function hideSection(section) {
             section.classList.add('hidden');
@@ -303,6 +330,15 @@ <h2 id="ambulanceFormTitle" style="margin-bottom: 20px;">Add Ambulance</h2>
             } else return
         });
 
+        // Logout (for small screens)
+        function logout1(){
+            cf = confirm('Are you sure you want to logout?');
+            if (cf) {
+                window.location.href = 'index.html';
+                alert("Logged out successfully!");
+            } else return
+        }
+
     </script>
 </body>
 </html>