- add header buttons

src/App.vue

@@ -1,21 +1,29 @@
 <template>
     <!-- <HelloWorld msg="Welcome to Your Vue.js plus TypeScript App" /> -->
     <div id="page_style" class="site-content page__style page__description" autocomplete="off">
-        <!-- <div class="content column is-half is-offset-6" style="text-align: right">        
+        <div class="content column is-half is-offset-6" style="text-align: right">
-        <a class="button" href="/default" target="_self"><img class="icon-spacing" src="/static/images/fa/firefox.svg"
+            <a class="button" href="/test" target="_self">
-            style="width: 16px; height: 16px;"><img class="icon-spacing" src="/static/images/fa/chrome.svg"
+                <img class="icon-spacing" src="./assets/fa/firefox.svg" style="width: 16px; height: 16px" />
-            style="width: 16px; height: 16px;">
+                <img class="icon-spacing" src="./assets/fa/chrome.svg" style="width: 16px; height: 16px" />
-          <img class="icon-spacing" src="/static/images/fa/opera.svg" style="width: 16px; height: 16px;"> <img
+                <img class="icon-spacing" src="./assets/fa/opera.svg" style="width: 16px; height: 16px" />
-            src="/static/images/fa/plus.svg" style="width: 16px; height: 16px;"></a>
+                <img src="./assets/fa/plus.svg" style="width: 16px; height: 16px" />
-        <a class="button" href="/account" target="_self"> <img src="/static/images/fa/user.svg"
-            style="width: 16px; height: 16px;"> </a>
-      </div>
-      <div id="home_padding"></div>
-      <div style="text-align: center;">
-        <a href="/" id="logo_home" target="_self">
-          <img id="logo_img_home" src="/static/images/is/logo_text_black.png" width="20%" style="min-width: 140px;">
             </a>
-      </div> -->
+            <a class="button" href="/test" target="_self">
+                <img src="./assets/fa/user.svg" style="width: 16px; height: 16px" />
+            </a>
+        </div>
+        <!-- <div id="home_padding"></div> -->
+        <div style="text-align: center">
+            <a href="/test" id="logo_home" target="_self">
+                <img id="logo_img_home" src="./assets/images/tethys-icon-mono.png" width="20%" style="min-width: 140px" />
+            </a>
+        </div>
+
+        <div class="content column is-half is-offset-6">
+            <span class="active-filter-items" v-for="(values, key, index) in activeFilterCategories" :key="index">
+                <active-facet-category :data="values" :categoryName="key"></active-facet-category>
+            </span>
+        </div>
 
         <vs-input v-on:search-change="onSearch" v-bind:placeholder="'Enter your search term...'"></vs-input>
 

src/assets/fa/chrome.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg fill="grey" width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M893 0q240-2 451 120 232 134 352 372l-742-39q-160-9-294 74.5t-185 229.5l-276-424q128-159 311-245.5t383-87.5zm-747 405l337 663q72 143 211 217t293 45l-230 451q-212-33-385-157.5t-272.5-316-99.5-411.5q0-267 146-491zm1586 169q58 150 59.5 310.5t-48.5 306-153 272-246 209.5q-230 133-498 119l405-623q88-131 82.5-290.5t-106.5-277.5zm-836 20q125 0 213.5 88.5t88.5 213.5-88.5 213.5-213.5 88.5-213.5-88.5-88.5-213.5 88.5-213.5 213.5-88.5z"/></svg>

src/assets/fa/firefox.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg fill="grey" width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M903 1792q-283 0-504.5-150.5t-329.5-398.5q-58-131-67-301t26-332.5 111-312 179-242.5l-11 281q11-14 68-15.5t70 15.5q42-81 160.5-138t234.5-59q-54 45-119.5 148.5t-58.5 163.5q25 8 62.5 13.5t63 7.5 68 4 50.5 3q15 5 9.5 45.5t-30.5 75.5q-5 7-16.5 18.5t-56.5 35.5-101 34l15 189-139-67q-18 43-7.5 81.5t36 66.5 65.5 41.5 81 6.5q51-9 98-34.5t83.5-45 73.5-17.5q61 4 89.5 33t19.5 65q-1 2-2.5 5.5t-8.5 12.5-18 15.5-31.5 10.5-46.5 1q-60 95-144.5 135.5t-209.5 29.5q74 61 162.5 82.5t168.5 6 154.5-52 128-87.5 80.5-104q43-91 39-192.5t-37.5-188.5-78.5-125q87 38 137 79.5t77 112.5q15-170-57.5-343t-209.5-284q265 77 412 279.5t151 517.5q2 127-40.5 255t-123.5 238-189 196-247.5 135.5-288.5 49.5z"/></svg>

src/assets/fa/opera.svg

@@ -0,0 +1 @@
+<svg fill="grey" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!-- Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M313.9 32.7c-170.2 0-252.6 223.8-147.5 355.1 36.5 45.4 88.6 75.6 147.5 75.6 36.3 0 70.3-11.1 99.4-30.4-43.8 39.2-101.9 63-165.3 63-3.9 0-8 0-11.9-.3C104.6 489.6 0 381.1 0 248 0 111 111 0 248 0h.8c63.1.3 120.7 24.1 164.4 63.1-29-19.4-63.1-30.4-99.3-30.4zm101.8 397.7c-40.9 24.7-90.7 23.6-132-5.8 56.2-20.5 97.7-91.6 97.7-176.6 0-84.7-41.2-155.8-97.4-176.6 41.8-29.2 91.2-30.3 132.9-5 105.9 98.7 105.5 265.7-1.2 364z"/></svg>

src/assets/fa/plus.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg fill="grey" width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z"/></svg>

src/assets/fa/user.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg fill="grey" width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1536 1399q0 109-62.5 187t-150.5 78h-854q-88 0-150.5-78t-62.5-187q0-85 8.5-160.5t31.5-152 58.5-131 94-89 134.5-34.5q131 128 313 128t313-128q76 0 134.5 34.5t94 89 58.5 131 31.5 152 8.5 160.5zm-256-887q0 159-112.5 271.5t-271.5 112.5-271.5-112.5-112.5-271.5 112.5-271.5 271.5-112.5 271.5 112.5 112.5 271.5z"/></svg>