Add sidebar for filter

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>

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>