Sidebar Component

Código HTML

<!-- Importar el componente -->
<script src="sidebar-component/index.js"></script>
<link rel="stylesheet" href="sidebar-component/index.css">

<!-- Implementación del sidebar izquierdo -->
<sidebar-component data-align="left">
  <details class="sidebar-component" data-sidebar-details>
    <summary class="sidebar-component-trigger" data-sidebar-trigger>
      <button>Abrir menú</button>
    </summary>

    <aside class="sidebar-component-aside">
      <div class="sidebar-component-mask" data-sidebar-mask></div>
      
      <div class="sidebar-component-content">
        <div class="sidebar-component-header">
          Navegación
          <div data-sidebar-button-close>
            <!-- Icono de cierre -->
          </div>
        </div>

        <div class="sidebar-component-body">
          <!-- Contenido del sidebar -->
          <nav>
            <ul>
              <li><a href="#">Inicio</a></li>
              <li><a href="#">Productos</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </aside>
  </details>
</sidebar-component>

JavaScript

// Abrir sidebar mediante JavaScript
document.querySelector('sidebar-component')
  .querySelector('[data-sidebar-details]')
  .setAttribute('open', '');

Código HTML

<!-- Sidebar desde la derecha (carrito) -->
<sidebar-component data-align="right">
  <details class="sidebar-component" data-sidebar-details>
    <summary class="sidebar-component-trigger" data-sidebar-trigger>
      <div class="cart-icon">
        <svg>...</svg>
        <span class="cart-count">3</span>
      </div>
    </summary>

    <aside class="sidebar-component-aside">
      <div class="sidebar-component-mask" data-sidebar-mask></div>
      
      <div class="sidebar-component-content">
        <div class="sidebar-component-header">
          Carrito de compras
          <div data-sidebar-button-close>...</div>
        </div>

        <div class="sidebar-component-body">
          <div class="cart-items">
            <!-- Productos del carrito -->
          </div>
        </div>
        
        <div class="sidebar-component-footer">
          <div class="cart-total">
            <span>Total:</span>
            <span>$109.97</span>
          </div>
          <button>Proceder al pago</button>
        </div>
      </div>
    </aside>
  </details>
</sidebar-component>

Código HTML

<!-- Sidebar desde abajo -->
<sidebar-component data-align="bottom">
  <details class="sidebar-component" data-sidebar-details>
    <summary class="sidebar-component-trigger" data-sidebar-trigger>
      <button>Mostrar información</button>
    </summary>

    <aside class="sidebar-component-aside">
      <div class="sidebar-component-mask" data-sidebar-mask></div>
      
      <div class="sidebar-component-content">
        <div class="sidebar-component-header">
          Información del producto
          <div data-sidebar-button-close>...</div>
        </div>

        <div class="sidebar-component-body">
          <div class="product-details">
            <h3>Características del producto</h3>
            <ul>
              <li>Diseño moderno y ergonómico</li>
              <li>Material de alta calidad</li>
              <!-- Más características -->
            </ul>
          </div>
        </div>
      </div>
    </aside>
  </details>
</sidebar-component>