components/sidebar.js

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);