feat: use nuxt layout

This commit is contained in:
2025-11-13 21:25:03 +01:00
parent 5cfa906324
commit 6d2d632591
5 changed files with 70 additions and 36 deletions

View File

@@ -1,30 +1,3 @@
<script setup lang="ts">
const showStats = ref(false);
</script>
<template>
<div
:style="{
display: 'flex',
flexDirection: 'column',
gap: '4px',
}"
>
<div :style="{ display: 'flex', alignItems: 'center', gap: '4px' }">
<input id="statsCheckbox" v-model="showStats" type="checkbox" />
<label for="statsCheckbox">Stats</label>
</div>
<div>
<HomeTopScreen>
<Stats v-if="showStats" />
</HomeTopScreen>
</div>
<div>
<Screen>
<HomeBottomScreen />
<Stats v-if="showStats" />
</Screen>
</div>
</div>
<NuxtPage />
</template>

View File

@@ -1,10 +1,6 @@
<template>
<Screen>
<HomeTopScreenBackground />
<HomeTopScreenCalendar />
<HomeTopScreenClock />
<HomeTopScreenStatusBar />
<slot />
</Screen>
<HomeTopScreenBackground />
<HomeTopScreenCalendar />
<HomeTopScreenClock />
<HomeTopScreenStatusBar />
</template>

35
app/layouts/default.vue Normal file
View File

@@ -0,0 +1,35 @@
<script setup lang="ts">
const showStats = useState("showStats", () => false);
</script>
<template>
<div
:style="{
display: 'flex',
flexDirection: 'column',
gap: '4px',
}"
>
<div :style="{ display: 'flex', alignItems: 'center', gap: '4px' }">
<input id="statsCheckbox" v-model="showStats" type="checkbox" />
<label for="statsCheckbox">Stats</label>
</div>
<div>
<Screen>
<slot name="top">
<slot />
</slot>
<Stats v-if="showStats" />
</Screen>
</div>
<div>
<Screen>
<slot name="bottom">
<slot />
</slot>
<Stats v-if="showStats" />
</Screen>
</div>
</div>
</template>

13
app/pages/contact.vue Normal file
View File

@@ -0,0 +1,13 @@
<script setup lang="ts">
definePageMeta({
layout: false,
});
</script>
<template>
<NuxtLayout name="default">
<template #top> </template>
<template #bottom> </template>
</NuxtLayout>
</template>

17
app/pages/index.vue Normal file
View File

@@ -0,0 +1,17 @@
<script setup lang="ts">
definePageMeta({
layout: false,
});
</script>
<template>
<NuxtLayout name="default">
<template #top>
<HomeTopScreen />
</template>
<template #bottom>
<HomeBottomScreen />
</template>
</NuxtLayout>
</template>