Menu test, it's cool but not something I think is needed, but here is a cool...

Menu test, it's cool but not something I think is needed, but here is a cool test feature on a shit branch nonetheless

client/src/Views/Lobby.jsx

@@ -7,6 +7,7 @@ import { addDoc, collection, getDocs,onSnapshot,orderBy,query, serverTimestamp }
 import {db,auth} from '../firebase/config.js';
 
 import { onAuthStateChanged } from 'firebase/auth';
+import TaskList from '../components/TaskList.jsx';
 
 const Lobby=()=>{
     const user=useSelector(selectUsers).currentUser
@@ -45,7 +46,7 @@ const Lobby=()=>{
 
     return(
         <div className='grid-container'>
-            <section>
+            {/* <section>
                 <p>i am sam but logged in as {user.email}</p>
                 <input value={newMessage} onChange={e=> setNewMessage(e.target.value)}/>
                 <button onClick={sendMessage}>
@@ -59,7 +60,8 @@ const Lobby=()=>{
                     </div>
                 ))}
               
-            </section>
+            </section> */}
+            <TaskList /> {/* Testing a menu idea, chatgpt did this */}
         </div>  
     )
 }

client/src/components/TaskList.css

+/* CSS for the TaskList component */
+
+ 
+  .task-list {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start; /* Aligns to top instead of center */
+    width: 100%; /* Adjusts to parent width */
+    height: 100%; /* Adjusts to parent height */
+    padding: 20px; /* Optional padding to give some space inside the outlet */
+    background-color: #f5f5f5;
+  }
+  
+  
+  .task-item {
+    position: relative;
+    width: 300px;
+    padding: 15px;
+    margin: 10px;
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease-in-out;
+  }
+  
+  .task-item:hover {
+    transform: translateY(-5px);
+  }
+  
+  .task-content {
+    font-size: 18px;
+    font-weight: 500;
+  }
+  
+  .task-menu-preview {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    opacity: 0.5;
+    display: flex;
+    gap: 10px;
+    transition: opacity 0.3s ease;
+  }
+  
+  .task-menu-full {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 10px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+    z-index: 10;
+  }
+  
+  .task-menu-full button {
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    padding: 8px 12px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+  }
+  
+  .task-menu-full button:hover {
+    background-color: #0056b3;
+  }
+  
+  .icon {
+    font-size: 18px;
+  }
+  
\ No newline at end of file

client/src/components/TaskList.jsx

+import React, { useState } from 'react';
+import './TaskList.css';
+
+const TaskList = () => {
+  const [hoveredTask, setHoveredTask] = useState(null);
+  const [selectedTask, setSelectedTask] = useState(null);
+
+  const tasks = [
+    { id: 1, name: 'Finish Report', status: 'To Do' },
+    { id: 2, name: 'Update Website', status: 'In Progress' },
+    { id: 3, name: 'Plan Event', status: 'To Do' },
+  ];
+
+  const handleHover = (taskId) => {
+    setHoveredTask(taskId);
+  };
+
+  const handleLeave = () => {
+    setHoveredTask(null);
+  };
+
+  const handleSelectTask = (taskId) => {
+    setSelectedTask(taskId);
+  };
+
+  const handleAction = (action, taskId) => {
+    alert(`Action: ${action} on task ${taskId}`);
+  };
+
+  return (
+    <div className="task-list">
+      {tasks.map((task) => (
+        <div
+          key={task.id}
+          className="task-item"
+          onMouseEnter={() => handleHover(task.id)}
+          onMouseLeave={handleLeave}
+        >
+          <div className="task-content">
+            {task.name} - {task.status}
+          </div>
+          {hoveredTask === task.id && (
+            <div className="task-menu-preview">
+              <span className="icon">✏️</span>
+              <span className="icon">🗑️</span>
+              <span className="icon">➡️</span>
+            </div>
+          )}
+          {hoveredTask === task.id && (
+            <div className="task-menu-full">
+              <button onClick={() => handleAction('edit', task.id)}>Edit</button>
+              <button onClick={() => handleAction('delete', task.id)}>Delete</button>
+              <button onClick={() => handleAction('move', task.id)}>Move</button>
+              <button onClick={() => handleAction('complete', task.id)}>Complete</button>
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default TaskList;