Worked to make the classpage more responsive to phone, so it looks better

Author: Dauphin-davlon01

src/components/ClassPage.css

@@ -6,6 +6,7 @@
 }
 
 .side-bar {
+  display: block;
   grid-area: sidebar;
   background-color: #f0f0f0;
   padding: 20px;
@@ -114,3 +115,73 @@ ul {
   text-decoration: underline; /* Add underline on hover */
 }
 
+
+/* Dropdown Menu */
+.dropdown {
+  position: relative;
+  display: none;
+}
+
+.dropdown-icon {
+  margin-left : 10px;
+}
+
+
+@media screen and (max-width: 768px) {
+
+  .department-container {
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: auto; /* Change to auto for single column layout */
+    grid-template-areas: "main"; /* Only main area on smaller screens */
+  }
+
+  .side-bar {
+    display: none; /* Hide sidebar on smaller screens */
+  }
+
+  .dropdown {
+    display: inline-block; /* Show dropdown button on smaller screens */
+  }
+
+  /* Dropdown Button */
+  .dropbtn {
+    background-color: #721212;
+    color: white;
+    padding: 10px;
+    font-size: 16px;
+    border: none;
+    cursor: pointer;
+  }
+
+  /* Dropdown Content (Hidden by Default) */
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    z-index: 1;
+  }
+
+  /* Links inside the dropdown */
+  .dropdown-content button {
+    display: block;
+    padding: 10px;
+    text-decoration: none;
+    color: black;
+  }
+
+  /* Change color of dropdown links on hover */
+  .dropdown-content button:hover {
+    background-color: #ddd;
+  }
+
+  /* Show the dropdown menu on hover */
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }
+
+  
+
+}
+

src/components/ClassPage.jsx

@@ -94,6 +94,8 @@ const ClassPage = () => {
   const [newPostTitle, setNewPostTitle] = useState('');
   const [newPostContent, setNewPostContent] = useState('');
   const [activeClass, setActiveClass] = useState(null); //working on this
+  const [dropdownVisible, setDropdownVisible ] = useState(false);
+
 
   useEffect(() => {
     const fetchCoursesFromBackend = async () => {
@@ -132,8 +134,9 @@ const ClassPage = () => {
   };
 
 
-  const handleClassClick = async (courseId) => {
-    setActiveClass(courseId);
+  const handleClassClick = async (course) => {
+    const courseId = course.id;
+    setActiveClass(course);
     try {
       const response = await axios.get(`https://courseconnect-delta.vercel.app/api/posts/${courseId}`);
       console.log(response)
@@ -180,7 +183,7 @@ const ClassPage = () => {
         content: newPostContent,
         username: userId,
         timestamp: new Date().toISOString(),
-        course: activeClass // hardcoded for now
+        course: activeClass.id 
       };
       try {
         const response = await axios.post('https://courseconnect-delta.vercel.app/api/posts', newPost);
@@ -197,14 +200,26 @@ const ClassPage = () => {
     }
   };
 
+
+  const toggleDropdown = () => {
+    setDropdownVisible((prevVisible) => !prevVisible);
+  };
+
+  // Function to handle course selection from the dropdown menu
+  const handleCourseSelection = (course) => {
+    handleClassClick(course); // Function to load posts for the selected course
+    setDropdownVisible(false); // Hide the dropdown menu after selection
+  };
+ 
   return (
     <div className="department-container">
+
       <div className="side-bar">
         <h2>Courses</h2>
         <ul>
           {courses.map((course, index) => (
               <button
-              onClick={() => handleClassClick(course.id)}
+              onClick={() => handleClassClick(course)}
               key={index}
               className={activeClass === course.id ? 'active' : ''}
             >
@@ -214,6 +229,20 @@ const ClassPage = () => {
         </ul>
       </div>
       <div className='main'>
+
+        <div className="dropdown">
+        <button className="dropbtn" onClick={toggleDropdown}>{activeClass ? activeClass.name : 'Select Course'}<span className="dropdown-icon">&#9660;</span></button>
+          {dropdownVisible && (
+            <div className="dropdown-content">
+              {courses.map((course) => (
+                <button key={course.id} onClick={() => handleCourseSelection(course)}>
+                  {course.name}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
         <h2>Posts</h2>
         {!showNewPostForm ? (
           <button onClick={createNewPost}>Create New Post</button>

src/components/LoginPage.css

@@ -45,6 +45,7 @@ button {
   font-size: 16px;
   cursor: pointer;
   transition: background-color 0.3s ease; /* Transition for button hover */
+  margin-bottom: 10px;
 }
 
 button:hover {