Replace sidebar menu with collapsible category tree showing items

public/js/app.js

@@ -2,6 +2,22 @@ document.addEventListener('DOMContentLoaded', function() {
     const mainContent = document.getElementById('main-content');
     const appName = document.querySelector('.navbar-brand').textContent;
 
+    // Global function for editing item from tree
+    window.editItem = function(id) {
+        // Create a mock button to reuse handleEditItem
+        const mockBtn = { getAttribute: (attr) => attr === 'data-id' ? id : null };
+        handleEditItem.call(mockBtn);
+    };
+
+    // Function to toggle category children
+    window.toggleCategory = function(span) {
+        const li = span.parentElement;
+        const ul = li.querySelector('ul'); // First ul is children
+        if (ul) {
+            ul.style.display = ul.style.display === 'none' ? 'block' : 'none';
+        }
+    };
+
     // --- Helper Functions ---
     function setPageTitle(title) {
         document.title = `${appName} - ${title}`;

public/style.css

@@ -0,0 +1,26 @@
+.category-tree, .category-tree ul {
+    list-style: none;
+    padding-left: 20px;
+}
+
+.category-tree li {
+    margin: 5px 0;
+}
+
+.category {
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.items {
+    padding-left: 10px;
+}
+
+.item-link {
+    color: #007bff;
+    text-decoration: none;
+}
+
+.item-link:hover {
+    text-decoration: underline;
+}