fix: add css var safe padding bottom

components/TheBottomMenu.vue

@@ -38,24 +38,21 @@ const route = useRoute()
 const router = useRouter()
 
 function onClick(item: BottomMenuItem) {
-  router.push(item.to || '/')
+  // router.push(item.to || '/')
+  router.replace(item.to || '/')
 }
 </script>
 
 <template>
-  <YlfBottomMenu shadow-2xl>
+  <YlfBottomMenu shadow-2xl pb="$cook-bottom-menu-padding-bottom">
     <YlfBottomMenuItem
       v-for="item in items"
       :key="item.to"
       :item="item"
       :active="route.path === item.to"
       @click="onClick"
+      class="pt-3"
+      style="backdrop-filter: blur(10px);"
     />
   </YlfBottomMenu>
 </template>
-
-<style>
-.ylf-bottom-menu {
-  padding-bottom: env(safe-area-inset-bottom);
-}
-</style>

layouts/default.vue

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

package.json

@@ -1,6 +1,6 @@
 {
   "type": "module",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "private": true,
   "packageManager": "pnpm@8.10.2",
   "engines": {

styles/css-vars.scss

@@ -22,3 +22,9 @@
 .dark {
   --ylf-c-border: #666;
 }
+
+// cook custom
+:root {
+  --cook-bottom-menu-padding-bottom: 20px;
+  --cook-bottom-menu-height: calc(64px + var(--cook-bottom-menu-padding-bottom));
+}