From d3ab8fb2c10d90a0282ed7a7fc97be97422a0870 Mon Sep 17 00:00:00 2001
From: YunYouJun <me@yunyoujun.cn>
Date: Mon, 6 Nov 2023 02:00:56 +0800
Subject: [PATCH] fix: add css var safe padding bottom

---
 components/TheBottomMenu.vue | 13 +++++--------
 layouts/default.vue          |  2 +-
 package.json                 |  2 +-
 styles/css-vars.scss         |  6 ++++++
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/components/TheBottomMenu.vue b/components/TheBottomMenu.vue
index 215e0ad..b119933 100644
--- a/components/TheBottomMenu.vue
+++ b/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>
diff --git a/layouts/default.vue b/layouts/default.vue
index 7c246d4..d6cb240 100644
--- a/layouts/default.vue
+++ b/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 />
diff --git a/package.json b/package.json
index 210ffcc..35de6f5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "type": "module",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "private": true,
   "packageManager": "pnpm@8.10.2",
   "engines": {
diff --git a/styles/css-vars.scss b/styles/css-vars.scss
index 1f41c73..7690243 100644
--- a/styles/css-vars.scss
+++ b/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));
+}