Spaces:
Running
Running
File size: 1,921 Bytes
6759add |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
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); |