Merge pull request #13 from LakshmiCJayagopal/feat/responsiveness

feat: add mobile sidebar, add todo delete button

Author: codedstrings

src/assets/styles.css

@@ -168,6 +168,15 @@ body {
   padding: 10px;
   margin-bottom: 5px;
   border-radius: 5px;
+  position: relative;
+}
+
+.todo-item:hover .delete-todo-btn {
+  opacity: 0.8;
+}
+
+.todo-due-date {
+  margin-right: 5px;
 }
 
 .todo-checkbox {
@@ -213,6 +222,29 @@ body {
   background-color: var(--button-color-hover);
 }
 
+.delete-todo-btn {
+  background: transparent;
+  border: none;
+  color: var(--primary-dark);
+  cursor: pointer;
+  font-size: 0.9rem;
+  opacity: 0.6;
+  margin-left: 10px;
+  padding: 5px;
+  transition: all 0.2s ease;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 25px;
+  height: 25px;
+}
+
+.delete-todo-btn:hover {
+  opacity: 1;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
 /* Footer  */
 .footer {
   position: sticky;
@@ -334,3 +366,65 @@ body {
 .submit-todo:hover {
   background-color: var(--button-color-hover);
 }
+
+/* Hamburger menu icon - hidden on desktop */
+.hamburger-menu {
+  display: none !important;
+  font-size: 1.5rem;
+}
+
+/* Mobile styles */
+@media screen and (max-width: 768px) {
+  /* Hide the To-Do icon on mobile */
+  .header-left-section .fa-check-double {
+    display: none;
+  }
+  
+  /* Show hamburger menu on mobile */
+  .hamburger-menu {
+    display: block !important;
+    margin-right: 10px;
+  }
+  
+  /* Content layout changes for mobile */
+  .content {
+    position: relative; /* For absolute positioning of sidebar */
+  }
+  
+  /* Hide sidebar by default on mobile */
+  .sidebar {
+    position: absolute;
+    left: -100%;
+    top: 0;
+    height: 100%;
+    width: 80%;
+    z-index: 10;
+    transition: left 0.3s ease;
+    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+  }
+  
+  /* When sidebar is open */
+  .sidebar.open {
+    left: 0;
+  }
+  
+  /* Make taskview take full width by default */
+  .taskview {
+    width: 100%;
+  }
+  
+  /* Overlay when sidebar is open */
+  .sidebar-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  
+  .sidebar-overlay.active {
+    display: block;
+  }
+}

src/scripts/Modules/UI.js

@@ -102,6 +102,7 @@ export default class UI {
     this.loadProjects();
   }
 
+
   OpenProject(projectName) {
     const taskviewSection = document.querySelector(".taskview");
     taskviewSection.innerHTML = `
@@ -112,13 +113,16 @@ export default class UI {
     let todoItems = this.app.viewTodos(projectName); // load the projectTodos
     if (todoItems) {
       const tasksWrapper = taskviewSection.querySelector('.tasks-wrapper');
-      todoItems.forEach(todoItem => {
+      todoItems.forEach((todoItem, index) => {
         let todoElement = document.createElement("div");
         todoElement.className = `todo-item priority-${todoItem.priority.toLowerCase()}`;
         todoElement.innerHTML = `
           <input type="checkbox" class="todo-checkbox" id="todo-${todoItem.title}" ${todoItem.completed ? 'checked' : ''}>
           <label for="todo-${todoItem.title}" class="todo-title">${todoItem.title}</label>
           <span class="todo-due-date">${todoItem.dueDate}</span>
+          <button class="delete-todo-btn" data-index="${index}">
+            <i class="fas fa-times"></i>
+          </button>
         `;
         tasksWrapper.appendChild(todoElement);
 
@@ -129,20 +133,32 @@ export default class UI {
           this.OpenProject(projectName);  // Refresh the project view
         });
 
+        // Add event listener for delete button
+        const deleteBtn = todoElement.querySelector('.delete-todo-btn');
+        deleteBtn.addEventListener('click', (event) => {
+          this.onDeleteTodo(event, projectName);
+        });
       });
     }
-  
     // Create the "Create New ToDo" button
     let createNewTodoBtn = document.createElement("div");
     createNewTodoBtn.classList.add("new-todo-btn-wrapper");
     createNewTodoBtn.innerHTML = `<button class="new-todo-btn">Add New Task</button>`;
     taskviewSection.appendChild(createNewTodoBtn);
-  
+
     // Open the modal when "Create New ToDo" button is clicked
     createNewTodoBtn.addEventListener('click', () => this.onCreateNewTodo(projectName));
   }
-  
-  onProjectDelete(event) {
+  // Add this new method to the UI class to handle task deletion
+  onDeleteTodo(event, projectName) {
+    const todoIndex = parseInt(event.currentTarget.getAttribute('data-index'));
+    
+    if (confirm('Are you sure you want to delete this task?')) {
+      this.app.removeTodoFromProject(projectName, todoIndex);
+      this.OpenProject(projectName); // Refresh the project view
+    }
+  }
+    onProjectDelete(event) {
     try {
       const projectItem = event.currentTarget.closest('.project-item');
       const projectButton = projectItem.querySelector('.button-project');

src/scripts/index.js

@@ -4,10 +4,76 @@ import '@fortawesome/fontawesome-free/css/all.min.css';
 import UI from './Modules/UI'
 import TodoApp from './Modules/TodoApp';
 document.addEventListener('DOMContentLoaded', () => {
-    const ui = new UI();
-    ui.loadHomepage();
-  });
+  const ui = new UI();
+  ui.loadHomepage();
+  
+  // Setup mobile sidebar functionality
+  setupMobileSidebar();
+  
+  // Update date display
   const dateTimeEle = document.getElementById("currentDatetime");
   const currDate = new Date();
   dateTimeEle.innerText = currDate.toLocaleDateString();
-// mainMenu(); //use to call the consoleApp(uncomment import statement).
+});
+
+function setupMobileSidebar() {
+  // Create hamburger menu element
+  const hamburgerMenu = document.createElement('i');
+  hamburgerMenu.className = 'fas fa-bars hamburger-menu';
+  
+  // Add hamburger to header's left section
+  const headerLeftSection = document.querySelector('.header-left-section');
+  headerLeftSection.insertBefore(hamburgerMenu, headerLeftSection.firstChild);
+  
+  // Create overlay element
+  const overlay = document.createElement('div');
+  overlay.className = 'sidebar-overlay';
+  document.body.appendChild(overlay);
+  
+  // Add click event for hamburger menu
+  hamburgerMenu.addEventListener('click', toggleSidebar);
+  
+  // Add click event for overlay to close sidebar
+  overlay.addEventListener('click', closeSidebar);
+  
+  // Function to toggle sidebar
+  function toggleSidebar() {
+    const sidebar = document.querySelector('.sidebar');
+    
+    sidebar.classList.toggle('open');
+    overlay.classList.toggle('active');
+    
+    // Toggle hamburger icon between bars and X
+    if (sidebar.classList.contains('open')) {
+      hamburgerMenu.className = 'fas fa-times hamburger-menu';
+    } else {
+      hamburgerMenu.className = 'fas fa-bars hamburger-menu';
+    }
+  }
+  
+  // Function to close sidebar
+  function closeSidebar() {
+    const sidebar = document.querySelector('.sidebar');
+    sidebar.classList.remove('open');
+    overlay.classList.remove('active');
+    hamburgerMenu.className = 'fas fa-bars hamburger-menu';
+  }
+  
+  // Close sidebar when clicking on a project (better UX on mobile)
+  const projectsList = document.querySelector('.projects-list');
+  projectsList.addEventListener('click', function(e) {
+    if (window.innerWidth <= 768) {
+      // Check if clicked element is a project button or part of it
+      if (e.target.closest('.button-project')) {
+        closeSidebar();
+      }
+    }
+  });
+  
+  // Close sidebar when window resizes above mobile breakpoint
+  window.addEventListener('resize', function() {
+    if (window.innerWidth > 768) {
+      closeSidebar();
+    }
+  });
+}