import tokens from "@config/tokens.js";
import { CocoComponent } from "@assets/js/coco/component";

const mobileMaxWidth = parseInt(tokens.screens.sm, 10);

export default CocoComponent("appSidebarNav", () => {
  return {
    sizeObserver: null,
    mobileLayout: true,

    init() {
      this.sizeObserver = new ResizeObserver(
        Alpine.throttle((entries) => {
          this.$nextTick(() => {
            const bodyWidth = entries[0].contentRect.width;
            this.mobileLayout = bodyWidth < mobileMaxWidth;
          });
        }, 20)
      );

      this.sizeObserver.observe(document.documentElement);
    },

    destroy() {
      this.sizeObserver && this.sizeObserver.disconnect();
    },
  };
});