the title

FrontEnd/src/App.css

@@ -50,24 +50,6 @@
   font-size: 20px;
 }
 
-/* .navbar-cap-1 {
-  margin: 0;
-  font-size: 40px;
-  margin-top: 30px;
-  width: fit-content;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.navbar-cap-2 {
-  margin: 0;
-  font-size: 20px;
-  margin-top: 30px;
-  width: fit-content;
-  margin-left: auto;
-  margin-right: auto;
-} */
-
 .hidden {
   display: none;
 }
@@ -121,5 +103,165 @@
 }
 
 .rotate {
-  transform: rotate(90deg);
+  transform: rotate(360deg);
+}
+
+/* Dropdown Menu styles for buttons */
+.dropdown-menubutton, .dropdown-settingsbutton {
+  position: absolute;
+  top: 85%; /* Position it below the settings button */
+  background-color: #D9D9D9;
+  border-radius: 10px;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+  z-index: 20; /* Make sure it's above other elements */
+  width: 150px;
+  overflow: hidden; /* Ensures the border-radius clips the content */
+}
+
+.dropdown-menubutton{
+  left: 0;
+}
+
+.dropdown-settingsbutton{
+  right: 0;
+}
+
+.nav .dropdown-menubutton {
+  margin-left: 2rem; /* Margin */
+}
+
+.nav .dropdown-settingsbutton {
+  margin-right: 2rem; /* Margin */
+}
+
+/* Style for each item in the dropdown menu */
+.dropdown-menubutton a, .dropdown-settingsbutton a {
+  display: block;
+  background-color: #808080;
+  color: white;
+  border-radius: 15px;
+  top: 10px;
+  width: calc(100% - 20px);
+  padding: 5px;
+  margin: 5px 10px;
+  text-decoration: none;
+  transition: #154734 0.2s;
+  text-align: center;
+  font-weight: bold;
+  box-sizing: border-box;
+}
+
+/* Remove border from the last item */
+.dropdown-menubutton a:last-child, .dropdown-settingsbutton a:last-child {
+  border-bottom: none;
+}
+
+/* Hover effect for each item */
+.dropdown-menubutton a:hover, .dropdown-settingsbutton a:hover {
+  background-color: #154734;
+}
+
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2000;
+}
+
+.modal {
+  background-color: #D9D9D9;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  width: 60%;
+  height: 60%;
+  overflow-y: auto;
+  position: relative;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-title {
+  display: inline-block;
+  width: 150px;
+  background-color: #154734;
+  color: white;
+  border-radius: 15px;
+  padding: 5px;
+  margin: 10px 0;
+  text-align: center;
+  font-weight: bold;
+  box-sizing: border-box;
+}
+
+.modal-content {
+  color: black;
+  font-weight: bold;
+}
+
+.close-button {
+  position: absolute;
+  /* padding: 20px 20px; */
+  top: 10px;
+  right: 30px;
+  border: none;
+  background: none;
+  font-size: 30px;
+  font-weight: bold;
+  cursor: pointer;
+  color: #808080;
+}
+
+.close-button:hover {
+  color: #154734;
+}
+
+.modal-textarea {
+  flex-grow: 1;
+  overflow-y: auto;
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 10px;
+  border-radius: 5px;
+  color:black;
+  border: 1px solid #808080;
+  resize: none;
+}
+
+.modal-send-button {
+  padding: 5px;
+  background-color: #808080;
+  font-weight: bold;
+  color: white;
+  border: none;
+  border-radius: 15px;
+  cursor: pointer;
+  display: block;
+  background-color: #808080;
+  color: white;
+  margin: 5px 10px;
+  text-align: center;
+  box-sizing: border-box;
+  transition: #154734 0.2s;
+  width: 130px;
+}
+
+.modal-send-button:hover {
+  background-color: #154734;
+}
+
+.modal-content-container {
+  display: flex;
+  flex-direction: column;
+  height: 90%;
 }

FrontEnd/src/App.jsx

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

FrontEnd/src/Login.jsx

@@ -13,6 +13,25 @@ export default function Login() {
   const [password, setPassword] = useState('');
 
 
+  async function generateSessionId() {
+    try {
+      var myHeaders = new Headers();
+      myHeaders.append("Content-Type", "application/json");
+
+      var requestOptions = {
+          method: 'GET',
+          headers: myHeaders,
+          redirect: 'follow',
+          credentials: 'include'
+      };
+      const response = await fetch(import.meta.env.VITE_SERVER_ENDPOINT + "/chatBot/newSessionId", requestOptions)
+      const data = await response.json();
+      return data.res;
+  } catch (error) {
+      return "Sorry, there was an issue getting the response.";
+  }
+  }
+
   async function authorizeUser() {
     try {
       const credentials = JSON.stringify({
@@ -31,9 +50,11 @@ export default function Login() {
         credentials: 'include'
       };
 
-      const response = await fetch("http://18.189.195.246:443/auth/login", requestOptions);
+      const response = await fetch(import.meta.env.VITE_SERVER_ENDPOINT + "/auth/login", requestOptions);
 
       if (response.ok) {
+        const newSessionId = await generateSessionId(); // Generates a unique session ID
+        window.sessionStorage.setItem("currentSessionId", newSessionId);
         navigator('/home');
       } else {
         alert('Invalid Credentials');

FrontEnd/src/components/MenuButton.jsx

@@ -0,0 +1,89 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import MenuIcon from "../icons/MenuIcon.svg";
+import Modal from './Modal';
+
+export default function MenuButton() {
+    const [isModalVisible, setIsModalVisible] = useState(false);
+    const [modalContent, setModalContent] = useState(null);
+    const [isMenuDropdownOpen, setIsMenuDropdownOpen] = useState(false);
+    const [isMenuIconRotated, setIsMenuIconRotated] = useState(false);
+    const dropdownRef = useRef(null);
+    const navigate = useNavigate();
+    /* For Modal Title */
+    const [modalTitle, setModalTitle] = useState("");
+
+    const toggleMenuDropdown = () => {
+        setIsMenuDropdownOpen(!isMenuDropdownOpen);
+        setIsMenuIconRotated(!isMenuIconRotated);
+    };
+
+    const handleSyllabusClick = () => {
+        //Edit src
+        setModalContent(<iframe src="https://github.com/jesusjimenez32/PDF/blob/c8aeddbcff0dc05596c846d76ea8683c9050ce5a/CS%204485%20-%20FA2023%20-%20Syllabus.pdf" style={{ width: '100%', height: '100%' }} />);
+        setModalTitle("Syllabus");
+        setIsModalVisible(true);
+    };
+
+    const handleHomeworkClick = () => {
+        //Edit src
+        setModalContent(<iframe src="https://github.com/jesusjimenez32/PDF/blob/c8aeddbcff0dc05596c846d76ea8683c9050ce5a/CS%204485%20-%20FA2023%20-%20Syllabus.pdf" style={{ width: '100%', height: '100%' }} />);
+        setModalTitle("Homework");
+        setIsModalVisible(true);
+    };
+
+    const handleContactTAClick = () => {
+        setModalContent(
+            <div className="modal-content-container">
+                <textarea placeholder="Type your message here" className="modal-textarea"></textarea>
+                <button className="modal-send-button">Send</button>
+            </div>
+        );
+        setModalTitle("Contact TA");
+        setIsModalVisible(true);
+    };
+
+    // Clear modal content when closing
+    const closeModal = () => {
+        setIsModalVisible(false);
+        setModalContent(null);
+    };
+
+    useEffect(() => {
+        function handleClickOutside(event) {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsMenuDropdownOpen(false);
+            }
+        }
+
+        if (isMenuDropdownOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isMenuDropdownOpen]);
+
+    return (
+        <>
+            <button className="menu-button" onClick={toggleMenuDropdown}>
+                <img src={MenuIcon} alt="Menu Icon" className={`menu-icon ${isMenuIconRotated ? 'rotate' : ''}`} />
+            </button>
+            {isMenuDropdownOpen && (
+                <div ref={dropdownRef} className="dropdown-menubutton absolute left-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={handleSyllabusClick}>Syllabus</a>
+                    <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onClick={handleHomeworkClick}>Homework</a>
+                    <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onClick={handleContactTAClick}>Contact TA</a>
+                </div>
+            )}
+            <Modal
+                isVisible={isModalVisible}
+                onClose={closeModal}
+                title={modalTitle}
+            >
+                {modalContent}
+            </Modal>
+        </>
+    );
+}

FrontEnd/src/components/Modal.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const Modal = ({ isVisible, onClose, title, children }) => {
+    if (!isVisible) return null;
+
+    return (
+        <div className="modal-backdrop">
+            <div className="modal">
+                <button className="close-button" onClick={onClose}>×</button>
+                <div className="modal-header">
+                    <h2 className="modal-title">{title}</h2>
+                </div>
+                {children}
+            </div>
+        </div>
+    );
+};
+
+
+export default Modal;