import { Controller } from '@hotwired/stimulus'; export default class extends Controller { static targets = ['item']; static values = { margin: { type: Number, default: 0 } }; connect() { if (this.hasItemTarget) { let firstItemTarget = this.itemTargets[0]; const targetPosition = firstItemTarget.offsetTop; requestAnimationFrame(() => { window.scrollTo({ top: targetPosition - this.mainPosition - this.marginValue, behavior: 'smooth', }); }); } } get mainPosition() { const mainElement = document.querySelector('body> main'); if (!mainElement) { return 0; } return mainElement.offsetTop; } }