slideoutpanel

2023-07-27 11:22:00 +02:00
parent e200b82697
commit 34a445eaa3
1 changed files with 62 additions and 0 deletions
@@ -0,0 +1,62 @@
+<template>
+     <div class="slideout-overlay" :class="{'open': props.modelValue}" @click="$emit('update:modelValue', false)">
+        <div :class="{'slideout-wrapper': true, 'open': props.modelValue}" >
+       
+            <div class="slideout-panel" @click="testClick">
+                <slot></slot>
+            </div>
+        </div>
+     </div>
+</template>
+
+<script setup>
+import { inject, watchEffect } from "vue";
+
+const props = defineProps({
+	modelValue: Boolean,
+});
+
+defineEmits(["update:modelValue"]);
+
+const showPanel = inject("showPanel");
+console.log("showPanel.value", showPanel);
+const isMobile = inject("isMobile");
+
+function testClick(e) {
+	e.preventDefault();
+	e.stopPropagation();
+}
+</script>
+
+<style lang="sass">
+.slideout-overlay
+    background-color: rgba(0,0,0,.5)
+    z-index: 100
+    &.open
+        height: 100%
+        width: 100%
+        position: fixed
+    .slideout-wrapper
+        z-index: 100
+        height: 100vh
+        right: 0
+        position: fixed
+        display: flex
+        border: 1px solid rgba(152, 161, 192, 0.24)
+        box-shadow: rgba(0, 0, 0, 0.24) 12px 16px 24px, rgba(0, 0, 0, 0.24) 12px 8px 12px, rgba(0, 0, 0, 0.32) 4px 4px 8px
+        transition: margin-right 250ms ease 0s
+        margin-right: -300px
+        background-color: #2D2D2D
+        &.open
+            margin-right: 0
+        .slideout-panel
+            width: 300px
+            height: 100%
+            padding: 24px
+            .slideout-icon
+                cursor: pointer
+                &:hover, &:active, &:focus
+                    background-color: lighten(#2D2D2D, 20%)
+                svg
+                    font-size: 30px
+</style>