| class AdminSidebar extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| aside { | |
| width: 250px; | |
| background: #1f2937; | |
| color: white; | |
| height: 100vh; | |
| position: fixed; | |
| left: 0; | |
| top: 0; | |
| padding-top: 1rem; | |
| } | |
| .logo { | |
| padding: 1rem 1.5rem; | |
| font-size: 1.25rem; | |
| font-weight: bold; | |
| border-bottom: 1px solid #374151; | |
| margin-bottom: 1rem; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .logo i { | |
| margin-right: 0.75rem; | |
| } | |
| nav { | |
| padding: 0.5rem 0; | |
| } | |
| .nav-item { | |
| padding: 0.75rem 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .nav-item:hover { | |
| background: #374151; | |
| } | |
| .nav-item.active { | |
| background: #111827; | |
| border-left: 4px solid #6366f1; | |
| } | |
| .nav-item i { | |
| margin-right: 0.75rem; | |
| width: 20px; | |
| text-align: center; | |
| } | |
| .nav-label { | |
| flex-grow: 1; | |
| } | |
| </style> | |
| <aside> | |
| <div class="logo"> | |
| <i data-feather="shield"></i> | |
| <span>Admin Panel</span> | |
| </div> | |
| <nav> | |
| <a href="/admin-dashboard.html" class="nav-item active"> | |
| <i data-feather="home"></i> | |
| <span class="nav-label">Dashboard</span> | |
| </a> | |
| <a href="/admin-products.html" class="nav-item"> | |
| <i data-feather="shopping-bag"></i> | |
| <span class="nav-label">Products</span> | |
| </a> | |
| <a href="/admin-add-product.html" class="nav-item"> | |
| <i data-feather="plus-circle"></i> | |
| <span class="nav-label">Add Product</span> | |
| </a> | |
| <a href="/admin-orders.html" class="nav-item"> | |
| <i data-feather="package"></i> | |
| <span class="nav-label">Orders</span> | |
| </a> | |
| <a href="/admin-customers.html" class="nav-item"> | |
| <i data-feather="users"></i> | |
| <span class="nav-label">Customers</span> | |
| </a> | |
| <a href="/admin-analytics.html" class="nav-item"> | |
| <i data-feather="bar-chart-2"></i> | |
| <span class="nav-label">Analytics</span> | |
| </a> | |
| <a href="/admin-settings.html" class="nav-item"> | |
| <i data-feather="settings"></i> | |
| <span class="nav-label">Settings</span> | |
| </a> | |
| </nav> | |
| </aside> | |
| `; | |
| feather.replace(); | |
| } | |
| } | |
| customElements.define('admin-sidebar', AdminSidebar); |