breakpoint.js

document.addEventListener('alpine:init', () => {
    Alpine.store('breakpoint', {
        listeners: {},

        init() {
            const breakpoints = {
                sm: 640,
                md: 768,
                lg: 1024,
                xl: 1280,
                '2xl': 1535,
            };

            Object.entries(breakpoints).forEach(([breakpoint, width]) => {
                const mediaQuery = window.matchMedia(`(min-width: ${width}px)`);

                this[breakpoint] = mediaQuery.matches;
                this.listeners[breakpoint] = [];

                mediaQuery.addEventListener('change', (event) => {
                    this[breakpoint] = event.matches;

                    this.listeners[breakpoint].forEach((listener) => {
                        listener(event.matches);
                    });
                });
            });
        },

        listen(breakpoint, callback) {
            this.listeners[breakpoint].push(callback);
        },
    });
});