Merge #170

170: Add margin right to the searchbox r=bidoubiwa a=mdubus

Closes #169 

## What's inside ? 

- Addition of margin-right to the searchbox
- Addition of a menu in the playground to see the changes and impact

## Screenshots

Before: 
![before](https://user-images.githubusercontent.com/30866152/124610711-06b30b80-de71-11eb-8cdc-45aa839367bb.png)

After:
![after](https://user-images.githubusercontent.com/30866152/124610747-0dda1980-de71-11eb-8494-5172d1dc0018.png)



Co-authored-by: Morgane Dubus <morgane.d@meilisearch.com>

Author: bors[bot]

MeiliSearchBox.vue

@@ -83,12 +83,14 @@ export default {
 @require './styles/palette.styl'
 
 .meilisearch-search-wrapper
-  & > span
+  display: inline-block;
+  position: relative;
+  margin-right 1rem
+  & > div > span
     vertical-align middle
   .dsb-cursor
     background rgba($accentColor, 0.05)
   .meilisearch-autocomplete
-    line-height 2
     // Searchbox
     input
       cursor text

playground/.vuepress/config.js

@@ -2,7 +2,12 @@ module.exports = {
   title: 'Welcome to the Playground!',
   theme: 'default-prefers-color-scheme',
   themeConfig: {
-    prefersTheme: 'dark'
+    prefersTheme: 'dark',
+    nav: [
+      { text: 'Learn', link: '/learn/' },
+      { text: 'Create', link: '/create/how_to/' },
+      { text: 'Reference', link: '/reference/' }
+    ]
   },
   plugins: [
     [