Este artículo se publicó originalmente en Rails Designer: biblioteca de componentes de interfaz de usuario para la aplicación Rails, creada con ViewComponent, diseñada con Tailwind CSS y mejorada con Hotwire.

Si su aplicación tiene una barra lateral de navegación, lo cual es bastante común en la mayoría de las pantallas que son lo suficientemente anchas para admitirla en estos días, hacer que se pueda cambiar su tamaño podría ser una excelente característica para agregar. Ofrecer esta personalización permite a los usuarios modificar la pantalla para la tarea en cuestión. Tal vez quieran concentrarse en escribir su próximo gran artículo o tal vez dividan la pantalla, haciendo que el ancho predeterminado sea demasiado ancho.

Cualquiera sea el motivo, cambiar el tamaño de la navegación de la barra lateral (o cualquier otro componente) es fácil con JavaScript y, por lo tanto, con Stimulus. Profundicemos. Configuremos los conceptos básicos en HTML:

  

  

    
Content for your app here
  

El HTML anterior utiliza clases CSS de Tailwind, pero eso no es necesario para este ejemplo. Por supuesto, puedes diseñarlo como quieras.

Ahora el controlador de estímulos. Como habrás notado arriba, el handler (el elemento que se puede arrastrar para cambiar el tamaño) no se agrega en el HTML, sino que se inyectará con JS.

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="resizer"
export default class extends Controller {
  static targets = ["container"];
  static values = {
    resizing: { type: Boolean, default: false },
    maxWidth: { type: Number, default: 360 } // in px
  };

  connect() {
    this.containerTarget.insertAdjacentHTML("beforeend", this.#handler);
  }

  // private

  get #handler() {
    return `
      
    `
  }
}

Esto inyectará el controlador al lado del elemento de navegación (posición absoluta). También tiene una acción para activar setup() en el evento de mousedown. Agreguémoslo.

export default class extends Controller {
  // …
  connect() {
    this.containerTarget.insertAdjacentHTML("beforeend", this.#handler);

    this.resize = this.#resize.bind(this);
    this.stop = this.#stop.bind(this);
  }

  setup() {
      this.resizingValue = true;

      document.addEventListener('mousemove', this.resize);
      document.addEventListener('mouseup', this.stop);
  }
  // …
}

¿Qué está pasando aquí? ¿Por qué no agregar #resize() y #stop() en los eventos mousemove y mouseup respectivamente? Esto es para garantizar que esto se refiera a la instancia del controlador cuando se llama a redimensionar y detener como detectores de eventos, preservando el acceso a las propiedades y métodos del controlador.

Agreguemos las funciones privadas #resize() y #stop().

export default class extends Controller {
  // …

  // private

  #resize(event) {
    if (!this.resizingValue) return;

    const width = event.clientX - this.containerTarget.offsetLeft;

    if (width 



La función #resize() calcula el nuevo ancho del contenedor en función de la posición del mouse (event.clientX) y actualiza el ancho del contenedor, asegurándose de que no exceda el ancho máximo permitido (establecido en valores). La función #stop() detiene el proceso de cambio de tamaño estableciendo resizingValue en falso y eliminando los detectores de eventos.

Si te diriges a tu navegador, ahora podrás cambiar el tamaño del navegador y no hacerlo más ancho que el valor establecido como maxWidth (360px de forma predeterminada).

¡Genial! ? Eso es todo lo que necesitas para cambiar el tamaño de un elemento en tu aplicación usando Stimulus. Desde aquí puede mejorar almacenando el valor en la configuración del usuario (por ejemplo, a través de Redis) para que sea el mismo en todos los navegadores o almacenarlo en el LocalStorage del navegador para almacenarlo para esa sesión (Rails Designer le ayuda proporcionando utilidades JS para eso).