| class CustomSidebar extends HTMLElement { |
| connectedCallback() { |
| this.attachShadow({ mode: 'open' }); |
| const path = this.getAttribute('path') || ''; |
| this.shadowRoot.innerHTML = ` |
| <style> |
| :host { |
| display: block; |
| width: 250px; |
| } |
| |
| aside { |
| background: white; |
| border-radius: 0.75rem; |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
| padding: 1rem; |
| position: sticky; |
| top: 1rem; |
| } |
| |
| h3 { |
| font-size: 1rem; |
| font-weight: 600; |
| color: #1e293b; |
| margin-bottom: 1rem; |
| padding-bottom: 0.5rem; |
| border-bottom: 1px solid #e2e8f0; |
| } |
| |
| ul { |
| list-style: none; |
| padding: 0; |
| margin: 0; |
| } |
| |
| li { |
| margin-bottom: 0.5rem; |
| } |
| |
| a { |
| display: flex; |
| align-items: center; |
| padding: 0.5rem; |
| border-radius: 0.375rem; |
| color: #64748b; |
| text-decoration: none; |
| font-size: 0.875rem; |
| font-weight: 500; |
| transition: all 0.2s; |
| } |
| |
| a:hover { |
| color: #2563eb; |
| background-color: #eff6ff; |
| } |
| |
| a.active { |
| color: #2563eb; |
| background-color: #eff6ff; |
| font-weight: 600; |
| } |
| |
| i { |
| margin-right: 0.75rem; |
| width: 16px; |
| height: 16px; |
| } |
| |
| .divider { |
| height: 1px; |
| background-color: #e2e8f0; |
| margin: 1rem 0; |
| } |
| |
| @media (max-width: 768px) { |
| :host { |
| width: 100%; |
| margin-bottom: 1rem; |
| } |
| |
| aside { |
| position: static; |
| } |
| } |
| </style> |
| <aside> |
| <h3>Learning Path</h3> |
| <ul> |
| <li> |
| <a href="/beginner.html" class="${path === 'beginner' ? 'active' : ''}"> |
| <i data-feather="book"></i> |
| Beginner |
| </a> |
| </li> |
| <li> |
| <a href="/intermediate.html" class="${path === 'intermediate' ? 'active' : ''}"> |
| <i data-feather="code"></i> |
| Intermediate |
| </a> |
| </li> |
| <li> |
| <a href="/advanced.html" class="${path === 'advanced' ? 'active' : ''}"> |
| <i data-feather="zap"></i> |
| Advanced |
| </a> |
| </li> |
| </ul> |
| |
| <div class="divider"></div> |
| |
| <h3>Resources</h3> |
| <ul> |
| <li> |
| <a href="#"> |
| <i data-feather="file-text"></i> |
| Cheat Sheets |
| </a> |
| </li> |
| <li> |
| <a href="#"> |
| <i data-feather="help-circle"></i> |
| FAQ |
| </a> |
| </li> |
| <li> |
| <a href="#"> |
| <i data-feather="message-square"></i> |
| Community |
| </a> |
| </li> |
| </ul> |
| </aside> |
| `; |
| |
| |
| setTimeout(() => { |
| const icons = this.shadowRoot.querySelectorAll('[data-feather]'); |
| icons.forEach(icon => { |
| feather.replace(icon); |
| }); |
| }, 100); |
| } |
| } |
|
|
| customElements.define('custom-sidebar', CustomSidebar); |
