Merge 176fffe162 into 55be3f14d7

docs/guide/extending-default-theme.md

@@ -211,6 +211,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`

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>

src/client/theme-default/components/VPNav.vue

@@ -28,6 +28,7 @@ watchEffect(() => {
       <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">

src/client/theme-default/components/VPNavBar.vue

@@ -48,7 +48,10 @@ watchPostEffect(() => {
         <div class="curtain" />
         <div class="content-body">
           <slot name="nav-bar-content-before" />
+          <div class="content-body-context">
             <VPNavBarSearch class="search" />
+            <slot name="nav-bar-content-middle" />
+          </div>
           <VPNavBarMenu class="menu" />
           <VPNavBarTranslations class="translations" />
           <VPNavBarAppearance class="appearance" />
@@ -167,6 +170,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;

src/client/theme-default/components/VPNavBarSearch.vue

@@ -164,7 +164,6 @@ const provider = __ALGOLIA__ ? 'algolia' : __VP_LOCAL_SEARCH__ ? 'local' : ''
 
 @media (min-width: 768px) {
   .VPNavBarSearch {
-    flex-grow: 1;
     padding-left: 24px;
   }
 }