Este artigo foi publicado originalmente no Rails Designer — biblioteca de componentes de UI para o aplicativo Rails, construída com ViewComponent, projetada com Tailwind CSS e aprimorada com Hotwire.

Se o seu aplicativo tiver uma barra de navegação lateral, o que é bastante comum com a maioria das telas largas o suficiente para suportar atualmente, torná-lo redimensionável pode ser um ótimo recurso a ser adicionado. Fornecer essa personalização permite que seus usuários ajustem a tela para a tarefa em questão. Talvez eles queiram se concentrar em escrever seu próximo grande texto ou talvez dividam a tela, tornando a largura padrão um pouco larga demais.

Seja qual for o motivo, redimensionar a navegação da barra lateral (ou qualquer outro componente) é fácil com JavaScript e, portanto, com Stimulus. Vamos começar. Vamos configurar o básico em HTML:

    
Content for your app here
  

O HTML acima está usando classes CSS do Tailwind, mas isso não é obrigatório para este exemplo. É claro que você pode estilizá-lo como quiser.

Agora o controlador de estímulo. Como você notou acima, o handler (o elemento que pode ser arrastado para redimensionar) não é adicionado no HTML, em vez disso será injetado com 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 `
      
    `
  }
}

Isso irá injetar o handler próximo ao elemento nav (posicionado em absoluto). Ele também tem uma ação para disparar setup() no evento mousedown. Vamos adicioná-lo.

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);
  }
  // …
}

O que está acontecendo aqui? Por que não adicionar #resize() e #stop() nos eventos mousemove e mouseup, respectivamente. Isso é para garantir que this se refira à instância do controlador quando resize e stop são chamados como ouvintes de eventos, preservando o acesso às propriedades e métodos do controlador.

Vamos adicionar as funções privadas #resize() e #stop().

export default class extends Controller {
  // …

  // private

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

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

    if (width 



A função #resize() calcula a nova largura do container com base na posição do mouse (event.clientX) e atualiza a largura do container, garantindo que não exceda a largura máxima permitida (definida em valores). A função #stop() interrompe o processo de redimensionamento definindo resizingValue como false e removendo os ouvintes de eventos.

Se você acessar seu navegador, agora poderá redimensioná-lo e não torná-lo mais largo do que o valor definido como maxWidth (360px por padrão).

Incrível! ? Isso é tudo que você precisa para redimensionar um elemento em seu aplicativo usando o Stimulus. A partir daqui você pode melhorar armazenando o valor nas configurações do usuário (por exemplo, via Redis) para ser o mesmo em todos os navegadores ou armazená-lo no LocalStorage do navegador para armazená-lo para aquela sessão (o Rails Designer ajuda você fornecendo utilitários JS para isso).