artsmithai's picture
Great insight — you're absolutely right. A **right-side slide-out panel** (often called a “drawer” or “sidebar detail view”) is the standard in modern task and workflow apps (e.g., Asana, ClickUp, Linear, Notion). It solves three key problems:
d88f8ca verified
document.addEventListener('DOMContentLoaded', function() {
const drawer = document.querySelector('custom-task-drawer');
const openDrawerBtn = document.getElementById('openDrawer');
openDrawerBtn.addEventListener('click', () => {
drawer.openDrawer();
});
// Close drawer when clicking outside
document.addEventListener('click', (e) => {
if (!drawer.contains(e.target) && e.target !== openDrawerBtn) {
drawer.closeDrawer();
}
});
// Sample data for demonstration
const tasks = document.querySelectorAll('custom-task-card');
tasks.forEach(task => {
task.addEventListener('click', () => {
const taskData = {
title: task.getAttribute('title'),
po: task.getAttribute('po'),
status: task.getAttribute('status'),
due: task.getAttribute('due'),
priority: task.getAttribute('priority'),
assignee: task.getAttribute('assignee')
};
drawer.openDrawerWithData(taskData);
});
});
});