feat(client): add slot for a searchbar

vuejs · Oct 19, 2020 · 68d9b18 · 68d9b18
1 parent 750fd7e
commit 68d9b18
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="theme">
     <header>
-      <NavBar />
+      <NavBar>
+        <template #search>
+          <slot name="navbar-search" />
+        </template>
+      </NavBar>
       <ToggleSideBarButton @toggle="toggleSidebar" />
     </header>
     <aside :class="{ open }">

diff --git a/src/client/theme-default/components/NavBar.vue b/src/client/theme-default/components/NavBar.vue
@@ -12,7 +12,9 @@
     />
     <span>{{ $site.title }}</span>
   </a>
+  <div class="flex-grow"></div>
   <NavBarLinks class="hide-mobile" />
+  <slot name="search" />
 </template>
 
 <script src="./NavBar"></script>
@@ -24,6 +26,10 @@
   color: var(--text-color);
 }
 
+.flex-grow {
+  flex-grow: 1;
+}
+
 .logo {
   margin-right: 0.75rem;
   height: 1.3rem;

diff --git a/src/client/theme-default/styles/layout.css b/src/client/theme-default/styles/layout.css
@@ -2,17 +2,17 @@ body {
   padding: 0;
   margin: 0;
   background-color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 * {
   box-sizing: border-box;
 }
 
 .theme {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
   font-size: 16px;
   color: var(--text-color);
 }