make is correct its sid ebar will be simple menu item make samle and then on left make proper course like add module will open the module name and then user can add lesson etc in it but that is costing too much api use i want siomething simple like preview the design same time when they create and it will be statyic and then on save aoiu will hit and make the lcurrucim for them

components/sidebar.js

@@ -3,66 +3,46 @@ class CustomSidebar extends HTMLElement {
         this.attachShadow({ mode: 'open' });
         this.shadowRoot.innerHTML = `
             <style>
-                .sidebar-item:hover .sidebar-icon {
-                    background-color: rgba(59, 130, 246, 0.1);
-                    color: rgb(59, 130, 246);
+                .sidebar-item {
+                    padding: 0.75rem 1rem;
+                    margin: 0.25rem 0;
+                    border-radius: 0.375rem;
+                    cursor: pointer;
+                    transition: all 0.2s;
+                    display: flex;
+                    align-items: center;
                 }
-                .sidebar-item.active .sidebar-icon {
+                .sidebar-item:hover {
                     background-color: rgba(59, 130, 246, 0.1);
                     color: rgb(59, 130, 246);
                 }
-                .sidebar-item.active .sidebar-text {
+                .sidebar-item.active {
+                    background-color: rgba(59, 130, 246, 0.1);
                     color: rgb(59, 130, 246);
                     font-weight: 500;
                 }
+                .sidebar-icon {
+                    margin-right: 0.75rem;
+                }
             </style>
-            <div class="hidden md:flex md:flex-shrink-0">
-                <div class="flex flex-col w-64 border-r border-gray-200 bg-white">
-                    <div class="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
-                        <div class="flex items-center flex-shrink-0 px-4">
-                            <h1 class="text-xl font-bold text-primary-600">EduLoom</h1>
-                        </div>
-                        <div class="mt-5 flex-1 px-3 space-y-1">
-                            <a href="#" class="sidebar-item active group flex items-center px-2 py-2 text-sm font-medium rounded-md">
-                                <div class="sidebar-icon mr-3 flex-shrink-0 h-6 w-6 flex items-center justify-center rounded-md">
-                                    <i data-feather="book-open" class="h-4 w-4"></i>
-                                </div>
-                                <span class="sidebar-text">Curriculum</span>
-                            </a>
-                            <a href="#" class="sidebar-item group flex items-center px-2 py-2 text-sm font-medium rounded-md">
-                                <div class="sidebar-icon mr-3 flex-shrink-0 h-6 w-6 flex items-center justify-center rounded-md">
-                                    <i data-feather="users" class="h-4 w-4"></i>
-                                </div>
-                                <span class="sidebar-text">Students</span>
-                            </a>
-                            <a href="#" class="sidebar-item group flex items-center px-2 py-2 text-sm font-medium rounded-md">
-                                <div class="sidebar-icon mr-3 flex-shrink-0 h-6 w-6 flex items-center justify-center rounded-md">
-                                    <i data-feather="bar-chart-2" class="h-4 w-4"></i>
-                                </div>
-                                <span class="sidebar-text">Analytics</span>
-                            </a>
-                            <a href="#" class="sidebar-item group flex items-center px-2 py-2 text-sm font-medium rounded-md">
-                                <div class="sidebar-icon mr-3 flex-shrink-0 h-6 w-6 flex items-center justify-center rounded-md">
-                                    <i data-feather="settings" class="h-4 w-4"></i>
-                                </div>
-                                <span class="sidebar-text">Settings</span>
-                            </a>
-                        </div>
+            <div class="w-64 bg-white border-r border-gray-200 h-full p-4">
+                <h2 class="text-xl font-bold text-primary-600 mb-6">EduLoom</h2>
+                <div class="space-y-1">
+                    <div class="sidebar-item active">
+                        <i data-feather="book-open" class="sidebar-icon w-5 h-5"></i>
+                        <span>Curriculum Builder</span>
+                    </div>
+                    <div class="sidebar-item">
+                        <i data-feather="eye" class="sidebar-icon w-5 h-5"></i>
+                        <span>Preview</span>
                     </div>
-                    <div class="flex-shrink-0 flex border-t border-gray-200 p-4">
-                        <div class="flex items-center">
-                            <div>
-                                <img class="inline-block h-9 w-9 rounded-full" src="http://static.photos/people/200x200/42" alt="">
-                            </div>
-                            <div class="ml-3">
-                                <p class="text-sm font-medium text-gray-700">John Doe</p>
-                                <a href="#" class="text-xs font-medium text-gray-500 hover:text-gray-700">View profile</a>
-                            </div>
-                        </div>
+                    <div class="sidebar-item">
+                        <i data-feather="save" class="sidebar-icon w-5 h-5"></i>
+                        <span>Save Curriculum</span>
                     </div>
                 </div>
             </div>
-        `;
+`;
     }
 }
 customElements.define('custom-sidebar', CustomSidebar);

index.html

@@ -64,110 +64,80 @@
                             Add Module
                         </button>
                     </div>
-
-                    <!-- Curriculum Container -->
-                    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
-                        <!-- Module 1 -->
-                        <div class="border-b border-gray-200 last:border-b-0">
-                            <div class="px-6 py-4 bg-gradient-to-r from-primary-50 to-secondary-50 flex justify-between items-center">
-                                <div class="flex items-center gap-4">
-                                    <div class="w-10 h-10 rounded-full bg-primary-100 flex items-center justify-center text-primary-600">
-                                        <i data-feather="book"></i>
-                                    </div>
-                                    <div>
-                                        <h3 class="font-semibold text-gray-900">Module 1: Introduction to Course</h3>
-                                        <p class="text-sm text-gray-500">5 lessons • 2 hours 15 min</p>
-                                    </div>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <!-- Curriculum Builder -->
+                        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+                            <h2 class="text-xl font-semibold mb-4">Build Your Curriculum</h2>
+                            
+                            <div class="space-y-4">
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-700 mb-1">Module Title</label>
+                                    <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Enter module title">
                                 </div>
-                                <div class="flex gap-2">
-                                    <button class="p-2 rounded-lg hover:bg-gray-100 text-gray-500 hover:text-gray-700">
-                                        <i data-feather="edit-2" class="w-4 h-4"></i>
-                                    </button>
-                                    <button class="p-2 rounded-lg hover:bg-gray-100 text-gray-500 hover:text-gray-700">
-                                        <i data-feather="chevron-down" class="w-4 h-4"></i>
-                                    </button>
-                                </div>
-                            </div>
-
-                            <!-- Lessons -->
-                            <div class="divide-y divide-gray-100">
-                                <!-- Lesson 1 -->
-                                <div class="px-6 py-4 flex items-start gap-4 hover:bg-gray-50">
-                                    <div class="w-8 h-8 rounded-full bg-secondary-100 flex items-center justify-center text-secondary-600 mt-1">
-                                        <i data-feather="play" class="w-3 h-3"></i>
-                                    </div>
-                                    <div class="flex-1">
-                                        <h4 class="font-medium text-gray-900">Welcome to the Course</h4>
-                                        <p class="text-sm text-gray-500">10 min • Video</p>
-                                    </div>
+                                
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-700 mb-1">Add Lesson</label>
                                     <div class="flex gap-2">
-                                        <button class="p-1 rounded-lg hover:bg-gray-100 text-gray-500 hover:text-gray-700">
-                                            <i data-feather="edit-2" class="w-4 h-4"></i>
-                                        </button>
-                                        <button class="p-1 rounded-lg hover:bg-gray-100 text-gray-500 hover:text-gray-700">
-                                            <i data-feather="trash-2" class="w-4 h-4"></i>
+                                        <select class="flex-1 px-3 py-2 border border-gray-300 rounded-md">
+                                            <option>Video Lesson</option>
+                                            <option>Reading</option>
+                                            <option>Quiz</option>
+                                            <option>Assignment</option>
+                                        </select>
+                                        <button class="bg-primary-600 text-white px-3 py-2 rounded-md">
+                                            <i data-feather="plus"></i>
                                         </button>
                                     </div>
                                 </div>
-
-                                <!-- Lesson 2 -->
-                                <div class="px-6 py-4 flex items-start gap-4 hover:bg-gray-50">
-                                    <div class="w-8 h-8 rounded-full bg-secondary-100 flex items-center justify-center text-secondary-600 mt-1">
-                                        <i data-feather="file-text" class="w-3 h-3"></i>
-                                    </div>
-                                    <div class="flex-1">
-                                        <h4 class="font-medium text-gray-900">Course Overview</h4>
-                                        <p class="text-sm text-gray-500">15 min • Reading</p>
-                                    </div>
-                                    <div class="flex gap-2">
-                                        <button class="p-1 rounded-lg hover:bg-gray-100 text-gray-500 hover:text-gray-700">
-                                            <i data-feather="edit-2" class="w-4 h-4"></i>
-                                        </button>
-                                        <button class="p-1 rounded-lg hover:bg-gray-100 text-gray-500 hover:text-gray-700">
-                                            <i data-feather="trash-2" class="w-4 h-4"></i>
-                                        </button>
-                                    </div>
+                                
+                                <div class="border-t pt-4">
+                                    <button class="w-full bg-primary-600 hover:bg-primary-700 text-white py-2 rounded-md flex items-center justify-center gap-2">
+                                        <i data-feather="plus-circle"></i>
+                                        Add Module
+                                    </button>
                                 </div>
                             </div>
                         </div>
-
-                        <!-- Module 2 -->
-                        <div class="border-b border-gray-200 last:border-b-0">
-                            <div class="px-6 py-4 bg-white flex justify-between items-center">
-                                <div class="flex items-center gap-4">
-                                    <div class="w-10 h-10 rounded-full bg-primary-100 flex items-center justify-center text-primary-600">
-                                        <i data-feather="box"></i>
-                                    </div>
-                                    <div>
-                                        <h3 class="font-semibold text-gray-900">Module 2: Core Concepts</h3>
-                                        <p class="text-sm text-gray-500">8 lessons • 3 hours 40 min</p>
+                        
+                        <!-- Preview Panel -->
+                        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+                            <h2 class="text-xl font-semibold mb-4">Curriculum Preview</h2>
+                            
+                            <div class="space-y-3">
+                                <div class="bg-gray-50 p-3 rounded-lg border border-gray-200">
+                                    <h3 class="font-medium">Module 1: Introduction</h3>
+                                    <div class="mt-2 space-y-2">
+                                        <div class="flex items-center gap-2 text-sm">
+                                            <i data-feather="play" class="w-4 h-4 text-gray-500"></i>
+                                            <span>Welcome Video (5 min)</span>
+                                        </div>
+                                        <div class="flex items-center gap-2 text-sm">
+                                            <i data-feather="file-text" class="w-4 h-4 text-gray-500"></i>
+                                            <span>Course Overview</span>
+                                        </div>
                                     </div>
                                 </div>
-                                <div class="flex gap-2">
-                                    <button class="p-2 rounded-lg hover:bg-gray-100 text-gray-500 hover:text-gray-700">
-                                        <i data-feather="edit-2" class="w-4 h-4"></i>
-                                    </button>
-                                    <button class="p-2 rounded-lg hover:bg-gray-100 text-gray-500 hover:text-gray-700">
-                                        <i data-feather="chevron-down" class="w-4 h-4"></i>
-                                    </button>
+                                
+                                <div class="bg-gray-50 p-3 rounded-lg border border-gray-200">
+                                    <h3 class="font-medium">Module 2: Core Concepts</h3>
+                                    <div class="mt-2 space-y-2">
+                                        <div class="flex items-center gap-2 text-sm">
+                                            <i data-feather="play" class="w-4 h-4 text-gray-500"></i>
+                                            <span>Basic Principles (12 min)</span>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-
-                        <!-- Empty State -->
-                        <div class="px-6 py-12 text-center">
-                            <div class="mx-auto w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center text-gray-400 mb-4">
-                                <i data-feather="plus" class="w-8 h-8"></i>
+                            
+                            <div class="mt-6">
+                                <button class="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded-md flex items-center justify-center gap-2">
+                                    <i data-feather="save"></i>
+                                    Save Curriculum
+                                </button>
                             </div>
-                            <h3 class="text-lg font-medium text-gray-900 mb-1">Add your first module</h3>
-                            <p class="text-gray-500 max-w-md mx-auto">Start building your course curriculum by adding modules and lessons</p>
-                            <button class="mt-4 bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg inline-flex items-center gap-2">
-                                <i data-feather="plus"></i>
-                                Create Module
-                            </button>
                         </div>
                     </div>
-                </div>
+</div>
             </main>
         </div>
     </div>

script.js

@@ -1,73 +1,58 @@
-// Main application scripts
-document.addEventListener('DOMContentLoaded', function() {
-    // Initialize tooltips
-    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
-    tooltipTriggerList.map(function (tooltipTriggerEl) {
-        return new bootstrap.Tooltip(tooltipTriggerEl);
-    });
-
-    // Module accordion functionality
-    const moduleHeaders = document.querySelectorAll('.module-header');
-    moduleHeaders.forEach(header => {
-        header.addEventListener('click', () => {
-            const module = header.closest('.module');
-            const content = module.querySelector('.module-content');
-            const icon = header.querySelector('i');
 
-            // Toggle content visibility
-            content.classList.toggle('hidden');
+document.addEventListener('DOMContentLoaded', function() {
+    // Form handling for curriculum builder
+    const moduleForm = document.querySelector('#module-form');
+    const lessonForm = document.querySelector('#lesson-form');
+    const previewContainer = document.querySelector('#preview-container');
+    
+    if (moduleForm) {
+        moduleForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            const moduleTitle = this.querySelector('input[name="module-title"]').value;
             
-            // Rotate chevron icon
-            if (content.classList.contains('hidden')) {
-                icon.setAttribute('data-feather', 'chevron-right');
-            } else {
-                icon.setAttribute('data-feather', 'chevron-down');
-            }
-            feather.replace();
-        });
-    });
-
-    // Drag and drop functionality for lessons
-    const draggableLessons = document.querySelectorAll('.lesson');
-    draggableLessons.forEach(lesson => {
-        lesson.setAttribute('draggable', 'true');
-        
-        lesson.addEventListener('dragstart', () => {
-            lesson.classList.add('dragging');
-        });
-        
-        lesson.addEventListener('dragend', () => {
-            lesson.classList.remove('dragging');
+            // Update preview
+            const modulePreview = document.createElement('div');
+            modulePreview.className = 'bg-gray-50 p-3 rounded-lg border border-gray-200';
+            modulePreview.innerHTML = `
+                <h3 class="font-medium">${moduleTitle}</h3>
+                <div class="mt-2 space-y-2" id="lessons-${Date.now()}"></div>
+            `;
+            previewContainer.appendChild(modulePreview);
+            
+            // Reset form
+            this.reset();
         });
-    });
-
-    const lessonContainers = document.querySelectorAll('.lesson-container');
-    lessonContainers.forEach(container => {
-        container.addEventListener('dragover', e => {
+    }
+    
+    if (lessonForm) {
+        lessonForm.addEventListener('submit', function(e) {
             e.preventDefault();
-            const afterElement = getDragAfterElement(container, e.clientY);
-            const draggable = document.querySelector('.dragging');
+            const lessonType = this.querySelector('select[name="lesson-type"]').value;
+            const lessonTitle = this.querySelector('input[name="lesson-title"]').value;
+            const lessonDuration = this.querySelector('input[name="lesson-duration"]').value;
             
-            if (afterElement == null) {
-                container.appendChild(draggable);
-            } else {
-                container.insertBefore(draggable, afterElement);
+            // Update preview
+            const lastModule = previewContainer.lastElementChild;
+            if (lastModule) {
+                const lessonsContainer = lastModule.querySelector('div');
+                if (lessonsContainer) {
+                    const icon = lessonType === 'Video' ? 'play' : 
+                                lessonType === 'Reading' ? 'file-text' : 
+                                lessonType === 'Quiz' ? 'check-circle' : 'edit-3';
+                    
+                    const lessonElement = document.createElement('div');
+                    lessonElement.className = 'flex items-center gap-2 text-sm';
+                    lessonElement.innerHTML = `
+                        <i data-feather="${icon}" class="w-4 h-4 text-gray-500"></i>
+                        <span>${lessonTitle}${lessonDuration ? ` (${lessonDuration} min)` : ''}</span>
+                    `;
+                    lessonsContainer.appendChild(lessonElement);
+                    feather.replace();
+                }
             }
-        });
-    });
-
-    function getDragAfterElement(container, y) {
-        const draggableElements = [...container.querySelectorAll('.lesson:not(.dragging)')];
-        
-        return draggableElements.reduce((closest, child) => {
-            const box = child.getBoundingClientRect();
-            const offset = y - box.top - box.height / 2;
             
-            if (offset < 0 && offset > closest.offset) {
-                return { offset: offset, element: child };
-            } else {
-                return closest;
-            }
-        }, { offset: Number.NEGATIVE_INFINITY }).element;
+            // Reset form
+            this.reset();
+        });
     }
 });

style.css

@@ -1,3 +1,4 @@
+
 /* Custom styles that can't be achieved with Tailwind */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
@@ -5,9 +6,30 @@ body {
     font-family: 'Inter', sans-serif;
 }
 
-/* Smooth transitions for sidebar */
-.sidebar-transition {
-    transition: all 0.3s ease-in-out;
+/* Form styles */
+input, select {
+    transition: all 0.2s;
+}
+
+input:focus, select:focus {
+    outline: none;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+/* Preview panel styles */
+.preview-module {
+    transition: all 0.2s;
+}
+
+.preview-module:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+/* Button transitions */
+button {
+    transition: all 0.2s;
 }
 
 /* Custom scrollbar */
@@ -28,14 +50,3 @@ body {
 ::-webkit-scrollbar-thumb:hover {
     background: #a8a8a8;
 }
-
-/* Lesson drag handle */
-.drag-handle {
-    cursor: move;
-    opacity: 0.5;
-    transition: opacity 0.2s;
-}
-
-.drag-handle:hover {
-    opacity: 1;
-}