Redesign productDetail dialog

software/src/pages/productsPage/index.vue

@@ -1,25 +1,17 @@
 <script setup lang="ts">
 import productCard from "./productCard.vue"
 import productDetails from "./productDetails.vue"
-import filterBar from "./filterBar.vue"
 import { ref, watch } from "vue";
-import { FilterModel } from "@/data/models/filterModel";
 import { useProductStore } from "@/data/stores/productStore";
 import { ProductWithCategoryModel } from "@/data/models/productWithCategoryModel";
 import alertBanner from "@/components/alertBanner.vue";
+import filterNavDrawer from "./filterNavDrawer.vue";
 
 const productStore = useProductStore()
 
 const showProductDetails = ref(false)
 const dialogProduct = ref(new ProductWithCategoryModel())
 
-const sortBy: Array<FilterModel> = [
-  { icon: "mdi-sort-ascending", name: "Price: Low to high" }, 
-  { icon: "mdi-sort-descending", name: "Price: High to low" },
-  { icon: "mdi-sort-alphabetical-ascending", name: "Name: A to Z" }, 
-  { icon: "mdi-sort-alphabetical-descending", name: "Name: Z to A" },
-]
-
 function showProductDialog(product: ProductWithCategoryModel) {
   dialogProduct.value = product
   showProductDetails.value = true
@@ -37,11 +29,7 @@ watch(() => productStore.onlyDiscounts, async () => { productStore.filterProduct
         <alert-banner />
       </v-col>
     </v-row>
-    <v-row>
-      <v-col>
-        <filter-bar />
-      </v-col>
-    </v-row>
+    
     <v-row dense>
       <v-col
         v-if="productStore.filteredProducts.length > 0"
@@ -63,6 +51,8 @@ watch(() => productStore.onlyDiscounts, async () => { productStore.filterProduct
     </v-row>
   </v-container>
 
+  <filter-nav-drawer />
+
   <product-details
     v-model="showProductDetails"
     :product="dialogProduct"