1 files changed, 118 insertions, 0 deletions
diff --git a/src-vue/src/components/ModsMenu.vue b/src-vue/src/components/ModsMenu.vue
new file mode 100644
index 00000000..9b62fcfa
--- /dev/null
+++ b/src-vue/src/components/ModsMenu.vue
@@ -0,0 +1,118 @@
+<template>
+    <nav class="fc_mods__menu">
+        <el-menu
+            default-active="1"
+            text-color="#fff"
+        >
+            <h5>Mods</h5>
+            <el-menu-item index="1" @click="$emit('showLocalMods', true)">
+                <el-icon><Folder /></el-icon>
+                <span>Local</span>
+            </el-menu-item>
+            <el-menu-item index="2" @click="$emit('showLocalMods', false)">
+                <el-icon><Connection /></el-icon>
+                <span>Online</span>
+            </el-menu-item>
+
+            <!-- Search inputs -->
+            <h5>Filter</h5>
+            <el-input v-model="$store.state.search.searchValue" placeholder="Search" clearable />
+            <el-select
+                v-if="!showingLocalMods"
+                v-model="$store.state.search.sortValue" 
+                placeholder="Sort mods"
+            >
+                <el-option
+                    v-for="item of sortValues"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                />
+            </el-select>
+            <el-select
+                v-if="!showingLocalMods"
+                v-model="$store.state.search.selectedCategories"
+                multiple
+                placeholder="Select categories"
+            >
+                <el-option
+                    v-for="item in $store.state.thunderstoreModsCategories"
+                    :key="item"
+                    :label="item"
+                    :value="item"
+                />
+            </el-select>
+
+        </el-menu>
+    </nav>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { SortOptions } from '../utils/SortOptions.d';
+
+export default defineComponent({
+    name: 'ModsMenu',
+    props: {
+        showingLocalMods: {
+            required: true,
+            type: Boolean
+        }
+    },
+    mounted() {
+        this.$store.state.search.sortValue = this.sortValues[3].value;
+    },
+    computed: {
+        sortValues(): {label: string, value: string}[] {
+            return Object.keys(SortOptions).map((key: string) => ({
+                value: key,
+                label: Object.values(SortOptions)[Object.keys(SortOptions).indexOf(key)]
+            }));
+        }
+    }
+})
+</script>
+
+<style scoped>
+.fc_mods__menu {
+    display: flex;
+    max-width: 222px;
+    min-width: 222px;
+    padding: 10px;
+}
+
+.fc_mods__menu h5 {
+    margin: 8px 0 16px 5px;
+}
+
+.fc_mods__menu h5:not(:first-child){
+    margin-top: 32px;
+}
+
+.fc_mods__menu > .el-menu {
+    background-color: transparent;
+    border: none;
+    width: 100%;
+}
+
+.fc_mods__menu > .el-menu > .el-menu-item {
+    height: 32px;
+    margin-bottom: 5px;
+    border-radius: 5px;
+    color: #e2e6e7;
+}
+
+.fc_mods__menu > .el-menu > .el-menu-item:hover {
+    background-color: #4e4e4e3b;
+}
+
+.fc_mods__menu > .el-menu > .el-menu-item.is-active {
+    color: white;
+    background-color: #4e4e4e7a;
+}
+
+.el-select {
+    width: 100%;
+    margin-top: 5px;
+}
+</style>