components/ad-sidebar.js

class AdSidebar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .sidebar {
          position: fixed;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 120px;
          z-index: 40;
          background: rgba(17, 24, 39, 0.8);
          backdrop-filter: blur(5px);
          border-radius: 16px 0 0 16px;
          padding: 1rem 0.5rem;
          box-shadow: -4px 0 15px rgba(0, 0, 0, 0.3);
          border: 1px solid rgba(255,255,255,0.1);
          border-right: none;
        }
        .ad-item {
          margin-bottom: 1.5rem;
          cursor: pointer;
          transition: transform 0.3s ease;
        }
        .ad-item:hover {
          transform: scale(1.05);
        }
        .ad-item img {
          width: 100%;
          border-radius: 8px;
          border: 1px solid rgba(255,255,255,0.1);
        }
        .ad-title {
          font-size: 0.7rem;
          text-align: center;
          margin-top: 0.3rem;
          color: #f43f5e;
        }
        @media (max-width: 1024px) {
          .sidebar {
            display: none;
          }
        }
      </style>
      <div class="sidebar">
        <div class="ad-item">
          <img src="http://static.photos/abstract/120x630/1" alt="Featured Art">
          <div class="ad-title">Fractal Dreams</div>
        </div>
        <div class="ad-item">
          <img src="http://static.photos/cityscape/120x630/2" alt="Featured Art">
          <div class="ad-title">Neon Metropolis</div>
        </div>
        <div class="ad-item">
          <img src="http://static.photos/nature/120x630/3" alt="Featured Art">
          <div class="ad-title">Ethereal Landscape</div>
        </div>
      </div>
    `;
  }
}
customElements.define('ad-sidebar', AdSidebar);