refactor: use nuxt compatiable 4 folder

app/layouts/README.md

@@ -0,0 +1,15 @@
+## Layouts
+
+Vue components in this dir are used as layouts.
+
+By default, `default.vue` will be used unless an alternative is specified in the route meta.
+
+```html
+<script setup lang="ts">
+  definePageMeta({
+    layout: 'home',
+  })
+</script>
+```
+
+Learn more on https://nuxt.com/docs/guide/directory-structure/layouts

app/layouts/child.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+defineProps<{
+  title?: string
+}>()
+
+const route = useRoute()
+</script>
+
+<template>
+  <main class="text-center text-gray-700 dark:text-gray-200" p="t-5 b-15">
+    <div flex items-center justify-between>
+      <BackBtn ml-3 />
+      <h2 flex items-center justify-center text-lg font="bold">
+        {{ route.meta.title }}
+      </h2>
+      <DarkToggle mr-3 />
+    </div>
+
+    <slot />
+    <TheBottomMenu fixed bottom-0 left-0 right-0 />
+  </main>
+</template>

app/layouts/default.vue

@@ -0,0 +1,8 @@
+<template>
+  <main class="cook-main text-center text-gray-700 dark:text-gray-200" p="t-8 b-$cook-bottom-menu-height">
+    <slot />
+    <DarkToggle absolute left-4 top-4 />
+    <SearchRecipe />
+    <TheBottomMenu fixed bottom-0 left-0 right-0 />
+  </main>
+</template>