Remodel for Mobile

components/mobile/FloatingActionButton.vue

@@ -2,46 +2,65 @@
 const props = defineProps({
   label: {
     type: String,
-    required: true,
+    required: false,
+    default: null
   },
   icon: {
     type: String,
+    required: false
   },
   variant: {
     type: String,
-    default: 'solid'
+    default: "solid"
   },
   color: {
     type: String,
-    default: 'primary'
+    default: "primary"
   },
   pos: {
     type: Number,
-    default: 0
+    default: 6 // Abstand von unten in Rem (6 = 1.5rem * 6 = 9rem)
   }
 })
 
-const emit = defineEmits(['click'])
-
+const emit = defineEmits(["click"])
 </script>
 
 <template>
-  <UButton
-      id="fab"
-      :icon="props.icon"
-      :label="props.label"
-      :variant="props.variant"
-      :color="props.color"
-      @click="emit('click')"
-      :style="`bottom: ${15 + props.pos * 5}vh;`"
-      class="bg-white dark:bg-gray-950"
-  />
+  <!-- Wrapper für Position + Animation -->
+  <div
+      class="fixed right-5 z-40 transition-all"
+      :style="{ bottom: `calc(${props.pos}rem + env(safe-area-inset-bottom))` }"
+  >
+    <UButton
+        id="fab"
+        :icon="props.icon"
+        :label="props.label"
+        :variant="props.variant"
+        :color="props.color"
+        @click="emit('click')"
+        class="
+          fab-base
+          shadow-xl
+          hover:shadow-2xl
+          active:scale-95
+          transition
+        "
+    />
+  </div>
 </template>
 
 <style scoped>
-#fab {
-  position: fixed;
-  right: 15px;
-  z-index: 5;
+/* FAB Basis */
+.fab-base {
+  @apply rounded-full px-5 py-4 text-lg font-semibold;
+
+  /* Wenn nur ein Icon vorhanden ist → runder Kreis */
+  /* Wenn Label + Icon → Extended FAB */
 }
-</style>
+
+/* Optional: Auto-Kreisen wenn kein Label */
+#fab:not([label]) {
+  @apply w-14 h-14 p-0 flex items-center justify-center text-2xl;
+}
+</style>