From 5c577acdbf6c4fe4221d3cc8043776b27d9bad78 Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Mon, 26 May 2025 15:21:06 +0200
Subject: [PATCH] Add sidebar for filter

---
 resources/js/components/page/Filter.vue |  9 ++++++---
 resources/js/components/ui/Sidebar.vue  | 18 +++++++++++++++++-
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/page/Filter.vue b/resources/js/components/page/Filter.vue
index 57c231fd..5ef06f81 100644
--- a/resources/js/components/page/Filter.vue
+++ b/resources/js/components/page/Filter.vue
@@ -1,9 +1,10 @@
 <template>
-    <ui-popup v-if="visible === true" heading="Filtern" @close="visible = false">
-        <div class="grid gap-3 md:grid-cols-2">
+    <ui-sidebar v-if="visible === true" @close="visible = false" :max="0">
+        <page-header title="Filtern" @close="visible = false"></page-header>
+        <div class="grid gap-6 p-6">
             <slot name="fields"></slot>
         </div>
-    </ui-popup>
+    </ui-sidebar>
     <div class="px-6 py-2 border-b border-gray-600 items-center space-x-3">
         <div class="flex flex-col sm:flex-row items-stretch sm:items-end space-y-1 sm:space-y-0 sm:space-x-3">
             <slot name="buttons"></slot>
@@ -15,5 +16,7 @@
 <script setup>
 import {ref} from 'vue';
 
+defineEmits(['close']);
+
 const visible = ref(false);
 </script>
diff --git a/resources/js/components/ui/Sidebar.vue b/resources/js/components/ui/Sidebar.vue
index d977c6a5..8875a6ad 100644
--- a/resources/js/components/ui/Sidebar.vue
+++ b/resources/js/components/ui/Sidebar.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="fixed w-full w-[80vw] max-w-[40rem] shadow-2xl bg-gray-600 right-0 top-0 h-full flex flex-col group is-bright">
+    <div class="fixed shadow-2xl bg-gray-600 right-0 top-0 h-full flex flex-col group is-bright" :class="widths[max]">
         <suspense>
             <slot></slot>
 
@@ -17,4 +17,20 @@
 
 <script setup>
 defineEmits(['close']);
+
+const widths = {
+    40: 'w-full w-[80vw] max-w-[40rem]',
+    30: 'w-full w-[80vw] max-w-[30rem]',
+    20: 'w-full w-[80vw] max-w-[20rem]',
+    10: 'w-full w-[80vw] max-w-[10rem]',
+    0: '',
+};
+
+defineProps({
+    max: {
+        default: () => 40,
+        type: Number,
+        required: false,
+    },
+});
 </script>