From 1ff57912922c3aeaacc7f89bbfd950ece5449768 Mon Sep 17 00:00:00 2001
From: Sacha STAFYNIAK <sacha@digisquad.io>
Date: Tue, 7 Jun 2022 17:42:37 +0200
Subject: [PATCH] feat(next): add navigation slots

close #739
---
 src/client/theme-default/Layout.vue                  |  9 ++++++++-
 src/client/theme-default/components/VPNav.vue        | 12 ++++++++++--
 src/client/theme-default/components/VPNavBar.vue     |  7 ++++++-
 .../theme-default/components/VPNavBarTitle.vue       |  2 ++
 src/client/theme-default/components/VPNavScreen.vue  |  2 ++
 5 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index 77fe1c5d..edb289e0 100644
--- a/src/client/theme-default/Layout.vue
+++ b/src/client/theme-default/Layout.vue
@@ -24,7 +24,14 @@ provide('close-sidebar', closeSidebar)
   <div class="Layout">
     <VPSkipLink />
     <VPBackdrop class="backdrop" :show="isSidebarOpen" @click="closeSidebar" />
-    <VPNav />
+    <VPNav>
+      <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-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>
+    </VPNav>
     <VPLocalNav :open="isSidebarOpen" @open-menu="openSidebar" />
     <VPSidebar :open="isSidebarOpen" />
 
diff --git a/src/client/theme-default/components/VPNav.vue b/src/client/theme-default/components/VPNav.vue
index 9897e1a6..c1a97d13 100644
--- a/src/client/theme-default/components/VPNav.vue
+++ b/src/client/theme-default/components/VPNav.vue
@@ -13,8 +13,16 @@ provide('close-screen', closeScreen)
 
 <template>
   <header class="VPNav" :class="{ 'no-sidebar' : !hasSidebar }">
-    <VPNavBar :is-screen-open="isScreenOpen" @toggle-screen="toggleScreen" />
-    <VPNavScreen :open="isScreenOpen" />
+    <VPNavBar :is-screen-open="isScreenOpen" @toggle-screen="toggleScreen">
+      <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-after><slot name="nav-bar-content-after" /></template>
+    </VPNavBar>
+    <VPNavScreen :open="isScreenOpen">
+      <template #nav-screen-content-before><slot name="nav-screen-content-before" /></template>
+      <template #nav-screen-content-after><slot name="nav-screen-content-after" /></template>
+    </VPNavScreen>
   </header>
 </template>
 
diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue
index 4e27b1f6..03f65aed 100644
--- a/src/client/theme-default/components/VPNavBar.vue
+++ b/src/client/theme-default/components/VPNavBar.vue
@@ -23,15 +23,20 @@ const { hasSidebar } = useSidebar()
 <template>
   <div class="VPNavBar" :class="{ 'has-sidebar' : hasSidebar }">
     <div class="container">
-      <VPNavBarTitle />
+      <VPNavBarTitle>
+        <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
+        <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
+      </VPNavBarTitle>
 
       <div class="content">
+        <slot name="nav-bar-content-before" />
         <VPNavBarSearch class="search" />
         <VPNavBarMenu class="menu" />
         <VPNavBarTranslations class="translations" />
         <VPNavBarAppearance class="appearance" />
         <VPNavBarSocialLinks class="social-links" />
         <VPNavBarExtra class="extra" />
+        <slot name="nav-bar-content-after" />
         <VPNavBarHamburger
           class="hamburger"
           :active="isScreenOpen"
diff --git a/src/client/theme-default/components/VPNavBarTitle.vue b/src/client/theme-default/components/VPNavBarTitle.vue
index c09c06dc..4364d6c8 100644
--- a/src/client/theme-default/components/VPNavBarTitle.vue
+++ b/src/client/theme-default/components/VPNavBarTitle.vue
@@ -9,9 +9,11 @@ const { hasSidebar } = useSidebar()
 <template>
   <div class="VPNavBarTitle" :class="{ 'has-sidebar': hasSidebar }">
     <a class="title" href="/">
+      <slot name="nav-bar-title-before" />
       <img v-if="theme.logo" class="logo" :src="theme.logo">
       <template v-if="theme.siteTitle">{{ theme.siteTitle }}</template>
       <template v-else-if="theme.siteTitle === undefined">{{ site.title }}</template>
+      <slot name="nav-bar-title-after" />
     </a>
   </div>
 </template>
diff --git a/src/client/theme-default/components/VPNavScreen.vue b/src/client/theme-default/components/VPNavScreen.vue
index 7204ac8f..67972f46 100644
--- a/src/client/theme-default/components/VPNavScreen.vue
+++ b/src/client/theme-default/components/VPNavScreen.vue
@@ -29,10 +29,12 @@ function unlockBodyScroll() {
   >
     <div v-if="open" class="VPNavScreen" ref="screen">
       <div class="container">
+        <slot name="nav-screen-content-before" />
         <VPNavScreenMenu class="menu" />
         <VPNavScreenTranslations class="translations" />
         <VPNavScreenAppearance class="appearance" />
         <VPNavScreenSocialLinks class="social-links" />
+        <slot name="nav-screen-content-after" />
       </div>
     </div>
   </transition>