From f4133fb1ddbce343685783a26da1c1d1bc5092d1 Mon Sep 17 00:00:00 2001 From: Lakshmi C J Date: Fri, 2 May 2025 22:19:51 +0530 Subject: [PATCH] feat: add mobile sidebar, add todo delete button --- src/assets/styles.css | 94 +++++++++++++++++++++++++++++++++++++++ src/scripts/Modules/UI.js | 26 ++++++++--- src/scripts/index.js | 74 ++++++++++++++++++++++++++++-- 3 files changed, 185 insertions(+), 9 deletions(-) diff --git a/src/assets/styles.css b/src/assets/styles.css index fecf640..140a966 100644 --- a/src/assets/styles.css +++ b/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; + } +} diff --git a/src/scripts/Modules/UI.js b/src/scripts/Modules/UI.js index e6c3761..2b1b015 100644 --- a/src/scripts/Modules/UI.js +++ b/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 = ` ${todoItem.dueDate} + `; 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 = ``; 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'); diff --git a/src/scripts/index.js b/src/scripts/index.js index 0bad82b..07d3388 100644 --- a/src/scripts/index.js +++ b/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(); + } + }); +} \ No newline at end of file