components/sidebar.js

class CustomSidebar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .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:hover {
                    background-color: rgba(59, 130, 246, 0.1);
                    color: rgb(59, 130, 246);
                }
                .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="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="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);