| class CustomAdminSidebar extends HTMLElement { |
| connectedCallback() { |
| this.attachShadow({ mode: 'open' }); |
| this.shadowRoot.innerHTML = ` |
| <style> |
| .sidebar { |
| transition: transform 0.3s ease; |
| } |
| .sidebar-link { |
| transition: background-color 0.3s ease, color 0.3s ease; |
| } |
| .sidebar-link:hover, .sidebar-link.active { |
| background-color: #f3f4ff; |
| color: #6366f1; |
| } |
| @media (max-width: 768px) { |
| .sidebar { |
| transform: translateX(-100%); |
| position: fixed; |
| z-index: 30; |
| height: calc(100vh - 4rem); |
| top: 4rem; |
| } |
| .sidebar.open { |
| transform: translateX(0); |
| } |
| } |
| </style> |
| <aside class="sidebar w-64 bg-white shadow-md md:shadow-none md:relative md:transform-none"> |
| <div class="p-4"> |
| <nav class="mt-8"> |
| <div class="space-y-1"> |
| <a href="#" class="sidebar-link flex items-center px-4 py-3 text-gray-700 rounded-lg" data-section="dashboard"> |
| <i data-feather="home" class="mr-3"></i> |
| <span>Dashboard</span> |
| </a> |
| <a href="#" class="sidebar-link flex items-center px-4 py-3 text-gray-700 rounded-lg" data-section="projects"> |
| <i data-feather="grid" class="mr-3"></i> |
| <span>Projects</span> |
| </a> |
| <a href="#" class="sidebar-link flex items-center px-4 py-3 text-gray-700 rounded-lg" data-section="clients"> |
| <i data-feather="users" class="mr-3"></i> |
| <span>Clients</span> |
| </a> |
| <a href="#" class="sidebar-link flex items-center px-4 py-3 text-gray-700 rounded-lg" data-section="contacts"> |
| <i data-feather="mail" class="mr-3"></i> |
| <span>Contact Responses</span> |
| </a> |
| <a href="#" class="sidebar-link flex items-center px-4 py-3 text-gray-700 rounded-lg" data-section="subscribers"> |
| <i data-feather="bell" class="mr-3"></i> |
| <span>Subscribers</span> |
| </a> |
| </div> |
| </nav> |
| </div> |
| </aside> |
| `; |
|
|
| |
| const sidebarToggle = document.querySelector('custom-admin-navbar').shadowRoot.getElementById('sidebar-toggle'); |
| const sidebar = this.shadowRoot.querySelector('.sidebar'); |
| |
| sidebarToggle?.addEventListener('click', () => { |
| sidebar.classList.toggle('open'); |
| }); |
|
|
| |
| const navLinks = this.shadowRoot.querySelectorAll('.sidebar-link'); |
| navLinks.forEach(link => { |
| link.addEventListener('click', (e) => { |
| e.preventDefault(); |
| const section = link.getAttribute('data-section'); |
| |
| |
| navLinks.forEach(l => l.classList.remove('active')); |
| |
| |
| link.classList.add('active'); |
| |
| |
| switch(section) { |
| case 'projects': |
| loadProjectsManagement(); |
| break; |
| case 'clients': |
| loadClientsManagement(); |
| break; |
| case 'contacts': |
| loadContactResponses(); |
| break; |
| case 'subscribers': |
| loadSubscribers(); |
| break; |
| default: |
| adminContent.innerHTML = ` |
| <div class="text-center py-20"> |
| <h1 class="text-3xl font-bold text-gray-800 mb-4">Welcome to Admin Panel</h1> |
| <p class="text-gray-600">Select a section from the sidebar to manage content.</p> |
| </div> |
| `; |
| break; |
| } |
| |
| |
| if (sidebar.classList.contains('open')) { |
| sidebar.classList.remove('open'); |
| } |
| }); |
| }); |
| } |
| } |
|
|
| customElements.define('custom-admin-sidebar', CustomAdminSidebar); |
