65 lines
1.7 KiB
Vue
65 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { watch, onMounted, computed } from 'vue';
|
|
import { useSettingsStore } from '../stores/settings';
|
|
import Desktop from '../components/Desktop.vue';
|
|
|
|
// Import global styles directly here using a relative path
|
|
import '../assets/css/main.css';
|
|
|
|
const settingsStore = useSettingsStore();
|
|
|
|
// Define routes that should show pages instead of desktop
|
|
const specialRoutes = ['/500', '/404', '/error', '/login', '/register'];
|
|
|
|
// Check if current route should show a page
|
|
const shouldShowPage = computed(() => {
|
|
// Use Nuxt's useRoute composable which is available globally
|
|
const route = useRoute();
|
|
const currentPath = route?.path || '';
|
|
return specialRoutes.includes(currentPath);
|
|
});
|
|
|
|
// Function to apply the theme, ensuring it only runs on the client
|
|
const applyTheme = (theme: string) => {
|
|
if (typeof document !== 'undefined') {
|
|
// A more robust way to set the class
|
|
document.body.classList.remove('theme-light', 'theme-dark');
|
|
document.body.classList.add(`theme-${theme}`);
|
|
}
|
|
};
|
|
|
|
// Watch for changes in the theme state and apply them
|
|
watch(() => settingsStore.theme, (newTheme) => {
|
|
applyTheme(newTheme);
|
|
});
|
|
|
|
// Apply the initial theme when the app mounts on the client-side
|
|
onMounted(() => {
|
|
applyTheme(settingsStore.theme);
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<!-- Always show desktop as background -->
|
|
<Desktop />
|
|
<!-- Overlay pages on top when needed -->
|
|
<div v-if="shouldShowPage" class="page-overlay">
|
|
<NuxtPage />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.page-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: 10000;
|
|
background: var(--background-desktop);
|
|
}
|
|
</style>
|