Added Tabs and Tab UI elements.

platypush/backend/http/webapp/src/components/elements/Tab.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="tab" :class="selected ? 'selected' : ''" @click="$emit('input')">
+    <span class="icon" v-if="iconClass?.length || iconUrl?.length">
+      <Icon :class="iconClass" :url="iconUrl" />
+    </span> &nbsp;
+    <slot />
+  </div>
+</template>
+
+<script>
+import Icon from "@/components/elements/Icon";
+
+export default {
+  name: "Tab",
+  components: {Icon},
+  emits: ['input'],
+  props: {
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+
+    iconClass: {
+      type: String,
+    },
+
+    iconUrl: {
+      type: String,
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.tab {
+  background: $tab-bg;
+  display: flex;
+  padding: 1em;
+  align-items: center;
+  border-right: $default-border-2;
+  cursor: pointer;
+
+  &.selected {
+    background: $selected-bg;
+    font-weight: bold;
+  }
+
+  &:hover {
+    background: $hover-bg;
+  }
+
+  :deep(.icon-container) {
+    width: 1.5em;
+  }
+}
+</style>

platypush/backend/http/webapp/src/components/elements/Tabs.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="tabs">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Tabs",
+}
+</script>
+
+<style lang="scss" scoped>
+.tabs {
+  background: $tabs-bg;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  margin-top: 0.2em;
+  margin-bottom: 0.2em;
+  box-shadow: $border-shadow-bottom;
+}
+</style>

platypush/backend/http/webapp/src/style/themes/light.scss

@@ -12,6 +12,7 @@ $default-fg: black !default;
 $default-fg-2: #23513a !default;
 $default-fg-3: #195331b3 !default;
 $header-bg: linear-gradient(0deg, #c0e8e4, #e4f8f4) !default;
+$header-bg-2: linear-gradient(90deg, #f3f3f3, white) !default;
 $no-items-color: #555555;
 
 //// Notifications
@@ -47,6 +48,10 @@ $default-border: 1px solid $border-color-1 !default;
 $default-border-2: 1px solid $border-color-2 !default;
 $default-border-3: 1px solid $border-color-3 !default;
 
+//// Tabs
+$tabs-bg: #f6f6f6 !default;
+$tab-bg: linear-gradient(0deg, #ececec, #f6f6f6) !default;
+
 //// Shadows
 $default-shadow-color: #c0c0c0 !default;
 $border-shadow-top: 0 -2.5px 4px 0 $default-shadow-color;