https://controltab.io/assets/controllers/page_controller-81d60b4dc…3fe0cd6d91560aaf060d6719ce235d4c9134431a.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4  static targets = ["section", "navLink"]
5
6  connect() {
7    this.handleResize(); // Check screen size on initial load
8    window.addEventListener('resize', this.handleResize.bind(this));
9  }
10
11  disconnect() {
12    window.removeEventListener('resize', this.handleResize.bind(this));
13  }
14
15  scrollTo(event) {
16    if (window.innerWidth < 1024) {
17      // On mobile, let the browser handle the anchor link scroll
18      return;
19    }
20    event.preventDefault();
21    const targetId = event.currentTarget.getAttribute("href");
22    this.showSection(targetId);
23    history.pushState(null, null, targetId);
24  }
25
26  showSection(targetId) {
27    this.sectionTargets.forEach(section => {
28      section.classList.toggle("active", `#${section.id}` === targetId);
29    });
30    this.navLinkTargets.forEach(link => {
31      link.classList.toggle("active", link.getAttribute("href") === targetId);
32    });
33  }
34
35  handleResize() {
36    if (window.innerWidth < 1024) {
37      // On mobile, ensure all sections are visible for normal scrolling
38      this.sectionTargets.forEach(section => section.classList.add("active"));
39    } else {
40      // On desktop, show only the current or initial section
41      this.showSection(window.location.hash || "#hero");
42    }
43  }
44};