File size: 5,107 Bytes
99fe73b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | 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>
`;
// Mobile sidebar toggle
const sidebarToggle = document.querySelector('custom-admin-navbar').shadowRoot.getElementById('sidebar-toggle');
const sidebar = this.shadowRoot.querySelector('.sidebar');
sidebarToggle?.addEventListener('click', () => {
sidebar.classList.toggle('open');
});
// Navigation links
const navLinks = this.shadowRoot.querySelectorAll('.sidebar-link');
navLinks.forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
const section = link.getAttribute('data-section');
// Remove active class from all links
navLinks.forEach(l => l.classList.remove('active'));
// Add active class to clicked link
link.classList.add('active');
// Load the appropriate content
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;
}
// Close mobile sidebar if open
if (sidebar.classList.contains('open')) {
sidebar.classList.remove('open');
}
});
});
}
}
customElements.define('custom-admin-sidebar', CustomAdminSidebar); |