fix(core): make menuCollapsed = true on small screen (#13238)

Co-authored-by: Piyush Bhaskar <impiyush0012@gmail.com>

ui/src/components/layout/OnlyLeftMenuLayout.vue

@@ -12,6 +12,7 @@
     import {useCoreStore} from "../../stores/core";
     import {useMiscStore} from "override/stores/misc";
     import {computed, onMounted} from "vue";
+    import {useLayoutStore} from "../../stores/layout";
 
     const coreStore = useCoreStore();
     const miscStore = useMiscStore();
@@ -22,7 +23,9 @@
         document.getElementsByTagName("html")[0].classList.remove(collapse ? "menu-not-collapsed" : "menu-collapsed");
     }
 
+    const layoutStore = useLayoutStore();
+
     onMounted(() => {
-        onMenuCollapse(localStorage.getItem("menuCollapsed") === "true")
+        onMenuCollapse(Boolean(layoutStore.sideMenuCollapsed))
     });
 </script>

ui/src/components/layout/SideBar.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-    import {onUpdated, ref, computed, h, watch} from "vue";
+    import {onUpdated, computed, h, watch} from "vue";
     import {useI18n} from "vue-i18n";
     import {useRoute} from "vue-router";
     import {useMediaQuery} from "@vueuse/core";
@@ -118,7 +118,10 @@
         ];
     });
 
-    const collapsed = ref(localStorage.getItem("menuCollapsed") === "true")
+    const collapsed = computed({
+        get: () => layoutStore.sideMenuCollapsed,
+        set: (v: boolean) => layoutStore.setSideMenuCollapsed(v),
+    })
 
     const isSmallScreen = useMediaQuery("(max-width: 768px)")
 

ui/src/stores/layout.ts

@@ -12,7 +12,13 @@ export const useLayoutStore = defineStore("layout", {
         topNavbar: undefined,
         envName: localStorage.getItem("envName") || undefined,
         envColor: localStorage.getItem("envColor") || undefined,
-        sideMenuCollapsed: localStorage.getItem("menuCollapsed") === "true",
+        sideMenuCollapsed: (() => {
+            if (typeof window === "undefined") {
+                return false;
+            }
+
+            return localStorage.getItem("menuCollapsed") === "true" || window.matchMedia("(max-width: 768px)").matches;
+        })(),
     }),
     getters: {},
     actions: {