[WIP] New Client - Shops/Market (#8884)

* initial market - routing - store - load market data

* move drawer/drawerSlider / count/star badge to components/ui

* filter market categories

* shopItem with gem / gold

* show count of purchable items

* show count of purchable itemsshow drawer with currently owned items + DrawerHeaderTabs-Component

* show featured gear

* show Gear - filter by class - sort by (type, price, stats) - sort market items

* Component: ItemRows - shows only the max items in one row (depending on the available width)

* Sell Dialog + Balance Component

* generic buy-dialog / attributes grid with highlight

* buyItem - hide already owned gear

* filter: hide locked/pinned - lock items if not enough gold

* API: Sell multiple items

* show avatar in buy-equipment-dialog with changed gear

* market banner

* misc fixes

* filter by text

* pin/unpin gear store actions

* Sell API: amount as query-parameter

* Update user.js

* fixes

* fix sell api amount test

* add back stroke/fill currentColor

* use scss variables

website/client/components/ui/drawerHeaderTabs.vue

@@ -0,0 +1,65 @@
+<template lang="pug">
+div.header-tabs
+  .drawer-tab-container
+    .drawer-tab(v-for="(tab, index) in tabs")
+      a.drawer-tab-text(
+        @click="changeTab(index)",
+        :class="{'drawer-tab-text-active': selectedTabPosition === index}",
+        :title="tab.label"
+      ) {{ tab.label }}
+
+  span.right-item
+    slot(name="right-item")
+</template>
+
+<style lang="scss" scoped>
+  .drawer-tab-text {
+    overflow-x: hidden;
+    display: block;
+    text-overflow: ellipsis;
+  }
+
+  .drawer-tab {
+    white-space: nowrap;
+    overflow-x: hidden;
+    flex: inherit;
+  }
+
+  .drawer-tab-container {
+    max-width: 50%;
+    margin: 0 auto;
+  }
+
+  .right-item {
+    position: absolute;
+    right: -11px;
+    top: -2px;
+  }
+
+  .header-tabs {
+    position: relative;
+    display: flex;
+  }
+</style>
+
+<script>
+  export default {
+    props: {
+      tabs: {
+        type: Array,
+        required: true,
+      },
+    },
+    data () {
+      return {
+        selectedTabPosition: 0,
+      };
+    },
+    methods: {
+      changeTab (newIndex) {
+        this.selectedTabPosition = newIndex;
+        this.$emit('changedPosition', newIndex);
+      },
+    },
+  };
+</script>