components/sidebar.js

class CustomSidebar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .sidebar {
          width: 240px;
          height: calc(100vh - 64px);
          top: 64px;
        }
        .nav-link:hover {
          background-color: rgba(59, 130, 246, 0.1);
        }
        .nav-link.active {
          background-color: rgba(59, 130, 246, 0.1);
          color: #3b82f6;
          border-left: 3px solid #3b82f6;
        }
      </style>
      <aside class="sidebar bg-white fixed shadow sidebar-transition">
        <div class="p-4">
          <ul class="space-y-1">
            <li>
              <a href="/" class="nav-link flex items-center p-3 rounded-lg">
<i data-feather="home" class="mr-3"></i>
                <span>Dashboard</span>
              </a>
            </li>
            <li>
              <a href="/users.html" class="nav-link flex items-center p-3 rounded-lg">
<i data-feather="users" class="mr-3"></i>
                <span>Users</span>
              </a>
            </li>
            <li>
              <a href="/settings" class="nav-link flex items-center p-3 rounded-lg">
                <i data-feather="settings" class="mr-3"></i>
                <span>Settings</span>
              </a>
            </li>
            <li>
              <a href="/reports" class="nav-link flex items-center p-3 rounded-lg">
                <i data-feather="file-text" class="mr-3"></i>
                <span>Reports</span>
              </a>
            </li>
            <li>
              <a href="/admin.php" class="nav-link flex items-center p-3 rounded-lg">
                <i data-feather="shield" class="mr-3"></i>
                <span>Admin Panel</span>
              </a>
            </li>
            <li>
              <a href="/chat.html" class="nav-link flex items-center p-3 rounded-lg">
                <i data-feather="message-circle" class="mr-3"></i>
                <span>AI Assistant</span>
              </a>
            </li>
<li>
              <a href="/logout" class="nav-link flex items-center p-3 rounded-lg text-red-500">
                <i data-feather="log-out" class="mr-3"></i>
                <span>Logout</span>
              </a>
            </li>
</ul>
        </div>
      </aside>
    `;
  }
}
customElements.define('custom-sidebar', CustomSidebar);