feat(banner): allow also placement at bottom of page

discue · Sep 18, 2022 · 801d1d1 · 801d1d1
1 parent 4e06c78
commit 801d1d1
Showing 1 changed file with 14 additions and 3 deletions.
diff --git a/src/components/banner.vue b/src/components/banner.vue
@@ -30,6 +30,10 @@ const props = defineProps({
     parent: {
         type: String
     },
+    bottom: {
+        type: Boolean,
+        default: false
+    },
     closeButtonTitle: {
         type: String,
         default: 'Close'
@@ -47,12 +51,19 @@ const showBanner = computed(() => {
 })
 
 const clazz = computed(() => {
-    const clazz = 'top-0 h-14 pl-2 pr-12 w-full bg-lime-300 flex items-center justify-center font-medium shadow' + ' '
+    let clazz = 'h-14 pl-2 pr-12 w-full bg-lime-300 flex items-center justify-center font-medium shadow' + ' '
+    if (props.bottom) {
+        clazz += 'bottom-0 '
+    } else {
+        clazz += 'top-0 '
+    }
     if (props.parent) {
-        return clazz + 'fixed z-50'
+        clazz += 'fixed z-50'
     } else {
-        return clazz + 'absolute z-10'
+        clazz += 'absolute z-10'
     }
+
+    return clazz
 })
 
 const closeBanner = () => {