| class AppSidebar extends HTMLElement { |
| connectedCallback() { |
| this.attachShadow({ mode: 'open' }); |
| this.shadowRoot.innerHTML = ` |
| <style> |
| :host { |
| display: block; |
| width: 100%; |
| max-width: 16rem; |
| } |
| |
| .sidebar { |
| background: rgba(15, 23, 42, 0.7); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| border-radius: 1rem; |
| padding: 1.5rem; |
| height: fit-content; |
| position: sticky; |
| top: 6rem; |
| } |
| |
| .sidebar-section { |
| margin-bottom: 1.5rem; |
| } |
| |
| .section-title { |
| color: rgba(255, 255, 255, 0.5); |
| font-size: 0.75rem; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| margin-bottom: 0.75rem; |
| padding-left: 0.5rem; |
| } |
| |
| .nav-link { |
| display: flex; |
| align-items: center; |
| gap: 0.75rem; |
| padding: 0.75rem; |
| color: rgba(255, 255, 255, 0.7); |
| text-decoration: none; |
| border-radius: 0.75rem; |
| transition: all 0.3s; |
| margin-bottom: 0.25rem; |
| cursor: pointer; |
| } |
| |
| .nav-link:hover { |
| background: rgba(244, 63, 94, 0.1); |
| color: rgba(255, 255, 255, 0.9); |
| } |
| |
| .nav-link.active { |
| background: rgba(244, 63, 94, 0.15); |
| color: #f43f5e; |
| border-left: 3px solid #f43f5e; |
| } |
| |
| .nav-icon { |
| width: 1.25rem; |
| height: 1.25rem; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .nav-text { |
| font-size: 0.875rem; |
| font-weight: 500; |
| } |
| |
| .badge { |
| margin-left: auto; |
| background: rgba(244, 63, 94, 0.2); |
| color: #f43f5e; |
| font-size: 0.75rem; |
| padding: 0.125rem 0.5rem; |
| border-radius: 9999px; |
| font-weight: 600; |
| } |
| |
| .stats-card { |
| background: linear-gradient(135deg, rgba(244, 63, 94, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%); |
| border: 1px solid rgba(244, 63, 94, 0.2); |
| border-radius: 0.75rem; |
| padding: 1rem; |
| margin-top: 1.5rem; |
| } |
| |
| .stats-title { |
| color: rgba(255, 255, 255, 0.9); |
| font-size: 0.875rem; |
| font-weight: 600; |
| margin-bottom: 0.5rem; |
| } |
| |
| .stats-grid { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 0.5rem; |
| } |
| |
| .stat-item { |
| text-align: center; |
| } |
| |
| .stat-value { |
| color: #f43f5e; |
| font-size: 1.125rem; |
| font-weight: 700; |
| } |
| |
| .stat-label { |
| color: rgba(255, 255, 255, 0.5); |
| font-size: 0.75rem; |
| } |
| |
| @media (max-width: 1024px) { |
| :host { |
| max-width: 100%; |
| } |
| |
| .sidebar { |
| position: static; |
| margin-bottom: 2rem; |
| } |
| } |
| </style> |
| |
| <aside class="sidebar"> |
| <div class="sidebar-section"> |
| <div class="section-title">Workspace</div> |
| <a href="/" class="nav-link active"> |
| <div class="nav-icon"> |
| <i data-feather="home"></i> |
| </div> |
| <span class="nav-text">Dashboard</span> |
| </a> |
| <a href="/editor" class="nav-link"> |
| <div class="nav-icon"> |
| <i data-feather="edit-2"></i> |
| </div> |
| <span class="nav-text">Editor</span> |
| </a> |
| <a href="/projects" class="nav-link"> |
| <div class="nav-icon"> |
| <i data-feather="folder"></i> |
| </div> |
| <span class="nav-text">Projects</span> |
| <span class="badge">12</span> |
| </a> |
| <a href="/templates" class="nav-link"> |
| <div class="nav-icon"> |
| <i data-feather="layers"></i> |
| </div> |
| <span class="nav-text">Templates</span> |
| </a> |
| </div> |
| |
| <div class="sidebar-section"> |
| <div class="section-title">Development</div> |
| <a href="/terminal" class="nav-link"> |
| <div class="nav-icon"> |
| <i data-feather="terminal"></i> |
| </div> |
| <span class="nav-text">Terminal</span> |
| </a> |
| <a href="/debug" class="nav-link"> |
| <div class="nav-icon"> |
| <i data-feather="activity"></i> |
| </div> |
| <span class="nav-text">Debugger</span> |
| </a> |
| <a href="/git" class="nav-link"> |
| <div class="nav-icon"> |
| <i data-feather="git-branch"></i> |
| </div> |
| <span class="nav-text">Git</span> |
| <span class="badge">3</span> |
| </a> |
| <a href="/database" class="nav-link"> |
| <div class="nav-icon"> |
| <i data-feather="database"></i> |
| </div> |
| <span class="nav-text">Database</span> |
| </a> |
| </div> |
| |
| <div class="sidebar-section"> |
| <div class="section-title">Collaboration</div> |
| <a href="/team" class="nav-link"> |
| <div class="nav-icon"> |
| <i data-feather="users"></i> |
| </div> |
| <span class="nav-text">Team</span> |
| </a> |
| <a href="/chat" class="nav-link"> |
| <div class="nav-icon"> |
| <i data-feather="message-square"></i> |
| </div> |
| <span class="nav-text">Chat</span> |
| <span class="badge">5</span> |
| </a> |
| <a href="/share" class="nav-link"> |
| <div class="nav-icon"> |
| <i data-feather="share-2"></i> |
| </div> |
| <span class="nav-text">Share</span> |
| </a> |
| </div> |
| |
| <div class="stats-card"> |
| <div class="stats-title">Today's Activity</div> |
| <div class="stats-grid" data-github-stats> |
| <div class="stat-item"> |
| <div class="stat-value">8.7k</div> |
| <div class="stat-label">Lines</div> |
| </div> |
| <div class="stat-item"> |
| <div class="stat-value">142</div> |
| <div class="stat-label">Commits</div> |
| </div> |
| <div class="stat-item"> |
| <div class="stat-value">4.2</div> |
| <div class="stat-label">Hours</div> |
| </div> |
| <div class="stat-item"> |
| <div class="stat-value">96%</div> |
| <div class="stat-label">Focus</div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="sidebar-section"> |
| <a href="/settings" class="nav-link"> |
| <div class="nav-icon"> |
| <i data-feather="settings"></i> |
| </div> |
| <span class="nav-text">Settings</span> |
| </a> |
| <a href="/help" class="nav-link"> |
| <div class="nav-icon"> |
| <i data-feather="help-circle"></i> |
| </div> |
| <span class="nav-text">Help & Docs</span> |
| </a> |
| </div> |
| </aside> |
| `; |
| |
| |
| setTimeout(() => { |
| if (window.feather) { |
| window.feather.replace({ class: 'feather' }); |
| } |
| }, 100); |
| |
| |
| this.shadowRoot.querySelectorAll('.nav-link').forEach(link => { |
| link.addEventListener('click', (e) => { |
| this.shadowRoot.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active')); |
| e.currentTarget.classList.add('active'); |
| }); |
| }); |
| } |
| } |
|
|
| customElements.define('app-sidebar', AppSidebar); |
