feat: added search to header menu, as well as an 'early feature' notice

Author: ErikBjare

src/components/Header.vue

@@ -48,10 +48,18 @@ div.aw-navbar
           span.ml-2.align-middle(style="font-size: 1.0em; color: #000;") ActivityWatch
 
       b-navbar-nav.ml-auto
-        b-nav-item(to="/query", active-class="aw-active")
-          div.px-2.px-lg-1
+        b-nav-item-dropdown
+          template(slot="button-content")
+            div.d-inline.px-2.px-lg-1
+              icon(name="tools")
+              | Tools
+          b-dropdown-item(to="/search")
             icon(name="search")
+            | Search
+          b-dropdown-item(to="/query")
+            icon(name="code")
             | Query
+
         b-nav-item(to="/buckets")
           div.px-2.px-lg-1
             icon(name="database")
@@ -69,8 +77,10 @@ import 'vue-awesome/icons/calendar-week';
 import 'vue-awesome/icons/stream';
 import 'vue-awesome/icons/database';
 import 'vue-awesome/icons/search';
+import 'vue-awesome/icons/code';
 import 'vue-awesome/icons/stopwatch';
 import 'vue-awesome/icons/cog';
+import 'vue-awesome/icons/tools';
 
 import 'vue-awesome/icons/mobile';
 import 'vue-awesome/icons/desktop';
@@ -129,11 +139,6 @@ export default {
   border-width: 0 0 1px 0;
 }
 
-.active {
-  background-color: #ddd;
-  border-radius: 0.5em;
-}
-
 .nav-item {
   align-items: center;
 

src/views/Search.vue

@@ -1,9 +1,11 @@
 <template lang="pug">
-
 div
   h3 Search
 
-  div.alert.alert-danger(v-if="error")
+  b-alert(style="warning" show)
+    | This feature is still in early development.
+
+  b-alert(v-if="error" show variant="danger")
     | {{error}}
 
   b-input-group(size="lg")