Changed sort filters to tabs.

assets/components/container/container.vue

@@ -1,20 +1,20 @@
 <template>
-    <div
-        class="container"
-        :class="theme"
-    >
-        <Sidebar
-            v-if="showSidebar"
-            :toggle-sidebar="toggleSidebar"
-        />
+	<div
+		class="container"
+		:class="theme"
+	>
+		<Sidebar
+			v-if="showSidebar"
+			:toggle-sidebar="toggleSidebar"
+		/>
 
-        <Header :toggle-sidebar="toggleSidebar" />
+		<Header :toggle-sidebar="toggleSidebar" />
 
-        <div class="content">
-            <!-- key forces rerender when new and old path use same component -->
-            <router-view />
-        </div>
-    </div>
+		<div class="content">
+			<!-- key forces rerender when new and old path use same component -->
+			<router-view />
+		</div>
+	</div>
 </template>
 
 <script>
@@ -26,39 +26,39 @@ import Header from '../header/header.vue';
 import Sidebar from '../sidebar/sidebar.vue';
 
 function theme(state) {
-    return state.ui.theme;
+	return state.ui.theme;
 }
 
 function toggleSidebar(state) {
-    this.showSidebar = typeof state === 'boolean' ? state : !this.showSidebar;
+	this.showSidebar = typeof state === 'boolean' ? state : !this.showSidebar;
 }
 
 function mounted() {
-    document.addEventListener('click', () => {
-        EventBus.$emit('blur');
-        this.showSidebar = false;
-    });
+	document.addEventListener('click', () => {
+		EventBus.$emit('blur');
+		this.showSidebar = false;
+	});
 }
 
 export default {
-    components: {
-        Header,
-        Sidebar,
-    },
-    data() {
-        return {
-            showSidebar: false,
-        };
-    },
-    computed: {
-        ...mapState({
-            theme,
-        }),
-    },
-    mounted,
-    methods: {
-        toggleSidebar,
-    },
+	components: {
+		Header,
+		Sidebar,
+	},
+	data() {
+		return {
+			showSidebar: false,
+		};
+	},
+	computed: {
+		...mapState({
+			theme,
+		}),
+	},
+	mounted,
+	methods: {
+		toggleSidebar,
+	},
 };
 </script>
 
@@ -71,7 +71,7 @@ export default {
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    background: var(--background-dim);
+    background: var(--background-soft);
     color: var(--text);
 }
 
@@ -85,6 +85,6 @@ export default {
 .content-inner {
     flex-grow: 1;
     padding: 1rem;
-    overflow-y: auto;
+	border-top: solid 1px var(--crease);
 }
 </style>