From 176fffe1629065066bc23d13c629755d79d1c7c8 Mon Sep 17 00:00:00 2001
From: xiangxiao <xxholly32@163.com>
Date: Mon, 28 Aug 2023 18:23:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20middle=20slot=20in?=
 =?UTF-8?q?=20navbar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/guide/extending-default-theme.md                  |  1 +
 src/client/theme-default/Layout.vue                    |  1 +
 src/client/theme-default/components/VPNav.vue          |  1 +
 src/client/theme-default/components/VPNavBar.vue       | 10 +++++++++-
 src/client/theme-default/components/VPNavBarSearch.vue |  1 -
 5 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/docs/guide/extending-default-theme.md b/docs/guide/extending-default-theme.md
index 71aabec6..b9eb1dfa 100644
--- a/docs/guide/extending-default-theme.md
+++ b/docs/guide/extending-default-theme.md
@@ -195,6 +195,7 @@ Full list of slots available in the default theme layout:
   - `nav-bar-title-before`
   - `nav-bar-title-after`
   - `nav-bar-content-before`
+  - `nav-bar-content-middle`
   - `nav-bar-content-after`
   - `nav-screen-content-before`
   - `nav-screen-content-after`
diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index 52bb16b2..f104cb9b 100644
--- a/src/client/theme-default/Layout.vue
+++ b/src/client/theme-default/Layout.vue
@@ -39,6 +39,7 @@ provide('hero-image-slot-exists', heroImageSlotExists)
       <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
       <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
       <template #nav-bar-content-before><slot name="nav-bar-content-before" /></template>
+      <template #nav-bar-content-middle><slot name="nav-bar-content-middle" /></template>
       <template #nav-bar-content-after><slot name="nav-bar-content-after" /></template>
       <template #nav-screen-content-before><slot name="nav-screen-content-before" /></template>
       <template #nav-screen-content-after><slot name="nav-screen-content-after" /></template>
diff --git a/src/client/theme-default/components/VPNav.vue b/src/client/theme-default/components/VPNav.vue
index b654a043..51d5f5f5 100644
--- a/src/client/theme-default/components/VPNav.vue
+++ b/src/client/theme-default/components/VPNav.vue
@@ -15,6 +15,7 @@ provide('close-screen', closeScreen)
       <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
       <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
       <template #nav-bar-content-before><slot name="nav-bar-content-before" /></template>
+      <template #nav-bar-content-middle><slot name="nav-bar-content-middle" /></template>
       <template #nav-bar-content-after><slot name="nav-bar-content-after" /></template>
     </VPNavBar>
     <VPNavScreen :open="isScreenOpen">
diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue
index 755da68e..471633ee 100644
--- a/src/client/theme-default/components/VPNavBar.vue
+++ b/src/client/theme-default/components/VPNavBar.vue
@@ -49,7 +49,10 @@ watchPostEffect(() => {
         <div class="curtain" />
         <div class="content-body">
           <slot name="nav-bar-content-before" />
-          <VPNavBarSearch class="search" />
+          <div class="content-body-context">
+            <VPNavBarSearch class="search" />
+            <slot name="nav-bar-content-middle" />
+          </div>
           <VPNavBarMenu class="menu" />
           <VPNavBarTranslations class="translations" />
           <VPNavBarAppearance class="appearance" />
@@ -168,6 +171,11 @@ watchPostEffect(() => {
   transition: background-color 0.5s;
 }
 
+.content-body-context {
+  display: flex;
+  flex-grow: 1;
+}
+
 @media (min-width: 960px) {
   .VPNavBar:not(.top) .content-body{
     position: relative;
diff --git a/src/client/theme-default/components/VPNavBarSearch.vue b/src/client/theme-default/components/VPNavBarSearch.vue
index 32d78880..f0e7c00b 100644
--- a/src/client/theme-default/components/VPNavBarSearch.vue
+++ b/src/client/theme-default/components/VPNavBarSearch.vue
@@ -188,7 +188,6 @@ const provider = __ALGOLIA__ ? 'algolia' : __VP_LOCAL_SEARCH__ ? 'local' : ''
 
 @media (min-width: 768px) {
   .VPNavBarSearch {
-    flex-grow: 1;
     padding-left: 24px;
   }
 }