filter

src/components/BaseComponents/FilterComponent.vue

 <template>
   <div>
-    <div class="form-check" v-for="filter in filters" :key="filter">
+    <div class="form-check flex justify-center" v-for="filter in filters" :key="filter">
       <input
           class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
           type="radio"
@@ -9,16 +9,19 @@
           @change="checkRadioButton($event)"
       />
       <label
-          class="form-check-label inline-block text-gray-800"
+          class="form-check-label text-gray-800"
       >
         {{ filter}}
       </label>
     </div>
-    <ColoredButton
-      :text="'Lagre'"
-      @click="saveFilter()"
-      class="m-2 w-fit"
-    />
+    <div class="flex justify-center">
+      <ColoredButton
+          :text="'Lagre'"
+          @click="saveFilter()"
+          class="m-2"
+      />
+    </div>
+
   </div>
 
 </template>

src/components/CommunityComponents/CommunityHome.vue

@@ -32,11 +32,18 @@
               class="m-2 w-fit"
           />
         </div>
-        <FilterComponent
-            class=" bg-white"
-            v-if="filterDialog"
-            v-on:filter="saveFilter"
-        />
+        <CustomFooterModal
+            @close="this.filterDialog = false"
+            :visible="filterDialog"
+            title="Filter"
+            message="Velg Filter"
+        >
+          <FilterComponent
+              class=" bg-white"
+              v-on:filter="saveFilter"
+          />
+        </CustomFooterModal>
+
       </div>
     </div>
 
@@ -90,6 +97,7 @@ import CommunityHeader from "@/components/CommunityComponents/CommunityHeader";
 import PaginationTemplate from "@/components/BaseComponents/PaginationTemplate";
 import ColoredButton from "@/components/BaseComponents/ColoredButton.vue";
 import FilterComponent from "@/components/BaseComponents/FilterComponent";
+import CustomFooterModal from "@/components/BaseComponents/CustomFooterModal";
 
 import {
   GetCommunity,
@@ -104,6 +112,7 @@ export default {
     PaginationTemplate,
     ColoredButton,
     FilterComponent,
+    CustomFooterModal,
   },
   computed: {
     searchedItems() {
@@ -196,6 +205,13 @@ export default {
     saveFilter(radio){
       this.selectedFilter = radio;
       console.log(this.selectedFilter);
+      if(this.selectedFilter === "Tittel: A - Å"){
+        this.sortAlfabetical();
+      }
+      this.filterDialog = false;
+    },
+    sortAlfabetical: function (){
+      this.items.sort();
     },
 
     //Pagination