Merge pull request #54 from Shaurya0108/settings

Settings function, added drop down with logout and settings page

FrontEnd/src/App.jsx

@@ -2,13 +2,15 @@ import './App.css'
 import {Routes, Route} from 'react-router-dom';
 import Login from './Login';
 import Home from './Home'
+import Settings from './Settings'
 
 export default function App() {
   return (
 
       <Routes>
         <Route path="/home" element={<Home/>} />
         <Route path="/" element={<Login/>} />
+        <Route path="/settings" element={<Settings/>}/>
       </Routes>
   );
 }

FrontEnd/src/Settings.jsx

@@ -0,0 +1,7 @@
+export default function Settings() {
+
+    return (
+        <div>Settings page</div>
+    )
+  }
+

FrontEnd/src/components/Navbar.jsx

@@ -1,14 +1,54 @@
+import { useState, useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
 import UTDIcon from "../images/UTD Icon.png";
 
 export default function Navbar() {
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const dropdownRef = useRef(null);
+    const navigate = useNavigate();
+
+    const toggleDropdown = () => setIsDropdownOpen(!isDropdownOpen);
+
+    const handleSettingsClick = () => {
+        toggleDropdown();
+        navigate('/settings');
+    };
+
+    const handleLogoutClick = () => {
+        toggleDropdown();
+        navigate('/');
+    };
+
+    useEffect(() => {
+        function handleClickOutside(event) {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsDropdownOpen(false);
+            }
+        }
+
+        if (isDropdownOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isDropdownOpen]);
+
     return (
-        <nav className="nav flex items-center justify-between">
+        <nav className="nav flex items-center justify-between relative">
             <img src={UTDIcon} className="utd-icon" alt="UTD Icon"></img>
             <div className="navbar-caption text-center mx-auto">
                 <h1 className="navbar-cap-1 text-4xl font-bold">The Virtual Teacher Assistant</h1>
                 <h3 className="navbar-cap-2 text-xl">Advanced Algorithms Design and Analysis</h3>
             </div>
-            <button className="settings-button"></button>
+            <button className="settings-button" onClick={toggleDropdown}></button>
+            {isDropdownOpen && (
+                <div ref={dropdownRef} className="dropdown-menu absolute right-0 top-20 mt-5 py-2 w-48 bg-white rounded-md shadow-xl z-50">
+                    <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onClick={handleSettingsClick}>Settings</a>
+                    <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onClick={handleLogoutClick}>Logout</a>
+                </div>
+            )}
         </nav>
     );
 }