waffle/frontend/src/responsive.js

import { showSidebar, smallViewport } from "./stores";

export function initResponsiveHandlers() {
    const mediaQuery = window.matchMedia('(min-width: 768px)');

    const update = ({ matches }) => {
        showSidebar.set(matches);
        smallViewport.set(!matches);
    };

    mediaQuery.addEventListener("change", update);
    update(mediaQuery);
}