Addressed the peer review comments. Corrected file names of description.js and dropdowns.js, changed sidebar.js and main.js so that sidebar.js can be exported and main.js can import. Full modularization should be acheived.

Author: Burhan Khan

templates/boneset.html

@@ -22,7 +22,6 @@
     </div>
 
     <div id="sidebar-container"></div>
-    <script src="sidebar.js"></script>
 
     <div id="editor-view">
         <div class="container">

templates/js/descripition.js templates/js/description.jstemplates/js/descripition.js renamed to templates/js/description.js

@@ -1,15 +1,19 @@
 // js/main.js
 import { fetchCombinedData } from './api.js';
 import { populateBonesetDropdown, setupDropdownListeners } from './dropdowns.js';
+import { initializeSidebar } from './sidebar.js';
 
 let combinedData = { bonesets: [], bones: [], subbones: [] };
 
 document.addEventListener('DOMContentLoaded', async () => {
+    // Initialize sidebar toggle behavior
+    initializeSidebar();
+
+    // Fetch and render bone data
     combinedData = await fetchCombinedData();
     populateBonesetDropdown(combinedData.bonesets);
     setupDropdownListeners(combinedData);
 
-    // Automatically pre-select the first boneset if available
     const boneset = combinedData.bonesets[0];
     if (boneset) {
         document.getElementById('boneset-select').value = boneset.id;

templates/js/dropdown.js templates/js/dropdowns.jstemplates/js/dropdown.js renamed to templates/js/dropdowns.js

@@ -1,8 +1,8 @@
-document.addEventListener('DOMContentLoaded', () => {
+// js/sidebar.js
+export function initializeSidebar() {
     const toggleButton = document.getElementById('toggle-sidebar');
     const sidebarContainer = document.getElementById('sidebar-container');
 
-    // Load the sidebar dynamically if not already loaded
     async function loadSidebar() {
         if (!sidebarContainer.innerHTML) {
             try {
@@ -15,15 +15,18 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
 
-    // Toggle sidebar visibility
-    toggleButton.addEventListener('click', async () => {
-        await loadSidebar(); // Ensure the sidebar is loaded
-        const sidebarElement = document.getElementById('sidebar');
+    if (toggleButton) {
+        toggleButton.addEventListener('click', async () => {
+            await loadSidebar(); // Ensure the sidebar is loaded
+            const sidebarElement = document.getElementById('sidebar');
 
-        if (sidebarElement.style.left === '0px') {
-            sidebarElement.style.left = '-250px'; // Close sidebar
-        } else {
-            sidebarElement.style.left = '0px'; // Open sidebar
-        }
-    });
-});
+            if (sidebarElement) {
+                if (sidebarElement.style.left === '0px') {
+                    sidebarElement.style.left = '-250px'; // Close sidebar
+                } else {
+                    sidebarElement.style.left = '0px'; // Open sidebar
+                }
+            }
+        });
+    }
+}