document.addEventListener("alpine:init", () => {
  Alpine.data("navigationState", () => {
    return {
      mainNavOpenInNarrow: false,
      disclose1Open: false,
      disclose2Open: false,
      disclose3Open: false,

      disclose1Toggle() {
        this.disclose1Open = !this.disclose1Open;
        this.disclose2Open = false;
        this.disclose3Open = false;
      },

      disclose1Class: {
        [":class"]() {
          return this.disclose1Open ? "" : "hidden";
        },
      },

      disclose1ButtonClass: {
        [":class"]() {
          return this.disclose1Open ? "rotate-180" : "";
        },
      },

      disclose2Toggle() {
        this.disclose1Open = false;
        this.disclose2Open = !this.disclose2Open;
        this.disclose3Open = false;
      },

      disclose2Class: {
        [":class"]() {
          return this.disclose2Open ? "" : "hidden";
        },
      },

      disclose2ButtonClass: {
        [":class"]() {
          return this.disclose2Open ? "rotate-180" : "";
        },
      },

      disclose3Toggle() {
        this.disclose1Open = false;
        this.disclose2Open = false;
        this.disclose3Open = !this.disclose3Open;
      },

      disclose3Class: {
        [":class"]() {
          return this.disclose3Open ? "" : "hidden";
        },
      },

      disclose3ButtonClass: {
        [":class"]() {
          return this.disclose3Open ? "rotate-180" : "";
        },
      },

      mainNavClass: {
        [":class"]() {
          return this.mainNavOpenInNarrow ? "" : "hidden";
        },
      },

      toggle() {
        this.mainNavOpenInNarrow = !this.mainNavOpenInNarrow;
      },
    };
  });
});