Merge branch 'main' of https://github.com/Sybit-Education/bk2wi-2023

Sybit-Education · Dec 13, 2023 · 1db5db7 · 1db5db7
2 parents ba020b4 + 58a6ef5
commit 1db5db7
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 4 deletions.
diff --git 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
@@ -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/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>