From cc32095b2d5bcd80cb069bdb9383c5cbe8be4647 Mon Sep 17 00:00:00 2001
From: Lazar73a <148079148+Lazar73a@users.noreply.github.com>
Date: Mon, 11 Dec 2023 15:04:02 +0000
Subject: [PATCH 1/2] Bild und Verlinkung Funktion eingebaut

---
 src/components/bar/BarItem.vue | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/bar/BarItem.vue b/src/components/bar/BarItem.vue
index f958a8e..43b6c3e 100644
--- a/src/components/bar/BarItem.vue
+++ b/src/components/bar/BarItem.vue
@@ -1,11 +1,14 @@
 <template>
-    <b-card img-src="https://picsum.photos/300/200" img-top>
+    <router-link :to="detailUrl">
+    <b-card :img-src="image" img-top>
         <b-card-title>{{ bar.name }}</b-card-title>
     </b-card>
+</router-link>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
-
+import { mapState } from "pinia";
+import { useBarItemStore } from '@/stores/barItem'
 
 export default defineComponent({
     name: 'BarItem',
@@ -14,6 +17,17 @@ export default defineComponent({
             type: Object,
             required: true,
         }
+    },
+    computed: {
+        ...mapState(useBarItemStore, {
+            imageById: (state) => state.imageById
+        }),
+        image(): string {
+            return this.imageById(this.bar.id) as string;
+        },
+        detailUrl() {
+            return '/bar/' + this.bar.id
+        }
     }
 })
 </script>
\ No newline at end of file

From 932df8cbafcba0cdb191bef9523183c6cbd35005 Mon Sep 17 00:00:00 2001
From: Grottenolm2702 <84659252+Grottenolm2702@users.noreply.github.com>
Date: Mon, 11 Dec 2023 15:07:18 +0000
Subject: [PATCH 2/2] Kategorie Offcanvas Elemente

---
 components.d.ts                  |  1 +
 src/components/FilterSidebar.vue | 17 +++++++++++++++--
 src/views/ClubListView.vue       | 31 -------------------------------
 src/views/VerleihListView.vue    | 13 ++++++-------
 4 files changed, 22 insertions(+), 40 deletions(-)
 delete mode 100644 src/views/ClubListView.vue

diff --git a/components.d.ts b/components.d.ts
index 737c80a..a844906 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -25,6 +25,7 @@ declare module 'vue' {
     BFormInput: typeof import('bootstrap-vue-next')['BFormInput']
     BImg: typeof import('bootstrap-vue-next')['BImg']
     BInputGroup: typeof import('bootstrap-vue-next')['BInputGroup']
+    BNav: typeof import('bootstrap-vue-next')['BNav']
     BNavbar: typeof import('bootstrap-vue-next')['BNavbar']
     BNavbarBrand: typeof import('bootstrap-vue-next')['BNavbarBrand']
     BNavbarNav: typeof import('bootstrap-vue-next')['BNavbarNav']
diff --git a/src/components/FilterSidebar.vue b/src/components/FilterSidebar.vue
index 221e5e2..65ac5b1 100644
--- a/src/components/FilterSidebar.vue
+++ b/src/components/FilterSidebar.vue
@@ -1,6 +1,19 @@
 <template>
-  <BButton @click="click">Show OffCanvas</BButton>
-  <BOffcanvas v-model="show" />
+  <BButton @click="click">Kategorie</BButton>
+  <BOffcanvas v-model="show" >
+
+    <BNav vertical class="w-25">
+      <BNavItem to="/">Home</BNavItem>
+      <BNavItem to="/verleih">Verleihe</BNavItem>
+      <BNavItem to="/events">Events</BNavItem>
+      <BNavItem to="/about">Über uns</BNavItem>
+    </BNav>
+
+
+
+
+  </BOffcanvas>
+
 </template>
 
 <script setup lang="ts">
diff --git a/src/views/ClubListView.vue b/src/views/ClubListView.vue
deleted file mode 100644
index b14f55a..0000000
--- a/src/views/ClubListView.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import FilterSidebar from '@/components/FilterSidebar.vue'
-import SearchBar from '@/components/SearchBar.vue'
-import type { BRow } from 'bootstrap-vue-next'
-import { ref } from 'vue'
-
-const searchQuery = ref('')
-const entries = ref([ "test", '1234', '567'])
-
-</script>
-
-<template>
-
-<BContainer>
-  <BRow>
-    <BCol>
-      <FilterSidebar />
-    </BCol >
-      <!-- <BCol>
-        <SearchBar :searchQuery="searchQuery" @searchQuery="searchQuery = $event" />
-    </BCol> -->
-    <!-- <BCol>
-    icon
-    </BCol > -->
-  </BRow>
-  <BRow lg = "12">
-<HomeContent :entries="entries" :foundEntry="searchQuery" />
-  </BRow>
-</BContainer>
-
-</template>
\ No newline at end of file
diff --git a/src/views/VerleihListView.vue b/src/views/VerleihListView.vue
index aa1401c..c0c694b 100644
--- a/src/views/VerleihListView.vue
+++ b/src/views/VerleihListView.vue
@@ -15,18 +15,17 @@ const entries = ref([ "test", '1234', '567'])
 
 <BContainer>
   <BRow>
-    <BCol lg = "4">
+    <BCol>
       <FilterSidebar />
     </BCol >
-      <BCol lg = "4">
+      <!-- <BCol>
         <SearchBar :searchQuery="searchQuery" @searchQuery="searchQuery = $event" />
-        
-    </BCol>
-    <BCol lg = "4">
+    </BCol> -->
+    <!-- <BCol>
       icon
-    </BCol >
+    </BCol > -->
   </BRow>
-  <BRow lg = "12">
+  <BRow>
 <HomeContent :entries="entries" :foundEntry="searchQuery" />
   </BRow>
 </BContainer>