Layout store (Pinia)

LayoutStore.js

import { defineStore } from "pinia";

import useBreaks from "../Composables/useBreakpoints";
const { isSmall, isMedium, isLarge, isExtraLarge, is2xl, greaterThanMedium, greaterThanLarge } = useBreaks();

export const useLayoutStore = defineStore("layout", {
    state: () => ({
        sidebar: {
            open: false,
            expanded: false,
            index: 1,
        },
        mobileMenu: false,
        popups: {
            user: false,
            notification: false,
            apps: false,
            settings: false,
            display: false,
            language: false,
            tray: false,
            search: false,
            messages: false,
        },
    }),
    getters: {
        isSidebarOpen() { return this.sidebar.open === true },
        isSidebarExpanded() { return this.sidebar.expanded === true },
        sidebarIndex() { return this.sidebar.index },
        isSmall() { return isSmall.value },
        isMedium() { return isMedium.value },
        isLarge() { return isLarge.value },
        isExtraLarge() { return isExtraLarge.value },
        is2xl() { return is2xl.value },
        greaterThanMedium() { return greaterThanMedium.value },
        greaterThanLarge() { return greaterThanLarge.value },
        isItemOpen(category, item) {
            if (item) {
                return this.$state[category][item] === true;
            } else {
                return this.$state[category] === true;
            }
        },
    },
    actions: {
        setIndex(value) { this.sidebar.index = value },
        setExpanded(value) { this.sidebar.expanded = value },
        openSidebar() { this.sidebar.open = true },
        closeSidebar() {
            this.sidebar.index = 1;
            this.sidebar.expanded = false;
            this.sidebar.open = false;
        },
        toggle() {
            if (this.isSmall) {
                if (!this.isSidebarOpen && this.sidebarIndex === 1) {
                    this.setIndex(2);
                    this.openSidebar();
                } else if (this.isSidebarOpen) {
                    if (!this.isSidebarExpanded && this.sidebarIndex === 2) {
                        this.setIndex(3);
                        this.setExpanded(true);
                    } else if (
                        this.isSidebarExpanded &&
                        this.sidebarIndex === 3
                    ) {
                        this.closeSidebar();
                    }
                }
            }
            if (this.greaterThanMedium) {
                if (this.isSidebarOpen) {
                    if (!this.isSidebarExpanded && this.sidebarIndex === 1) {
                        this.setIndex(2);
                        this.setExpanded(true);
                    } else if (
                        this.isSidebarExpanded &&
                        this.sidebarIndex === 2
                    ) {
                        this.setIndex(1);
                        this.setExpanded(false);
                    }
                }
            }
        },
        toggleItem(category, item) {
            if (item) {
                this.$state[category][item] = !this.$state[category][item];
            } else {
                this.$state[category] = !this.$state[category];
            }
        },
        show(category, item) {
            if (item) {
                this.$state[category][item] = true;
            } else {
                this.$state[category] = true;
            }
        },
        hide(category, item) {
            if (item) {
                this.$state[category][item] = false;
            } else {
                this.$state[category] = false;
            }
        },
        hideAll(category) {
            // use hasOwnProperty to avoid hiding the whole category
            Object.keys(this.$state[category]).forEach((key) => {
                this.$state[category][key] = false;
            });
        },
    },
});

UseOfStore.Vue

<script setup>
const layout = useLayoutStore();

onMounted(() => {
  if (layout.greaterThanMedium && isLoggedIn.value) {
    main.value.classList.add(openLeftMargin);
    layout.openSidebar();
  }
});
</script>

<template>
    <div
        id="main"
        :class="[
            layout.isSmall ? 'w-screen' : 'border-x-2 border-gray-700',
            layout.isMedium ? 'w-[580px] mx-4' : '',
            layout.isLarge && layout.isSidebarExpanded ? 'w-[490px] mx-4' : '',
            layout.isLarge && !layout.isSidebarExpanded ? 'w-[608px] mx-4' : '',
            layout.isExtraLarge || layout.is2xl ? 'w-[608px] mx-4' : '',
        ]"
        class="relative flex flex-col bg-sky-300 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200"
    >
        Something
    </div>
</template>