components/sidebar.js

class CustomSidebar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .sidebar {
          width: 280px;
          transition: all 0.3s;
        }
        .sidebar-item {
          transition: all 0.2s;
        }
        .sidebar-item:hover {
          background-color: rgba(255, 88, 15, 0.1);
        }
        .sidebar-item.active {
          background-color: rgba(255, 88, 15, 0.1);
          border-left: 3px solid #ff580f;
        }
        .sidebar-item.active .sidebar-icon {
          color: #ff580f;
        }
        .sidebar-item.active .sidebar-text {
          color: #21223a;
          font-weight: 500;
        }
        @media (max-width: 768px) {
          .sidebar {
            width: 0;
            overflow: hidden;
          }
          .sidebar.open {
            width: 280px;
          }
        }
      </style>
      <div class="sidebar bg-primary text-white h-full flex flex-col">
        <div class="p-6 border-b border-primary-light">
          <h2 class="text-xl font-bold flex items-center">
            <i data-feather="shield" class="mr-2"></i>
            CodeDoc AI
          </h2>
        </div>
        <div class="flex-1 overflow-y-auto py-4">
          <div class="px-4 space-y-1">
            <a href="/" class="flex items-center px-4 py-3 rounded-lg sidebar-item active">
              <i data-feather="home" class="sidebar-icon mr-3"></i>
              <span class="sidebar-text">Dashboard</span>
            </a>
            <a href="/repositories" class="flex items-center px-4 py-3 rounded-lg sidebar-item">
              <i data-feather="github" class="sidebar-icon mr-3"></i>
              <span class="sidebar-text">Repositories</span>
            </a>
            <a href="/documentation" class="flex items-center px-4 py-3 rounded-lg sidebar-item">
              <i data-feather="file-text" class="sidebar-icon mr-3"></i>
              <span class="sidebar-text">Documentation</span>
            </a>
            <a href="/code-reviews" class="flex items-center px-4 py-3 rounded-lg sidebar-item">
              <i data-feather="check-circle" class="sidebar-icon mr-3"></i>
              <span class="sidebar-text">Code Reviews</span>
            </a>
            <a href="/testing" class="flex items-center px-4 py-3 rounded-lg sidebar-item">
              <i data-feather="cpu" class="sidebar-icon mr-3"></i>
              <span class="sidebar-text">Testing</span>
            </a>
            <a href="/deployments" class="flex items-center px-4 py-3 rounded-lg sidebar-item">
              <i data-feather="upload" class="sidebar-icon mr-3"></i>
              <span class="sidebar-text">Deployments</span>
            </a>
            <a href="/settings" class="flex items-center px-4 py-3 rounded-lg sidebar-item">
              <i data-feather="settings" class="sidebar-icon mr-3"></i>
              <span class="sidebar-text">Settings</span>
            </a>
          </div>
        </div>
        <div class="p-4 border-t border-primary-light">
          <div class="flex items-center px-4 py-3 rounded-lg sidebar-item">
            <div class="relative mr-3">
              <img src="http://static.photos/people/200x200/42" class="w-8 h-8 rounded-full" alt="User">
              <span class="absolute bottom-0 right-0 w-2 h-2 bg-green-500 rounded-full border border-white"></span>
            </div>
            <div>
              <p class="sidebar-text text-sm">John Doe</p>
              <p class="text-xs opacity-70">Admin</p>
            </div>
          </div>
        </div>
      </div>
    `;
  }
}

customElements.define('custom-sidebar', CustomSidebar);