[Alpine.js] - 화면넓이(or다크모드) 사용자 설정하기 with Global Data 활용

// app.js

// global w-full 에 대한 설정
Alpine.store("wideMode", {
    on: false,
    title: "Small Mode",
    toggle() {
        this.on = !this.on;
        if (this.on) {
            this.title = "Full Mode";
        } else {
            this.title = "Small Mode";
        }
    },
});

<div x-data="{}" :class="$store.wideMode.on ? 'w-full' : 'max-w-7xl'" class="mx-auto mt-6 lg:mt-10">