| class CustomSidebar extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| .sidebar { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| width: 16rem; | |
| background-color: #1a202c; | |
| color: #e2e8f0; | |
| transition: all 0.3s ease; | |
| z-index: 50; | |
| } | |
| .sidebar-header { | |
| padding: 1.5rem; | |
| border-bottom: 1px solid #2d3748; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .sidebar-logo { | |
| font-weight: 700; | |
| font-size: 1.25rem; | |
| color: white; | |
| } | |
| .sidebar-menu { | |
| padding: 1rem 0; | |
| } | |
| .sidebar-item { | |
| padding: 0.75rem 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| transition: all 0.2s ease; | |
| cursor: pointer; | |
| } | |
| .sidebar-item:hover { | |
| background-color: #2d3748; | |
| } | |
| .sidebar-item.active { | |
| background-color: #2d3748; | |
| border-left: 4px solid #6366f1; | |
| } | |
| .sidebar-icon { | |
| margin-right: 0.75rem; | |
| width: 1.25rem; | |
| height: 1.25rem; | |
| } | |
| .sidebar-label { | |
| font-size: 0.875rem; | |
| } | |
| .theme-toggle { | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .theme-toggle:hover { | |
| opacity: 0.8; | |
| } | |
| @media (max-width: 768px) { | |
| .sidebar { | |
| transform: translateX(-100%); | |
| width: 14rem; | |
| } | |
| .sidebar.open { | |
| transform: translateX(0); | |
| } | |
| } | |
| </style> | |
| <div class="sidebar"> | |
| <div class="sidebar-header"> | |
| <div class="sidebar-logo">DarkSide</div> | |
| <div id="theme-toggle" class="theme-toggle"> | |
| <i data-feather="moon" class="text-gray-300"></i> | |
| </div> | |
| </div> | |
| <div class="sidebar-menu"> | |
| <div class="sidebar-item active"> | |
| <i data-feather="edit-2" class="sidebar-icon"></i> | |
| <span class="sidebar-label">Data Input</span> | |
| </div> | |
| <div class="sidebar-item"> | |
| <i data-feather="database" class="sidebar-icon"></i> | |
| <span class="sidebar-label">Data View</span> | |
| </div> | |
| <div class="sidebar-item"> | |
| <i data-feather="settings" class="sidebar-icon"></i> | |
| <span class="sidebar-label">Settings</span> | |
| </div> | |
| <div class="sidebar-item"> | |
| <i data-feather="user" class="sidebar-icon"></i> | |
| <span class="sidebar-label">Profile</span> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| } | |
| customElements.define('custom-sidebar', CustomSidebar); |