update: instance search page add common navbar

docs/.vuepress/components/Navbar.vue

@@ -1,13 +1,13 @@
 <script setup>
-import Sidebar from 'vuepress-theme-hope/modules/navbar/components/Navbar.js'
+import Navbar from 'vuepress-theme-hope/modules/navbar/components/Navbar.js'
 import { useThemeLocaleData } from 'vuepress-theme-hope/composables/index'
 
 const themeData = useThemeLocaleData()
 const extraNavList = themeData.value.extra_nav || []
 </script>
 
 <template>
-  <Sidebar>
+  <Navbar>
     <template #endBefore>
       <Docsearch />
       <el-link
@@ -19,7 +19,7 @@ const extraNavList = themeData.value.extra_nav || []
         >{{ item.text }}
       </el-link>
     </template>
-  </Sidebar>
+  </Navbar>
 </template>
 
 <style scope></style>

docs/.vuepress/layouts/InstanceSearchLayout.vue

@@ -1,12 +1,13 @@
 <template>
+  <navbar />
   <ClientOnly>
     <ais-instant-search
       index-name="im-beta-easemob"
       :search-client="searchClient"
       :initial-ui-state="initialUiState"
     >
       <ais-configure
-        :hitsPerPage="8"
+        :hitsPerPage="6"
         :maxValuesPerFacet="22"
         :attributesToSnippet="[
           'hierarchy.lvl1:20',
@@ -62,12 +63,15 @@
 </template>
 
 <script>
+import Navbar from '../components/Navbar.vue'
 import { liteClient } from 'algoliasearch/lite'
 import { useRoute } from 'vue-router'
 
 export default {
   name: 'InstanceSearchLayout',
-
+  components: {
+    Navbar
+  },
   data() {
     return {
       searchClient: liteClient(
@@ -94,9 +98,12 @@ export default {
 </script>
 
 <style>
+body {
+  height: 100%;
+}
 .searchBoxContainer {
-  max-width: 1280px;
-  margin: 1em auto;
+  max-width: 1080px;
+  margin: 75px auto 20px;
   display: flex;
   font-family: sans-serif;
   padding: 1em;