import { Controller } from '@hotwired/stimulus'; export default class extends Controller { static targets = ['sidebar', 'overlay']; static classes = ['open']; connect() { if (this.hasSidebarTarget) { const sidebarTop = this.sidebarTarget.offsetTop + (document.querySelector('.application_head')?.clientHeight ?? 0); Object.assign(this.sidebarTarget.style, { top: `${sidebarTop}px`, }); } } handleToggling() { this.toggleSidebar(); } toggleSidebar() { if (this.openedSidebar) { this.sidebarTarget.classList.remove('left-0'); this.sidebarTarget.classList.add('-left-full'); this.overlayTarget.classList.add('invisible'); this.overlayTarget.classList.remove('opacity-100'); } else { this.sidebarTarget.classList.remove('-left-full'); this.sidebarTarget.classList.add('left-0'); this.overlayTarget.classList.remove('invisible'); this.overlayTarget.classList.add('opacity-100'); } } showOverlay() { if (this.hasOverlayTarget) { this.overlayTarget.classList.remove('invisible'); this.overlayTarget.classList.add('opacity-100'); } } removeOverlay() { if (this.hasOverlayTarget) { this.overlayTarget.classList.add('invisible'); this.overlayTarget.classList.remove('opacity-100'); } } get openedSidebar() { return this.sidebarTarget.classList.contains('left-0'); } }

AltStyle によって変換されたページ (->オリジナル) /