components/sidebar.js

class CustomSidebar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .sidebar {
          width: 240px;
          height: calc(100vh - 64px);
          transition: all 0.3s ease;
        }
        .nav-item:hover {
          background-color: rgba(59, 130, 246, 0.1);
        }
        .nav-item.active {
          background-color: rgba(59, 130, 246, 0.2);
          border-left: 3px solid #3b82f6;
        }
      </style>
      <aside class="sidebar bg-white shadow-sm fixed mt-16">
        <div class="p-4">
          <ul class="space-y-1">
            <li>
              <a href="#" class="nav-item active flex items-center px-4 py-2 text-blue-600 rounded">
                <i data-feather="home" class="mr-3"></i>
                <span>Dashboard</span>
              </a>
            </li>
            <li>
              <a href="#" class="nav-item flex items-center px-4 py-2 text-gray-700 hover:text-blue-600 rounded">
                <i data-feather="users" class="mr-3"></i>
                <span>Contacts</span>
              </a>
            </li>
            <li>
              <a href="#" class="nav-item flex items-center px-4 py-2 text-gray-700 hover:text-blue-600 rounded">
                <i data-feather="briefcase" class="mr-3"></i>
                <span>Companies</span>
              </a>
            </li>
            <li>
              <a href="#" class="nav-item flex items-center px-4 py-2 text-gray-700 hover:text-blue-600 rounded">
                <i data-feather="calendar" class="mr-3"></i>
                <span>Calendar</span>
              </a>
            </li>
            <li>
              <a href="#" class="nav-item flex items-center px-4 py-2 text-gray-700 hover:text-blue-600 rounded">
                <i data-feather="file-text" class="mr-3"></i>
                <span>Reports</span>
              </a>
            </li>
            <li>
              <a href="#" class="nav-item flex items-center px-4 py-2 text-gray-700 hover:text-blue-600 rounded">
                <i data-feather="dollar-sign" class="mr-3"></i>
                <span>Accounts</span>
              </a>
            </li>
            <li>
              <a href="#" class="nav-item flex items-center px-4 py-2 text-gray-700 hover:text-blue-600 rounded">
                <i data-feather="settings" class="mr-3"></i>
                <span>Settings</span>
              </a>
            </li>
</ul>
        </div>
      </aside>
    `;
  }
}
customElements.define('custom-sidebar', CustomSidebar);