Provide a globally injected isMobile state for reactivity

2025-12-17 16:44:01 +01:00
parent 16e79c6546
commit b90cdb8686
2 changed files with 23 additions and 9 deletions
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 const i18n = useI18n();
 const t = i18n.t;

-import { onMounted, ref, useTemplateRef, provide } from 'vue';
+import { onMounted, onUnmounted, ref, useTemplateRef, provide } from 'vue';
 import { Notification, fetcher } from '@cloudron/pankow';
 import { setLanguage } from './i18n.js';
 import { API_ORIGIN, TOKEN_TYPES } from './constants.js';
@@ -393,14 +393,22 @@ async function onOnline() {
  await refreshConfigAndFeatures(); // reload dashboard if needed after an update
 }

+const isMobile = ref(window.innerWidth <= 576);
+function checkForMobile() {
+  isMobile.value = window.innerWidth <= 576;
+}
+
 provide('subscriptionRequiredDialog', subscriptionRequiredDialog);
 provide('features', features);
 provide('profile', profile);
 provide('refreshProfile', refreshProfile);
 provide('refreshFeatures', refreshConfigAndFeatures);
 provide('dashboardDomain', dashboardDomain);
+provide('isMobile', isMobile);

 onMounted(async () => {
+  window.addEventListener('resize', checkForMobile);
+
  const [error, result] = await provisionModel.status();
  if (error) return window.cloudron.onError(error);

@@ -434,6 +442,10 @@ onMounted(async () => {
  ready.value = true;
 });

+onUnmounted(() => {
+  window.removeEventListener('resize', checkForMobile);
+});
+
 </script>

 <template>