Add non-interactive suggestions

src/components/SearchSuggestions.vue

@@ -1,5 +1,13 @@
 <template>
-    <div class="uk-container-expand"></div>
+    <div
+        class="uk-position-absolute uk-panel uk-box-shadow-large uk-padding-small suggestions-container"
+    >
+        <ul class="uk-list uk-margin-remove uk-text-secondary">
+            <li v-for="(suggestion, i) in searchSuggestions" :key="i">
+                {{ suggestion }}
+            </li>
+        </ul>
+    </div>
 </template>
 
 <script>
@@ -10,4 +18,23 @@ export default {
 };
 </script>
 
-<style></style>
+<style>
+.suggestions-container {
+    background-color: #242727;
+    left: 50%;
+    transform: translateX(-50%);
+    max-width: 640px;
+    width: 100%;
+    box-sizing: border-box;
+}
+@media screen and (max-width: 959px) {
+    .suggestions-container {
+        max-width: calc(100% - 60px);
+    }
+}
+@media screen and (max-width: 639px) {
+    .suggestions-container {
+        max-width: calc(100% - 30px);
+    }
+}
+</style>