From 4df66f2dded39eca48ecd6210343cd06ae012f42 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 29 Jun 2024 14:43:05 +0200
Subject: [PATCH] chore: provide `screenMenu` prop

---
 __tests__/e2e/.vitepress/theme/CustomAppearance.vue        | 7 +++++--
 .../theme-default/components/VPNavScreenMenuGroup.vue      | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/__tests__/e2e/.vitepress/theme/CustomAppearance.vue b/__tests__/e2e/.vitepress/theme/CustomAppearance.vue
index 707211d0..72baa03f 100644
--- a/__tests__/e2e/.vitepress/theme/CustomAppearance.vue
+++ b/__tests__/e2e/.vitepress/theme/CustomAppearance.vue
@@ -2,7 +2,7 @@
 import { useData } from 'vitepress'
 import VPSwitchAppearance from 'vitepress/dist/client/theme-default/components/VPSwitchAppearance.vue'
 
-defineProps<{ text: string }>()
+defineProps<{ text: string; screenMenu?: boolean }>()
 
 const { site, theme } = useData()
 </script>
@@ -11,6 +11,7 @@ const { site, theme } = useData()
   <div
     v-if="site.appearance && site.appearance !== 'force-dark'"
     class="CustomAppearance"
+    :class="{ mobile: screenMenu }"
   >
     <p class="text">
       {{ text || theme.darkModeSwitchLabel || 'Appearance' }}
@@ -26,9 +27,11 @@ const { site, theme } = useData()
   align-items: center;
   border-radius: 8px;
   padding: 12px 14px 12px 16px;
-  background-color: var(--vp-c-bg-soft);
   min-width: 200px;
 }
+.CustomAppearance.mobile {
+  background-color: var(--vp-c-bg-soft);
+}
 
 .text {
   line-height: 24px;
diff --git a/src/client/theme-default/components/VPNavScreenMenuGroup.vue b/src/client/theme-default/components/VPNavScreenMenuGroup.vue
index 67c2955b..7bc62b1a 100644
--- a/src/client/theme-default/components/VPNavScreenMenuGroup.vue
+++ b/src/client/theme-default/components/VPNavScreenMenuGroup.vue
@@ -38,7 +38,7 @@ function toggle() {
         </div>
 
         <div v-else-if="'component' in item" :key="item.component" class="item">
-          <component :is="item.component" v-bind="{ text: item.text }" />
+          <component :is="item.component" v-bind="{ text: item.text, screenMenu: true }" />
         </div>
 
         <div v-else class="group">