File size: 3,305 Bytes
d9a48e0 | 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 | class CustomSidebar extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.sidebar {
width: 250px;
}
.sidebar-item {
transition: all 0.2s ease;
}
.sidebar-item:hover {
background-color: #f3f4f6;
transform: translateX(4px);
}
.sidebar-item.active {
background-color: #e5e7eb;
border-left: 4px solid #0088cc;
}
</style>
<div class="sidebar hidden lg:block bg-white rounded-xl shadow-md p-4 h-fit">
<div class="space-y-2">
<a href="#" class="sidebar-item active flex items-center space-x-3 px-4 py-3 rounded-lg font-medium">
<i data-feather="home" class="w-5 h-5 text-gray-600"></i>
<span>Dashboard</span>
</a>
<a href="#" class="sidebar-item flex items-center space-x-3 px-4 py-3 rounded-lg font-medium">
<i data-feather="settings" class="w-5 h-5 text-gray-600"></i>
<span>Bot Settings</span>
</a>
<a href="#" class="sidebar-item flex items-center space-x-3 px-4 py-3 rounded-lg font-medium">
<i data-feather="users" class="w-5 h-5 text-gray-600"></i>
<span>User Management</span>
</a>
<a href="#" class="sidebar-item flex items-center space-x-3 px-4 py-3 rounded-lg font-medium">
<i data-feather="message-square" class="w-5 h-5 text-gray-600"></i>
<span>Message Logs</span>
</a>
<a href="#" class="sidebar-item flex items-center space-x-3 px-4 py-3 rounded-lg font-medium">
<i data-feather="command" class="w-5 h-5 text-gray-600"></i>
<span>Commands</span>
</a>
<a href="#" class="sidebar-item flex items-center space-x-3 px-4 py-3 rounded-lg font-medium">
<i data-feather="activity" class="w-5 h-5 text-gray-600"></i>
<span>Analytics</span>
</a>
<a href="#" class="sidebar-item flex items-center space-x-3 px-4 py-3 rounded-lg font-medium">
<i data-feather="file-text" class="w-5 h-5 text-gray-600"></i>
<span>Logs</span>
</a>
</div>
<div class="mt-8 pt-4 border-t border-gray-200">
<h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 px-2">BOT TOOLS</h3>
<div class="space-y-2">
<a href="#" class="sidebar-item flex items-center space-x-3 px-4 py-3 rounded-lg font-medium">
<i data-feather="send" class="w-5 h-5 text-gray-600"></i>
<span>Broadcast</span>
</a>
<a href="#" class="sidebar-item flex items-center space-x-3 px-4 py-3 rounded-lg font-medium">
<i data-feather="database" class="w-5 h-5 text-gray-600"></i>
<span>Database</span>
</a>
<a href="#" class="sidebar-item flex items-center space-x-3 px-4 py-3 rounded-lg font-medium">
<i data-feather="terminal" class="w-5 h-5 text-gray-600"></i>
<span>API Console</span>
</a>
</div>
</div>
</div>
`;
}
}
customElements.define('custom-sidebar', CustomSidebar); |